R·ex / Zeng


音游狗、安全狗、攻城狮、业余设计师、段子手、苦学日语的少年。

分类“开发”下的文章

由于浏览器的优化导致的 Bug 们

按理说,随着时间的发展,浏览器会做各种各样的优化来提升网页浏览的性能,但不是所有优化都能起到积极的效果,有的优化甚至属于“智障”级别。下面我就分享三个我遇到或听说的、由于浏览器自身的优化导致的一些 Bug。 Passive Event Listeners 我之所以知道了这个东西,是因为昨天邻居向我抱怨的一个问题,他的移动端页面使用了一个日期选择器,但在上下滑动选择日期的时候,Console ...

Babel 如何转换 async-await 至 ES5

背景 中午吃饭的时候跟同事讨论起了 async-await ,我认为 async-await 是 Promise 的语法糖,但同事认为更贴近 Generator。于是趁下午摸鱼的时间查了一下资料,并自己用简单的例子对比了一下转换前后的代码,大概有了一定的了解。 讲真,在刚看到转换结果的时候我整个人是懵逼的(虽然很早以前就看过了,毕竟每次 async-await 函数报错的时候调试器...

从前端性能监控发现的 Chrome Bug:eval、onerror 与同源策略

背景 最近在做公司的一个前端监控项目,有一个需求是需要捕获前端错误并上报。这个需求其实很简单,使用 window.onerror 或者 window.addEventListener('error', ...) 就可以捕获异常数据,MDN 的 这篇文章 讲述了具体的用法,AlloyTeam 的 这篇文章 也讲了一些例子,以及针对触发了同源策略的应对方案。 ...

雪碧图的应用场景 & 一种生成算法

CSS 雪碧图 相信上古时期搞过前端的同学都知道,可以通过合并一些小图片、使用 CSS 控制 background-position 的方式来减少 HTTP 请求次数,从而优化网页加载时间,这就是 CSS 雪碧图(Spritesmith)。不过自从 HTTP/2 出来之后,这个用途就已经没什么意义了。当然,它也可以避免当正常状态与 hover 状态使用不同的图片时,首次 Hover 要...

对 CSS 变量的一点实践

什么是 CSS 变量 之前我刚接触 CSS 预处理器的时候,被里面的变量功能给吸引了,你可以跟正常的编程语言一样定义变量,里面的值可以是各种各样的东西,例如 2rem 或者 #123456 ,甚至还可以对变量做一些运算,例如两个数值相加,或者把这个颜色变深 10% 。 后来无意间听说了 CSS 变量这个概念,于是上网查了一下,这儿的变量其实更相当于预定义的常量,因为 CSS 还不支持...

代码高亮的可行方案

Update 20180704:负向零宽断言我手边只有 Chrome 支持,所以目前还是不可用的,还好 PrismJS 提供了一种 Hack 的方法可以支持这个特性的很有限的部分:当传入 lookbehind 属性时,会删掉 match 数组的第零项,这样第一个括号的内容就成了匹配到的东西……我已经给 PrismJS 提了 Pull Request(地址在 这里 ),但尚未被...

编写状态驱动的业务代码

什么是状态驱动的业务代码 别看概念似乎很高大上,其实是我胡扯出来的……简单来说,就是把业务按照一个个状态进行拆分,然后通过状态来计算当前要执行的操作(后端)或当前要展示的界面(前端)。 虽然这个做法很早就有了,而且绝对有很多人实践过了,但似乎一直没有一个专门的名词(也可能是我不知道),于是我就将其描述为“状态驱动的业务代码”了。 几个业务场景 多个步骤的页面 我们的一个业务场景是(部分...

由 npm link 引发的一个坑

什么是 npm link 可能很多同学没有接触过这个命令,就先提一下吧。NPM 文档在 这里 。 假设我们开发了一个 NPM 的包 a ,然后我们的项目使用了这个包,那么正常情况下,每次 a 有变动,我们都要更新到项目中。 npm 的 link 命令可以解决这个问题,步骤如下: 进入 a 的根目录,执行 npm link ,这会创建一个软链接 $PREFIX/lib...

为了用户体验而做的事情

嗯你没看错,这篇文章的主角还是那个编辑器,还是熟悉的 react-dnd 和 immutable-js 。现在这个编辑器已经可以替代目前线上的旧版编辑器了,而且功能更全。接下来我就说一说,为了让这个编辑器的用户体验更好,我都做了哪些事情——有技术方面的,也有设计方面的。 技术方面 拖拽时显示元素的详细内容 由于用的是 react-dnd ,之前的效果是默认效果——对元素 DO...

对 react-dnd、immutable-js 与树形结构的优化

背景 最近一直在做一个低配版网页编辑器(面单编辑器),这是我刚入职的时候从同事那儿接手的一个 React 项目,项目中使用了 react-dnd 作为拖拽库,Store 中的信息都是 Immutable 对象。按理说应该效率挺高的,于是我就一直专注于业务需求,这周就差不多写完了。 如果一切顺利的话就不会有这篇文章了,起因是前天我手贱,搞了 256 个元素进去,别说拖拽了,选中一个元素都得卡上...

一次很蠢的优化经历:判断数组 A 是否是数组 B 的一部分

原问题 昨天一个同学问了我一个问题,他想扩展 JavaScript 中的 Array.prototype ,以判断当前数组是否被包含于另一个数组(不考虑 a = [a] 这样的循环引用),例如: [1] 被包含于 [2, [1], 3] 和 [[2], [3, [1], 4]] 两个数组中。其实这道题如果只需要考虑引用相等,例如这样设计测试用例: const a = [1]...

从连接器开始的一系列旅程

偶然认识的连接器 最近有小伙伴在群里问一些关于 Underscore.js 中 fnull 函数的问题,我并没用过这个函数,于是就去翻文档,于是就发现了一个之前没见过的词: combinator 。其实光看英文“ 连接器 ”大概能知道是带有“函数组合”的意思,并且文档里写到这个函数是个高阶函数,于是我就大概知道是怎么回事了。在我看来, combinator 其实跟之前见过的 dec...

这是我们共同度过的

第 3164 天