打造自己的 JavaScript 武器库

作者： SlaneYang

https://segmentfault.com/a/1190000011966867

前言

作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到、、、等一类函数，这些工具类函数，基本上在每个项目都会用到，为避免不同项目多次复制粘贴的麻烦，我们可以统一封装，发布到，以提高开发效率。

这里，笔者已经封装并发布了自己的武器库 outils，如果你对本项目感兴趣，欢迎 star 本项目。当然你也可以在本项目的基础上封装自己的武器库。

常用函数汇总

这里先分类整理下，之前项目中多次用到的工具函数。

1.Array1.1 arrayEqual

2.Class2.1 addClass

2.2 hasClass

2.3 removeClass

3.Cookie3.1 getCookie

3.2 removeCookie

3.3 setCookie

4.Device4.1 getExplore

4.2 getOS

5.Dom5.1 getScrollTop

5.2 offset

5.3 scrollTo

5.4 setScrollTop

6.Keycode6.1 getKeyName

7.Object7.1 deepClone

7.2 isEmptyObject

8.Random8.1 randomColor

8.2 randomNum 

9.Regexp9.1 isEmail

9.2 isIdCard

9.3 isPhoneNum

9.4 isUrl

10.String10.1 digitUppercase

11.Support11.1 isSupportWebP

12.Time12.1 formatPassTime

12.2 formatRemainTime

13.Url13.1 parseQueryString

13.2 stringfyQueryString

14.Function

14.1 throttle

14.2 debounce

封装

除了对上面这些常用函数进行封装， 最重要的是支持合理化的引入，这里我们使用统一打包成通用模块规范，支持、、等模块加载器，亦或直接通过标签引入。

但这样，还是不能让人满意。因为完整引入整个库，略显浪费，我们不可能用到所有的函数。那么，就支持按需引入吧

1.目录结构说明

2.构建脚本

这里主要说明一下项目中 build.js 的构建过程 第一步，构建全量压缩包，先删除目录中之前的，后通过打包并保存新的压缩包至目录中：

第二步，拷贝函数模块至根目录，先删除根目录中之前的函数模块，后拷贝下面一层目录的所有文件至根目录。这么做的目的是，拷贝到根路径，在引入的时候，直接即可，缩短引入的路径，也算是提高点效率。

3.书写测试用例

俗话说，不写测试用例的前端不是一个好程序员。那就不能怂，就是干。

但是因为时间关系，本项目暂时通过项目中的 test.js ，启动了一个静态服务器，来加载网页端的测试页面，让笔者书写项目时，可以在本地对函数功能进行测试。 但是后续将使用配合来做持续化构建，自动发布到。改用，，做单元测试，使用测试覆盖率。这一部分，后续更新。

这里给大家推荐一个好用的断言库 power-assert ，这个库记住一个API就基本无敌，从此再也不用担心记不住断言库的API。

本项目的所有测试用例都在目录下，大家可以作一定参考。

发布

首先放到托管一下，当然你也可以直接fork本项目，然后再加入你自己的函数。 以笔者项目，举个栗子:

1.添加自己的函数

在目录下，新建分类目录或者选择一个分类，在子文件夹中添加函数模块文件（建议一个小功能保存为一个JS文件）。

然后记得在文件中暴露函数

2.单元测试

在文件新建测试用例

然后记得在中引入之前创建的测试用例脚本。

3.测试并打包

执行，看所有的测试用例是否通过。如果没有问题，执行构建，之后提交到个人的 github 仓库即可。

4.发布到使用1.浏览器

注意： 本仓库代码会持续更新，如果你需要不同版本的增量压缩包或源码，请到 github Release 页面下载对应版本号的代码。

2.Webpack、RequireJS、SeaJS等模块加载器

先使用安装。

推荐使用方法

当然，你的开发环境有编译语法的话，也可以这样使用：

总结

这里只是简单封装，发布到上，省去下次复制粘贴的功夫，或者直接Goole的时间。如果笔者的库中，没有你常用的函数，或者你有更好的建议，欢迎来本项目的 Github Issues 交流，如果觉得不错，欢迎 star本项目。

当然，更好的建议是 fork 本项目，或者直接新建自己的项目，添加自己想要的、常用的、记不住的函数，甚至是可以抽象出来的功能，封装成自己顺手、熟悉的库。 这样才能打造出你自己的武器库，瞬间提高你的单兵作战（开发）能力。

工欲善其事必先利其器。有了属于自己的这把利器，希望加班也会变成奢望。O(∩_∩)O哈哈~

觉得本文对你有帮助？请分享给更多人

关注「前端大全」，提升前端技能