超实用 JavaScript 工具库

2,541 阅读6分钟
原文链接: zhuanlan.zhihu.com
Eris是一套在开发中实践积累起来的实用JavaScript工具库。该库目前拥有超过180个模块,包括Dom操作,cookie设置,类创建,模板函数,日期格式化等实用模块,同时配套有打包工具Eustia进行定制化,使JS脚本加载量缩减在10KB以下,极大优化移动端页面的加载速度。

前言

从15年毕业后基本就在从事移动端的开发工具,由于页面本身性质(多为一些具有简单交互的活动页),并不适合引入体积过大的第三方库,于是就开始自行封装常用前端库的迷你版。经过这一年多的时间渐渐积累起了一个规模不小的JavaScript工具集,并且成功分离出去应用到其它项目中去,例如去年搞的移动端调试工具Eruda

工具库:GitHub - liriliri/eris: Eustia modules
打包工具:liriliri/eustia: Tool for generating utility libraries

优势

一、注重实用,涉及面广

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吧,也许你会觉得还蛮好用的:)

最后,欢迎来 GitHub - liriliri/eris: Eustia modules 提issue和pull requests。


本文对你有帮助?欢迎扫码加入前端学习小组微信群: