超实用JavaScript工具库
导语
Eris 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 180 个模块,包括 Dom 操作,cookie 设置,类创建,模板函数,日期格式化等实用模块,同时配套有打包工具 Eustia 进行定制化,使JS脚本加载量缩减在 10KB 以下,极大优化移动端页面的加载速度。
前言
从 15 年毕业后基本就在从事移动端的开发工具,由于页面本身性质(多为一些具有简单交互的活动页),并不适合引入体积过大的第三方库,于是就开始自行封装常用前端库的迷你版。经过这一年多的时间渐渐积累起了一个规模不小的 JavaScript 工具集,并且成功分离出去应用到其它项目中去,例如去年搞的移动端调试工具Eruda。
工具库:https://github.com/liriliri/eris
打包工具:https://github.com/liriliri/eustia
优势
一、注重实用,涉及面广
Eris 从一开始就不是为了单纯地替代 underscore 或 lodash 而生。它的目标是提供一系列在日常开发中使用率较高的 JavaScript 模块。因此,每一个新加入的模块都是在项目中实际使用到时才被添加进去。当前已经累积 180+ 模块,而且还在不断更新中,可以满足移动端日常开发的绝大部分需求。
你不再需要引入 zepto 了,因为已经有个类 jQuery 的模块了;不再需要引入 cookie 库了,因为已经有 cookie 操作模块了;不再需要 moment 了,因为有个 dateFormat 可以满足大部分格式化需求了;不再需要引入 Promise pollyfill,因为已经有个通过 Promise A+ 测试的 Promise 库了;不再需要引入 EventEmitter 库了,因为已经有了;不再需要引入 ajax 库了,因为有 ajax,而且还有 fetch;不再需要引入 underscore,仅仅是为了使用一个打乱数组的 shuffle 函数;还有那个引用数奇高的 mkdirp 模块,再也不需要再把它装到 node_modules 里去了……
二、使用方便,一步到位
使用配套打包工具扫描代码可以很方便地定制出一份工具库来,并且里面只会包含你使用到的模块。按需引入将使页面加载的 js 代码量最小化。现在项目每个H5页面引入的库大小基本是在 10KB 左右。同样情况下如果你只引入 zepto 不算上其它库的话就已经引入了十几 kb 的 js 文件了。
var uuid = require('./util');
console.log(util.uuid()); // -> 0e3b84af-f911-4a55-b78a-cedf6f0bd815
针对上面的代码,只需执行 eustia build
即可扫描代码生成只包含 uuid 模块及其依赖模块的库。去除同样简单,只要将使用 uuid 的代码删除,重新执行命令即可。
三、与 Npm Micro Package 相比
你也许会说,Npm 上已经有大量的函数模块,为什么不直接用呢?
1. 重复包过多
假如你在 npm 上搜索下 left pad,你会找到数十个结果:left-pad,pad-left,lpad,xxx-leftpad,leftpad-xxx。结果过多并不是一件好事,你很难从中找到自己所需要的。等你找完并安装好时,所花的时间估计都足够自己写一个了。在这方面,Eris 保证同样功能的有且只有一个,就是 lpad。
2. 质量参差不齐
如果你检查过 npm 上依赖最多的一些库及其依赖库的源码,特别是只有几行代码的小库,就会发现里面的代码质量参差不齐。并不是每个包都会有详细的调用说明,并不是每个包都会有完善的单元测试,也并不是每个包都有人在维护。上 GitHub 一看,代码几年没更新了,几个 issue 和 pull requests 也都还挂在那里。你以为你安装了一个只有几行的小模块,但其实它引用了多个小包甚至是调用了一个大包中的一个小功能。有的包会把许多不相关的文件发布上去,造成 node_modules 下面的大量碎片文件。我还曾发现过某个下载量超高的包里面有 IDE 的配置文件 .idea 文件夹……明明需要的函数只有几行代码量却下了几十个文件下来,内心一万只草泥马在奔腾。
3. 并不是所有开发者都值得信任
依赖的模块越多,风险就越高。你依赖了几十个小模块,那就说明你要信任几十个开发者。如果其中有个人不怀好意在新版本中注入恶意代码呢?就像之前著名的 left-pad 事件,一个模块出现问题就可以让大量项目同时完蛋。相反如果我只依赖了一个包含了这几十个小模块的函数库,那我就只需要信任一个开发者。依赖一个 lodash,那我就只要信任 jdalton 一个人不搞坏事即可。相反,依赖几十个小模块,那我就要祈祷这堆大部分不知名的开发者里不要有一个心怀恶意的人了。
4. 使用上比 Npm 方便
安装删除 Npm 模块流程:搜索关键词出现大量包 -> 找一个下载量比较多的 -> npm install xxx
-> 在项目中require这个模块 -> 删除所有 require 这个模块的代码 -> npm uninstall xxx
如果想在前端的项目中使用,还要搞个 webpack 之类的打包工具,写一堆繁杂的配置项。相比上面的一步到位,还是Npm更加麻烦点,更别提国内连接 Npm 那稀烂的网速了。
四、文档详细,测试覆盖率高
每个模块的代码都包含在一个同名文件中。代码顶部包含该模块的详细文档说明,包括代码调用示例,以 Markdown 格式编写。同时,每个模块文件都有对应的以 test.js 为结尾的单元测试。Eris 使用 eslint 保证代码规范,mocha 和 karma 跑 node 端和浏览器端的自动化测试,travis-ci 进行持续集成,并且使用istanbul检验测试覆盖率。
总结
假如你正在写移动端页面,或者正在写某个库需要用到一些工具函数,又不想引入 undersore 或一堆包,那么试试 Eris 吧,也许你会觉得还蛮好用的:)
最后,欢迎来 https://github.com/liriliri/eris 提 issue 和 pull requests。