RxJS Hooks and Suspense: The Ultimate Guide • February 25, 2020
In witch I suggested a simple, flexible, testable and performant solution to use RxJS Observable with React hooks and Suspense.
V8 中的快属性 • November 25, 2018
译自：Fast properties in V8（2017-08-30） 本文我们将解释 V8 内部如何处理 JavaScript 属性（properties）。从 JavaScript 的角度来看属性只有少数的区别。JavaScript 对象通常跟字典（dictionaris…
React 黑魔法之 Portal + SyntheticEvent + iframe • July 15, 2018
在实现划词扩展的时候，查词面板等模块需要植入到源网页，为了更方便地隔离样式污染，植入的模块均使用了 <iframe> 包装。在前一个 Vue 实现的版本 Saladict 5 中，有几个不太舒服的小小小小地方： <iframe> 内外事件不通。 <iframe> 内外环境不一样，变量不能共用，需要 postMessage 交流。 Vue 组件必须要有一个根元素，且 v-if…
选中鼠标附近的文字 • June 22, 2018
最近终于抽空给 Saladict 实现了鼠标悬浮取词功能，使用了较为简洁的实现方式，这里分享一下原理以及坑的处理。 初尝试 这个需求其实很早就被人提 issue 了，当时做了一番搜索，最后尝试了 document.caretPositionFromPoint / document.caretRangeFromPoint ，效果不太理想。 如果看 mdn…
深入 React Render Props 模式 • April 03, 2018
随着 React 的新 Context API 出来，render props 模式再次发挥重要作用。本文将尝试深入理解 render props 的利弊，并结合高阶组件寻找合适的处理方式。 基础 先看官方给出的简单例子： 加个 DataProvider 的简单实现， 这里是将一个返回 React 元素的函数传给 DataProvider 的 props.render，DataProvider…
理解 RxJS ：四次元编程 • February 16, 2018
学习 RxJS 最大的问题是官方造了很多概念，但文档又解释得不太全面和易懂，需要结合阅读各种文章（特别是 Ben Lesh 的，包括视频）。本文试图整体梳理一遍再用另外的角度来介绍，希望能帮助初学者或者对 RxJS 的一些概念比较含糊的使用者。 为什么需要 RxJS RxJS…
获取选择文本所在的段落和句子 • December 02, 2017
本文聊聊如何获取选词的上下文。
React Native 搭配 MobX 使用心得 • November 13, 2017
MobX 是一款十分优秀的状态管理库，不但书写简洁还非常高效。当然这是我在使用之后才体会到的，当初试水上车的主要原因是响应式，考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处:joy:。 在使用过程中走了不少弯路，一部分是因为当时扫两眼文档就动手，对 MobX 机制理解得不够；其它原因是 MobX 终究只是一个库，会受限于 React…
定位与拖动 iframe • April 06, 2017
定位 iframe 在写一个划词翻译扩展 Saladict 时，有一个需求：用户选择一段文本之后，会在鼠标附近显示一些元素。 这个初看很简单，监听一个 mouseup 事件，获取 clientX 和 clientY 就行。这也是 Saladict 前几版用的方法。 但这个方法有个缺陷：iframe 里的鼠标事件不会传到父窗口上。 解决方法也很简单，就难在把它们都联系起来。 iframe…
Position and Drag iframe • April 06, 2017
Position in iframes I wrote a Chrome extension Saladict, an inline translator, which involved such requirement: When user makes a text selection, something will pop up nearby the cursor. It looks…
Get All Images in DOM (including background) • March 09, 2017
Quite useful if you are writing an browser extension or something. To get all the images in DOM there are actually three places we are going to look at: <img> element, background-image CSS property…
获取 DOM 里所有图片（包括背景和iframe） • March 09, 2017
在写浏览器扩展什么的时候可能会用上。 获取 DOM 里的图片主要是在这几个地方里面找: <img> 元素, background-image CSS 属性和 <iframe>。 img 如果只想获取 <img> 的图片，有两种方式: 直接获取所有 img 标签: 还可以用 document.images: background-image 获得背景图片需要查看所有 DOM…
倒腾 Vue Webpack2 单元测试 • February 19, 2017
vue-cli 提供的官方模板确实好用。但一直用下来手贱毛病又犯了，像穿了别人的内衣，总感觉不舒服。 所以有机会就瞎倒腾了一遍，总算把各个流程摸了一把。这里分享一下配置带覆盖率的单元测试。 文件结构 基本的文件结构。 依赖 根据需要增删 入口 先从 package.json 开始。跟官方的一致。设置 BABEL_ENV 可以在测试的时候才让 Babel 引入 istanbul…
闲读源码：ScrollingElement Polyfill • April 18, 2016
今天看了这篇文章，讲到 WebKit document.body.scrollTop 的问题。还有这里 Dev.Opera Blog : Fixing the scrollTop bug。 scrollTop, scrollLeft, scrollWidth, scrollHeight 都是跟滚动相关的属性。设置 scrollTop 和 scrollLeft…
JavaScript 有必要缓存 for 循环中的 Array.length 吗？ • April 21, 2015
问题 缓存 Array.length 是老生常谈的小优化。 但笔者对这种破碎的写法感到不适，也对这种写法的实际优化效果产生疑问。 且推崇这种写法的朋友似乎很多也是“前辈这么说+自己想了一下觉得有道理”。 由于 for 循环搭配 Array.length 是极度常用的 JavasScript 代码，所以非常必要搞清楚。 结论 先上笔者得到的结论：缓存 Array.lengh…
V8 是如何实现 JavaScript Hoist 的 • March 29, 2015
首先 今天在知乎上看到一个问题“JavaScript有预编译吗？”，题主实际上是对 JavaScript 变量提升（hoist）机制的实现过程有疑惑。我刚知道 hoist 时也好奇过浏览器是怎么实现的，就跑去看了一下 V8 引擎的源码，做了一些笔记，现在正好趁机整理出来。 Hoist var 和 function 的 hoist 是老生常谈的问题，网上有大量资料，JavaScript 秘密花园 V…
ES6 随笔：函数与块级作用域 • March 09, 2015
阅读 Kyle Simpson 《You don't JS: Scope and Closures》第三章过程中的一些随笔
Stream-Adventure HTML-Stream 中对 trumpet 的理解 • November 08, 2014
玩了 John Resig 提到的 Stream-Adventure ，在 HTML-Stream 关卡中，根据题目提示写出了代码 虽然写出来了，但其实我还是混淆着 tr 和 steam 流。 最后在 nodeschool 的讨论中得到了比较好启发。 试着整理一下自己的表述： 这里很明显是有两条流 tr 和 steam ，之前混淆他们的关系，所以一直不能理解。 tr 是主流，输入流入 tr…
Handlebars.js 脑图 • August 30, 2014
可以放大图片看，或者[这里]。总结了 Handlebars.js 的一些基本概念，时间不紧的话还要写个入门什么的一起加深理解。Handlebars 很容易上手，但其灵活性才是亮点，也是难点。 handlebarsjs
关于 YUI 的重要公告 • August 30, 2014
原文：Important Announcement Regarding YUI（2014-8-30） 雅虎 UI 库（YUI）从 2005 年就开始在雅虎使用，并在 2006 年 2 月 13 日宣布公开。虽然对比现在变化了不少，但 YUI 一直都是致力于提供一个全面的工具集，让开发人员轻松地创建 web 富应用程序。同样的，YUI 在 Yahoo 历史中占有重要的地位：成千上万行依赖于 YUI…
深入理解 JavaScript 模块模式 • August 05, 2014
拜读 2010 年神文，原文：JavaScript Module Pattern: In-Depth（2010-03-12） 模块模式（module pattern）是一种常见的 JavaScript…
JavaScript 继承总结 • July 27, 2014
先用一个简单的 Person 类作为文章其它例子的前提。 原型链 JavaScript…
JavaScript 创建对象总结 • July 25, 2014
JavaScript 是一门灵活的语言，就创建对象而言就有各种各样的方法。本文是《JavaScript高级程序设计》（第3版）的笔记，主要是针对各种创建对象方法之间的关系、优缺点进行梳理。每种方法相关的其它细节不是本文重点，我会标记页码。 创建单个对象 1、object 构造函数：调用 Object 的构造函数。person 的 constructor 值是 Object。…
阅读 jQuery 源码的18个惊喜 • July 23, 2014
原文：18 Surprises From Reading jQuery's Source Code（2014-7-23） 我热爱 jQuery，且尽管我认为自己算是一名高级 JavaScript 开发者，我从来没有试过由头到尾把 jQuery 的源码看一遍，直到现在。这里分享一些我一路下来学到的东西： 注意：我使用 $.fn.method() 语法来表示调用一组匹配元素的方法。比如当我说 $.fn…
Google Chrome 霸权主义 • July 17, 2014
原文：Google Chrome Hegemony Google Chrome 是当今互联网中最大的玩家之一。它快速、可靠、功能丰富；特别对 web 开发者来说非常好用。Chrome 也允许安装第三方扩展；Google 团队做得很不错，这些扩展只需 HTML、CSS 和 JavaScript 即可搭建。本文将介绍几个能帮助我们开发的 Chrome 利器。 本文的源码在[这里]。 开发响应式 Web…
使用 Express 与 AbsurdJS 构建 Node.js 应用 • July 07, 2014
原文：Node.js application made with Express and AbsurdJS（2014-7-7） 当今有许多新技术吸引着越来越多的开发者，Node.js 便是其中之一。主要因为它是 JavaScript 驱动的，许多人都很感兴趣。在本教程中，我将会教你结合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架，而 AbsurdJS…
265行代码实现第一人称引擎 • June 11, 2014
原文：A first-person engine in 265 lines（2014-6-11） 今天，让我们进入一个可以伸手触摸的世界吧。在这篇文章里，我们将从零开始快速完成一次第一人称探索。本文没有涉及复杂的数学计算，只用到了光线投射技术。你可能已经见识过这种技术了，比如《上古卷轴2 : 匕首雨》、《毁灭公爵3D》还有 Notch Persson 最近在 ludum dare…
不侧漏精通 Node.js • May 22, 2014
原文：Learn Node.js Completely and with Confidence（2013-2-4） 学习时长：约2周 学习前提：JavaScript 知识掌握 5/10 要成为 JavaScript 开发者现在是最好的时机了，而且会越来越好。主要是因为 HTML5 的来临， Flash 的逝去，移动设备的普及，以及最重要的 Node.js…