blog
blog copied to clipboard
lmk123
个人技术博客，博文写在 Issues 里。
自 Babel 6 以后，Babel 将语法转换功能全都[拆分成了一个个小模块](http://babeljs.io/docs/plugins/)。这些模块让人眼花缭乱，但官方贴心的提供了 Presets，用的最多的大概就是 [ES2015 preset](http://babeljs.io/docs/plugins/preset-es2015/) 了吧。再加上大多数项目为了减小项目体积，所以差不多都用了 [transform-runtime](http://babeljs.io/docs/plugins/transform-runtime/)。 大家的 `.babelrc` 文件可能就跟我下面这个一样： ``` js { "presets": ["es2015"], "plugins": ["transform-runtime"] } ``` **可是，你真的看过 Bebel 处理过的代码吗？** 之所以我会关注这个问题，是因为我有一个项目，明明没有用 [babel-polyfill](http://babeljs.io/docs/usage/polyfill/)，可 Babel 处理后还是加入了 `Symbol`...
### 2016.6.30 更新： 你可以使用 [NamedStorage](https://github.com/lmk123/NamedStorage) 来达成本文提出的优化。 ### 原文 在修改存储在 localStorage 或 sessionStorage 里的数据时，最常用的大概就是下面的步骤了： ``` js function modifyStorage (string) { // 先读取数据 const data = JSON.parse(localStorage.getItem('arrayData')) // 修改数据 data.push(string) // 重新保存...
NPM 3 发布之后，我发现 `node_modules` 原本的树状结构变成了平级结构（不知道描述是否准确），这进一步让我思考该不该用 NPM 替代 Bower 了。 一个项目里要维护两份结构相差无几的配置文件（[package.json](https://docs.npmjs.com/files/package.json) 与 [bower.json](https://github.com/bower/spec/blob/master/json.md)）比较繁琐，而且流行的前端项目会同时发布到 Bower 和 NPM 里。其中，package.json 是必不可少的，而 Bower 更适合前端项目的原因就在于这几点： - 使用平级结构（这一点 NPM 也做到之后就没有太大优势了） - 存放第三方库的文件夹路径可以自定义 而如果使用 NPM 替代 Bower 有以下几点优势：...
众所周知，这两个方法用于在字符串与对象之间进行转换。其中用到的最多的场景就是在保存数据到 localStorage 里的时候——因为 localStorage 里只能保存字符串，所以当我们想要保存对象进去时，就会先 `JSON.stringify()` 一下，读取出来时，再 `JSON.parse()` 一下。 **但是，这样做很可能会产生 bug！** 先来看下面这段代码： ``` js JSON.parse('100'); ``` 一定是我书读的少的缘故，我一直认为上面这段代码会报错——因为字符串 `'100'` 并不是一个 JSON 字符串。 但是实际上，这段代码不会报错，而是会返回 Number 类型的 `100`。 同理还有 `JSON.stringify(100)`，这段代码同样不会报错，而是会返回字符串类型的 `'100'`。[查看完整的在线示例](https://jsfiddle.net/lmk123/kzw1c9v0/) 强烈推荐完整的阅读一下 MDN...
最近开发了 [Runner](https://github.com/lmk123/Runner) 用来记录我跑步时的进度，但却被一个问题给难住了。 比如下面这段代码： ``` js let sec = 0; setInterval( ()=> { sec += 1; if(sec === 55) { alert('notice me'); } // 在第 55 秒的时候提醒我 }, 1000 );...
最近我正在开发公司网站的移动端网站——考虑到功能繁多且无需服务端渲染，也许用 “Web App” 来形容会更准确一点。 公司希望这个 Web App 能运行在微信里，并使用[微信 SDK](https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html) 提供的各种功能（特别是“扫描条形码”的功能）。也就是说，公司想要一个“微信 only” 的网站。 但实际上，我更倾向于“渐进增强”的做法。 以“扫描条形码”举例来说，除了微信，PhoneGap 也有插件提供这个功能。我的想法是：开发一个基本的 Web App，这个 Web App 应该能在任何浏览器环境（普通浏览器、微信内置浏览器或者 PhoneGap）里使用，但如果用户点击了“扫描条形码”的按钮： - 如果是在微信内置浏览器内，就使用微信 SDK - 如果是在 PhoneGap 包装的 Hybrid App...
你好，Vue.js
第一次知道 [Vue.js](https://github.com/vuejs/vue) 是在一个技术群里。按照我的习惯，凡是我没听说过的东西我都会谷歌一下。当时它还没有发布 1.0 正式版（我的另一习惯是只用稳定版），又发现它跟 AngularJS 差不多，所以只是给了颗 Star，然后就干别的去了。 最近因为开发划词翻译 v6.0 的关系，我准备在里面用到我熟悉的 AngularJS 来写一些交互很多的页面，可是想了一下，唯一需要交互的页面就是设置页，为此我要引入 AngularJS 这个“大胖子”，那“性价比”太低了。 随后我就想到了 Vue.js，现在（2015年11月11日）它已经有 9361 个 Star 了，距离我标星的时候（2015年6月26日）涨了近 4000 颗，同时也发布了 1.0 版。我想，是时候深入了解一下它了。 写这篇博文时我刚看完 [Vue.js Guide](http://vuejs.org/guide/)。看完之后，我的感受就是：**它真的很简单**。想当初学习 AngularJS 的时候我还买了一本书（《AngularJS...
最近在新项目中使用了 [SASS](http://sass-lang.com/)，不得不说，用了它之后，写 css 变得有趣多了，但今天无意中发现了一个小问题：生成的 css 文件中有很多重复的片段。 举例来说： ``` scss @mixin error { color:red; } .small-error { @include error; font-size:14px; } .big-error { @include error; font-size:24px; } ``` 因为这两个类用到了同一个片段，所以我想像中应该生成的 css 文件是这样的：...
在写单元测试的过程中，最痛苦的就是找“监控点”了。 ## 什么是“监控点”？ 举个栗子，现在有如下代码 source.js： ``` js import { methodA , methodB } from 'third-party'; if( yourCondition ) { methodA(); } else { methodB(); } ``` 其中 `third-party.js` 是这个样子的： ```...
看标题就知道，事情还得从[划词翻译](https://github.com/lmk123/crx-selection-translate)说起。 最近我着手准备开发 v6.0 版的划词翻译，这意味着划词翻译将第六次被完全重写。只是这一次我发现，划词翻译实际上可以分解成多个项目： - `chrome.storage` 的使用可以优化一下，于是有了[chrome-storage-wrapper](https://github.com/lmk123/chrome-storage-wrapper) - 用在内容脚本和 popup 页的翻译窗口可以分离出来，于是有了 [selection-widget](https://github.com/lmk123/selection-widget) - 多个翻译接口的整合也可以分离出来，也就是正准备开发的 [translation.js](https://github.com/lmk123/translation.js) 开发 chrome-storage-wrapper 的时候，我就已经用 [Jasmine](http://jasmine.github.io/) 写了一套测试用例；在开发 selection-widget 的时候，我决定全面启用单元测试。初期写测试用例的时候觉得有点痛苦，写用例的时间几乎要赶上开发时间了，但是测试用例写完之后就发现好处了：下一次更改代码的时候，只需运行一次测试就知道哪些地方做了不兼容的更改，这间接的消灭了很多隐藏的 bug。 我觉得，单元测试就好像是一个项目坚强的后盾，我可以放心的修改代码，单元测试会告诉我还需要改其他哪些地方。 就这样，我一下子就爱上了单元测试。selection-widget 是一个前端项目，使用 [Karma](https://github.com/karma-runner/karma) 及它丰富的插件可以很容易的运行测试并生成测试覆盖率，完全不需要动脑筋。 现在我着手准备开发 translation.js，我觉得这个项目可以做成浏览器端和...