不引入依赖库,细粒度管理js代码
在一个项目刚起步时,往往除了jquery之类的库外,只有一个js文件。
然而随着功能的不断增加,js代码也会不断膨胀,当多到一定程度后(500行以上),维护难度就会大大增加。组织逻辑混乱,debug时很难迅速定位到想修改的地方,写新function时也很难抉择插入的位置。整天在一个长长的js文件里滚来滚去,想想都让人头疼。
一个可选的方案是使用依赖库,诸如requireJS、SeaJS、In.js等等。但需要引入更多的代码,要抽出精力来维护依赖关系,还会增加额外的http请求。
在大多数情况下,js代码不会膨胀到必需引入依赖库的地步。有没有办法可以在不增加新代码和http请求的前提下,对js代码进行细粒度的维护呢?
在目前的项目中,除去jquery等类库后的js代码约有120kb(压缩后58kb),我们使用这样的方案:
1、按模块或者按性质将js拆分成多个文件,比如将和用户相关的部分抽取出来成为user.js、共用的方法抽取出来成为helpers.js等。
2、编写sh脚本(linux)或bat脚本(windows)合并所有js为all.js,并调用yuicompressor进行压缩生成all-min.js。
//windows下的bat脚本 del all.js all-min.js type source\*.js > all.js java -jar yc.jar --preserve-semi -o all-min.js all.js
3、在开发环境使用all.js(方便deug),生产环境使用all-min.js。