选中鼠标附近的文字 • June 22, 2018
最近终于抽空给 Saladict 实现了鼠标悬浮取词功能，使用了较为简洁的实现方式，这里分享一下原理以及坑的处理。 初尝试 这个需求其实很早就被人提 issue 了，当时做了一番搜索，最后尝试了 document.caretPositionFromPoint / document.caretRangeFromPoint ，效果不太理想。 如果看 mdn…
prototype 与 __proto__ 的爱恨情仇 • August 12, 2017
经历了上次的《JavaScript This 的六道坎》 发现编故事有点上瘾，而且记忆效果也不错哈哈，今天继续唠叨一下 prototype 与 __proto__ 的爱恨情仇。 先理解两者的一个本质区别，prototype 是函数独有的，是人为设定的；__proto__ 是所有对象都有的，是继承的。 然后来看一个两个神的故事： 首先在 ECMAScript 星球，万物起源于 the…
巧妙监测元素尺寸变化 • July 15, 2017
在往下读之前不妨先想一下，你会怎么实现？如何知道元素的尺寸发生变化了？ 相信很多人第一反应是 resize 事件，但这个只是 document view 变化才会触发。 然后就是轮询，反复查询值变化了没有。开销不是一般的大，但像这样的库（比如这个七年前的）现在还有人用。 最后便是这个，号称 event based…
Manacher 马拉车算法 • July 06, 2017
马拉车算法可以在线性时间复杂度内求出一个字符串的最长回文字串。其核心思想跟 KMP 相似，即反复利用已掌握的情况。 视频推荐看这个，觉得是最清晰易懂的： 整体思路 这个算法的主要思路是维护一个跟原串 str 一样长的数组 lens。lensi 表示以 stri…
定位与拖动 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…
深入 ES2015 默认参数 • January 22, 2017
ES2015 为函数加入了方便的默认参数语法。 很方便是吧，但每件新东西总有坑。 TDZ 这个是最早见的坑，已经有不少文章指出了是个 TDZ (Temporal Dead Zone) 的问题。我找了大量资料，大部分文章基本是参考自这篇，它指出了 TDZ…
Progressive background-image With Ease • December 26, 2016
Everyone likes smooth loading. Lately I tried to make the background-image of the menu to load progressively(also to the cover if you view the blog on mobile). If you take a look at how Medium does…
在 Hexo 博客上使用 Emoji • December 23, 2016
（🚨 本博客已换用其它技术栈，Github Emoji 在 Hexo 上的效果见 2018 版） Emoji 都要出电影了，博客怎么能不用。奇怪的是 hexo 上只有一个插件，要在文中添加 tag，还不支持 hexo3 。我不太喜欢在 markdown 里加各种 tag，所以就打算自己再写个插件。 Github 对 emoji…
SVG Symbol 和 Sprite 的好处和坑 • November 28, 2016
SVG Symbol 用 Symbol 来把 SVG 合并到一个文件几乎是现在最流行的用法。 Symbol 好处 方便 利用 ID 来取图案，所以不用各种计算，可以随便放。 反复利用 这应该是一个不太容易发现的好处，你可以在文件内部继续用<use>来做图案的各种版本。这样 SVG 的优势更加明显，节省了好多空间。 比如这个博客里用到的社交图案，原本的是只有图案本身。例如这是 Codepen…
自适应背景图片 • September 11, 2016
很多时候我们希望背景图片能够在元素不同大小的情况下都能够显示出主体。 居中是最常见的方式，但如果主体不在中间这个效果就大打折扣了。 这个对我来说一开始仅仅是一个念头，也没太注意。直到一次在 podcast 上听到有位嘉宾做了一个 jQuery 插件 https://github.com/wentin/ResponsifyJS…
JavaScript this 的六道坎 • May 12, 2016
鉴于this风骚的运作方式，对this的理解是永不过时的话题，本文试图通过将其大卸六块来钉住这个磨人的妖精。
理解 Anki 基础概念 • March 20, 2016
在尝试了 Anki 、 SuperMemo 、 Quizlet 和 Memrise 之后，最后选用了 Anki。 Anki 是一个卡片记忆系统，基于 SuperMemo 老版的 SM2 算法，在实用性和有效性方面做了很好的平衡。简洁的界面，全平台免费同步，用 HTML 和 CSS 做模板，导入导出非常灵活，很适合程序员使用。 Anki…
理解 Prototype • May 14, 2015
Prototype 初看很好理解，实际上很容易混淆。而且因为不影响平时使用，一直没用动力去了解，长时间都是在一知半解的状态。 混淆 混淆主要是因为 [[prototype]] 和 prototype 名字长得太像。看回以前总结的模拟继承笔记，基本就是照搬书，压根没搞清楚。 首先是 [[prototype]]， 每个对象都会有 [[prototype…
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…
如何正确学习 JavaScript • May 15, 2014
正确学习 JavaScript（写给非 JavaScript 程序员和编程新手） 原文：How to Learn JavaScript Properly（2014-2-7） 学习时长：6～8周 学习前提：中学水平，无需编程经验 更新（2014-1-7） 在 Reddit 上创建了一个学习小组 January 2014， “Learn JavaScript” Study Group on…