跟我学 coolie 之为什么要前端模块化
什么是模块化
模块化是个相对概念,相对于整块、整体而言,模块通常是组成一个整体的最小单位。比如,你眼前的电脑,它在计算机网络世界里,它是个模块个体。而相对于一台电脑而言,电脑内部的 CPU、内存才是最小的模块。
为什么要前端模块化
如果你没有用过模块化,那你是否遇到过以下问题:
- 各个 jquery 插件的顺序一定不能变,否则报错。
- 遇到过
undefined is not a function
,原来是某个脚本没有加载。 - 每次上线手动修改
script
里的脚本版本号、样式里的background
图片版本。 - 上线之前,替换
app.js
为app.min.js
。 - jquery 太大了,怎么把它拆分掉。
写过这样的代码:
<script src="abc.js?v=1.22"></script>
<script src="def.js?v=1.33"></script>
.demo1{
background: url("./abc.png?v=1.1");
}
.demo2{
background: url("./def.png?v=1.2");
}
这些问题和烦恼,都可以通过前端模块化来解决。
前端模块化来的比较晚,如果你用过 nodejs,那么它的模块化是走的比前端要远、要完善一些的,以 express 为例:
如上图,使用 require
语法,就引入了一个模块,非常的方便。
同样的,其他语言都已早早的实现了模块化编程,如 import
、include
等等。
因此,es6 的模块化标准(更多:http://www.infoq.com/cn/news/2013/08/es6-modules)就要来了,JavaScript 也正为此做准备着,因此现在学习模块化正是最佳时机。
如何前端模块化
脚本模块化
在开头说到了,模块化就是将一个整体分割成不可再分割的最小组成单位。以著名的 jquery 为例:
以上只是部分截图,后面还有更多。仅此这张图,就可以充分的说明了,在 jquery 内部,是可以划分成这么多最小模块的。通常模块的划分原则,是最小化的单一功能才组成一个模块。
比如说,上图的 css.js:
如上图,这个模块导出的方法都与 css 相关,包括了扩展原型链的css
、show
、hide
和toggle
四个方法。
如果你想要阅读 jquery 的源码,应该从模块化的脚本里去了解它,而不是合并成一个文件的源码。
CSS 模块化
以上是脚本模块化,对于 css 文件也是如此,这里以 bootstrap 为例,看图:
和 jquery 一样,从文件的命名上就很容易看出,这个文件里主要是什么内容。比如 alert.less
(.less 是 less 语法的文件后缀,less 是一种 css 预编译语言,更多阅读:http://lesscss.org/):
内容很明晰,描述的是警告框的样式。
html 模块化
这里的 html 模块化需要 html 模板引擎来支持。通常,一个站点的 html 文件里都会包含大量的重复内容,这部分重复内容就可以模块化出来,比如网页的 header、footer、dialog 等。
<!doctype html>
<!-- 引入 header 模块 -->
{{include header.html}}
<!-- 引入 dialog 模块 -->
{{include dialog.html}}
<!-- 引入 footer 模块 -->
{{include footer.html}}
结语
此文都是一些理论知识,下面一文开始进入实际操作环节。
- coolie.cli https://www.npmjs.com/package/coolie
- coolie.js https://github.com/cloudcome/coolie
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论