笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功能核心部分具有较强的通用性与移植性，故拿出来和大家分享交流一下。

这个插件可以拦截页面上的 ajax 请求，并把返回结果替换成任意文本。它对 mock 数据、排查一些线上问题等会有很大帮助。（当然 chales 等抓包软件也可以做到，然而使用起来比较繁琐，做成 chrome 插件的形式会方便许多）

对于一个 Web 应用来说，理想的测试组合应该包含大量单元测试（unit tests），部分快照测试（snapshot tests），以及少量端到端测试（e2e tests）。参考测试金字塔，我们构建了前端应用的测试金字塔。

在不指定 vertical-align 時，默認即基線對齊。然而由於該 box 當中既沒有 block level box 也沒有 text（比如全是 floating boxes，沒有規範的可以提取基線的地方），導致對齊時以該元素底部而非基線爲基準，又因爲元素底部在基線以下，就會出現對齊時上移的情況。

Immutable.js 采用了持久化数据结构和结构共享，保证每一个对象都是不可变的，任何添加、修改、删除等操作都会生成一个新的对象，且通过结构共享等方式大幅提高性能。网上已经有很多文章简单介绍了 Immutable.js 的原理，但基本都是浅尝辄止，我也是搜了很久没找到针...

Babel 默认只转换新的 JavaScript 语法，而不转换新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。如果想使用这些新的对象和方法，必须使用 babel-...

较为知名的是react-dnd，然而它似乎只支持把一个元素移到固定的位置，我需要的是一个标签可以移动到任意位置的两个标签之间（每个标签长度不固定，所以没有固定的位置）满足上述需求的是react-tags，但该组件很不灵活，想要修改样式、对标签进行一些额外操作很不方便...

较为知名的是react-dnd，然而它似乎只支持把一个元素移到固定的位置，我需要的是一个标签可以移动到任意位置的两个标签之间（每个标签长度不固定，所以没有固定的位置）满足上述需求的是react-tags，但该组件很不灵活，想要修改样式、对标签进行一些额外操作很不方便...