JavaScript武器库,呕心沥血一周整理

原创 前端-DK 随笔 前端 140阅读 20 天前 举报

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

常用函数汇总

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

1.Array

1.1 arrayEqual

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

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 通用模块规范,支持webpack、RequireJS、SeaJS等模块加载器,亦或直接通过<script>标签引入。

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

1.目录结构说明

2.构建脚本

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

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

这里推荐一下我的学习交流群:731771211,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,希望能帮助你更了解前端,学习前端

点击:加入

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复