还在 jQuery ?coolie 模块开发、模块构建帮你脱离苦海 - 文章教程

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

发布于 2021-11-25 字数 9972 浏览 843 评论 0

你还在写这样的代码?

<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>

开发环境:

img.png

生产环境:

img.png

场景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 版本,构建工具自动化处理

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

水水月牙

这个人比较懒,什么都没有填写!

2 文章
0 评论
535 人气
更多

推荐作者

qianbiandeboy

文章 0 评论 0

少女净妖师

文章 2 评论 0

zangqw

文章 0 评论 0

qq_7HKsl

文章 0 评论 0

伪装你

文章 1 评论 0