打造自己的JavaScript武器库

bVYmF0

 

自己打造一把趁手的武器,高效率完成前端业务代码。

前言

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化url参数转对象浏览器类型判断节流函数等一类函数,这些工具类函数,基本上在每个项目都会用到,为避免不同项目多次复制粘贴的麻烦,我们可以统一封装,发布到npm,以提高开发效率。

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

常用函数汇总

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

1.Array

2.Class

2.1 addClass

2.2 hasClass

2.3 removeClass

3.Cookie

3.1 getCookie

3.2 removeCookie

3.3 setCookie

4.Device

4.1 getExplore

4.2 getOS

5.Dom

5.1 getScrollTop

5.2 offset

5.3 scrollTo

5.4 setScrollTop

6.Keycode

6.1 getKeyName

7.Object

7.1 deepClone

7.2 isEmptyObject

8.Random

8.1 randomColor

8.2 randomNum

9.Regexp

9.1 isEmail

9.2 isIdCard

9.3 isPhoneNum

9.4 isUrl

10.String

10.1 digitUppercase

11.Support

11.1 isSupportWebP

12.Time

12.1 formatPassTime

12.2 formatRemainTime

13.Url

13.1 parseQueryString

13.2 stringfyQueryString

14.Function

14.1 throttle

14.2 debounce

封装

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

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

1.目录结构说明

2.构建脚本

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

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

3.书写测试用例

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

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

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

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

更新:单元测试,已使用karmamochapower-assert,使用Coverage测试覆盖率,并集成 travis-ci 配合Github来做持续化构建,可以参考本项目的travis配置文件 .travis.yml karma的配置文件 karma.conf.js

发布

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

1.添加自己的函数

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

然后记得在src/index.js文件中暴露isNaN函数

2.单元测试

test文件新建测试用例

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

3.测试并打包

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

4.发布到npm

www.npmjs.com 注册账号,修改本地package.json中的nameversionauthor等信息,最后npm publish就大功告成了。
注意:向npm发包,要把镜像源切到 www.npmjs.com ,使用cnpm等第三方镜像源会报错。

使用

1.浏览器

直接下载min目录下的 outils.min.js ,通过标签引入。

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

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

先使用npm安装outils

推荐使用方法

当然,你的开发环境有babel编译ES6语法的话,也可以这样使用:

总结

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

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

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

1 4 收藏 1 评论

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部