还在 jQuery ？coolie 模块开发、模块构建帮你脱离苦海

Question

你还在写这样的代码？

<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<script src="/static/js/libs/jquery-plugin-4.js?v=abc"></script>
<script src="/static/js/libs/jquery-plugin-5.js?v=def"></script>
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page1.js?v=xyz"></script>

场景1

• 老板：告急！！jquery-plugin-4 内容发生变化了，修复了重大 BUG，必须上线，并且保证用户访问到的脚本是最新的！！。
• 前端：赶紧搞起来，全文搜索，突突突，替换版本号！！
• 后端：协助你发布。

<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<!-- jquery-plugin-4 版本号发生了变化 -->
<script src="/static/js/libs/jquery-plugin-4.js?v=abc123456789"></script>
<script src="/static/js/libs/jquery-plugin-5.js?v=def"></script>
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page1.js?v=xyz"></script>

场景2

• 老板：嗯，不错，这次表现不错。不过这个页面不需要 jquery-plugin-5.js，把他删掉吧。
• 前端：好的。突突突，全文搜索，把某个页面的脚本删掉。
• 后端：再次协助你发布。

# 页面1
<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<script src="/static/js/libs/jquery-plugin-4.js?v=abc123456789"></script>
<script src="/static/js/libs/jquery-plugin-5.js?v=def"></script>
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page1.js?v=xyz"></script>


# 页面2
<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<script src="/static/js/libs/jquery-plugin-4.js?v=abc123456789"></script>
<!-- jquery-plugin-5 被删除了 -->
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page1.js?v=xyz"></script>

场景3

• 老板：不好！！header.js 里用到了这个插件！！赶紧加上去
• 前端：好的（心里默念，去年买了个表）。
• 后端：又是协助你发布。

# 页面1
<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<script src="/static/js/libs/jquery-plugin-4.js?v=abc123456789"></script>
<script src="/static/js/libs/jquery-plugin-5.js?v=def"></script>
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page1.js?v=xyz"></script>


# 页面2
<script src="/static/js/libs/jquery.1.10.min.js"></script>
<script src="/static/js/app/global.js?v=cwx"></script>
<script src="/static/js/libs/jquery-plugin-1.js?v=123"></script>
<script src="/static/js/libs/jquery-plugin-2.js?v=456"></script>
<script src="/static/js/libs/jquery-plugin-3.js?v=789"></script>
<script src="/static/js/libs/jquery-plugin-4.js?v=abc123456789"></script>
<!-- jquery-plugin-5 又被加回来了 -->
<script src="/static/js/libs/jquery-plugin-5.js?v=def"></script>
<script src="/static/js/libs/jquery-plugin-6.js?v=ghi"></script>
<script src="/static/js/libs/jquery-plugin-7.js?v=jkl"></script>
<script src="/static/js/libs/jquery-plugin-8.js?v=mno"></script>
<script src="/static/js/app/header.js?v=pqr"></script>
<script src="/static/js/app/footer.js?v=stu"></script>
<script src="/static/js/app/page2.js?v=xyz"></script>

场景4

• 老板：你看，首页是不是不需要 jQuery 这个大件啊，能不能省掉，用户反应太慢了。
• 前端：好的（心里默念，去年买了个登山包）。
• 后端：还要发布不？
• 前端：等等，我再搞搞。

接下来的几天，你一直在搜索如何将 jQuery 拆分掉，最后你看到了 jQuery 模块化。满脸泪水、一脸憔悴的你，感叹到，卧槽，这就是我想要的啊。

define([
	"./core",
	"./selector",
	"./traversing",
	"./callbacks",
	"./deferred",
	"./core/ready",
	"./data",
	"./queue",
	"./queue/delay",
	"./attributes",
	"./event",
	"./event/alias",
	"./manipulation",
	"./manipulation/_evalUrl",
	"./wrap",
	"./css",
	"./css/hiddenVisibleSelectors",
	"./serialize",
	"./ajax",
	"./ajax/xhr",
	"./ajax/script",
	"./ajax/jsonp",
	"./ajax/load",
	"./event/ajax",
	"./effects",
	"./effects/animatedSelector",
	"./offset",
	"./dimensions",
	"./deprecated",
	"./exports/amd"
], function( jQuery ) {

return (window.jQuery = window.$ = jQuery);

});

你需要这样写代码

# 页面1
<script src="/static/js/coolie.min.js" 
	data-config="./coolie-config.js" 
	data-main="./app/page1.js"></script>

# 页面2
<script src="/static/js/coolie.min.js" 
	data-config="./coolie-config.js" 
	data-main="./app/page2.js"></script>

开发环境：

生产环境：

场景1

• 老板：告急！！jquery-plugin-4 内容发生变化了，修复了重大 BUG，必须上线，并且保证用户访问到的脚本是最新的！！。
• 前端：好的。执行 coolie build，发布，上线！
• 后端：没我事？？？？

场景2

• 老板：嗯，不错，这次表现不错。不过这个页面不需要 jquery-plugin-5.js，把他删掉吧。
• 前端：好的。执行 coolie build，发布，上线！
• 后端：再次没我事？？？？

场景3

• 老板：不好！！header.js 里用到了这个插件！！赶紧加上去
• 前端：好的。执行 coolie build，发布，上线！
• 后端：还是没我事？

场景4

• 老板：你看，首页是不是不需要 jQuery 这个大件啊，能不能省掉，用户反应太慢了。
• 前端：好的。jQuery 模块拆分。执行 coolie build，发布，上线！
• 后端：牛逼！
• 老板：前端，给你加薪！！太给力了。

coolie 能为你做什么

• 模块管理：尽量颗粒化你的脚本，而不是所有的脚本都堆在一个文件里，也不会出现模块引用混乱
• 异步加载：不必将所有 JS 链接都堆在页面上
• 版本管理：不必手动修改你的 JS 版本，构建工具自动化处理