不引入依赖库，细粒度管理js代码

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 81 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍了一种在不增加新代码和HTTP请求的前提下，对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。

转载于:https://www.cnblogs.com/zhangshenjia/archive/2012/05/18/2507634.html