Jrain-前端玩具盆

奇怪的知识——位掩码

jrainlau 2月20日发布
19 收藏

我们知道，在计算机中数据其实都是以二进制的形式所储存的，而位运算符则可以对二进制数据进行操作。举个简单的例子，给定两个二进制数据（其中 0b 是二进制数据的前缀）：

探索浏览器端的网络速度测试

jrainlau 2020-12-22 发布
3 收藏

在 Chrome 浏览器种，我们可以使用 window.navigator.connection API 中的 downlink 属性来获取实时网速：

Redis + NodeJS 实现一个能处理海量数据的异步任务队列系统

jrainlau 2020-10-22 发布
13 收藏

在最近的业务中，接到了一个需要处理约十万条数据的需求。这些数据都以字符串的形式给到，并且处理它们的步骤是异步且耗时的（平均处理一条数据需要 25s 的时间）。如果以串行的方式实现，其耗时是相当长的：

使用 babel 全家桶模块化古老的面条代码

jrainlau 2020-09-23 发布
7 收藏

想不通为啥之前维护项目的同学能够忍受这么难以维护的代码……既然现在这个锅被我拿下了，怎么着也不能容忍如此丑陋的代码继续存在着，必须把它优化一下。

【译】如何用 JavaScript 来解析 URL

jrainlau 2020-07-29 发布
6 收藏

统一资源定位符，缩写为URL，是对网络资源(网页、图像、文件)的引用。URL指定资源位置和检索资源的机制(http、ftp、mailto)。

【译】用Node.js编写内存效率高的应用程序

jrainlau 2020-01-14 发布
19 收藏

软件应用程序在计算机的主存储器中运行，我们称之为随机存取存储器(RAM)。JavaScript，尤其是 NodeJS （服务端 JS）允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题，因为糟糕...

102

利用 JS 实现多种图片相似度算法

jrainlau 2019-12-09 发布
65 收藏

在搜索领域，早已出现了“查找相似图片/相似商品”的相关功能，如 Google 搜图，百度搜图，淘宝的拍照搜商品等。要实现类似的计算图片相似度的功能，除了使用听起来高大上的“人工智能”以外，其实通过 js 和几种简单...

一张图理清 Vue 3.0 的响应式系统

jrainlau 2019-10-09 发布
43 收藏

随着 Vue 3.0 Pre Alpha 版本的公布，我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统，而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多，网上的分析文章...

探索如何使用 JSON.stringify() 去序列化一个 Error

jrainlau 2019-09-18 发布
13 收藏

最近在做 Node 服务端需求的时候，遇到了几次服务端报错的问题。打 log 发现均是一些 Error，但是它们都没法很好地透传给前端浏览器，出现问题只能查看服务端机器的日志，调试起来非常不方便。思考了一下，服务端...

GraphQL 项目中的前端 mock 方案

jrainlau 2019-09-05 发布
2 收藏

在使用 GraphQL （以下简称 gql）的前端项目中，往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了，前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有...

来自 Vue 3.0 的 Composition API 尝鲜

jrainlau 2019-08-27 发布
19 收藏

虽然 Vue 3.0 尚未发布，但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

项目中使用 TypeScript 的一些感悟

jrainlau 2019-07-07 发布
16 收藏

上周发布了一款名为 Smartour 的工具，是完全采用 TypeScript （以下简称 ts）来开发的。抛开以前做业务的时候的不完全使用，这次实践可以算是我第一次真正意义上的使用 ts。由于写法上的不同，以及对不熟悉事物...

Smartour——让网页导览变得更简单

jrainlau 2019-07-02 发布
55 收藏

在遇到网页内容有着较大调整的时候，往往需要一个导览功能去告诉用户，某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层，高亮显示被调整的区域，然后通过文字介绍去完成引导。我们把这个功能称为“...

在小程序中实现 Mixins 方案

jrainlau 2019-06-19 发布
25 收藏

在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制，所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂，靠复制...

详解 Github App 的玩法

jrainlau 2019-05-30 发布
10 收藏

之前在使用 Github issues 搭建博客平台的时候，研究过一番如何取得 Github 授权并调用 API 的办法。后来选择了较简单的账号密码和 Token 的方法。但是有读者反馈这样的操作依然稍显麻烦，且在第三方的页面输入账...

为什么我选择用 Github issues 来写博客

jrainlau 2019-05-22 发布
24 收藏

对于爱写东西的人来说，挑一个合适的博客平台是非常重要的。而作为一个 Web 开发者，我们肯定都希望能够拥有一个高度定制化的博客平台，用以展示我们独一无二的个性以及记录长久以来的学习工作等。与此同时，我们...

基于 Github API 的图床 Chrome 插件开发全纪录

jrainlau 2019-05-08 发布
38 收藏

最近基于 Github API 开发了一款图床 Chrome 插件 Picee，现在已经开源并上架 Chrome 应用商店。当中的过程涉及到一些有趣的知识点，故将其记录下来。

DIY 一个 Vuex 持久化插件

jrainlau 2019-04-02 发布
17 收藏

在做 Vue 相关项目的时候，总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理，如果仅因为一次刷新就需要全部重新获取，代价也未免太大了。

134

Web聊天工具的富文本输入框

jrainlau 2019-03-02 发布
91 收藏

最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。

My excellent 2018

jrainlau 2018-12-24 发布
7 收藏

首先是工作上面的变化。自16年毕业以后就在招联消费金融有限公司上班，一直到今年的五月份。在招联的期间，有幸得到老大的赏识，也学到了非常多的东西，积累了不少项目经验，认识了许多优秀的人。为了见识一下更...