跟我学 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 的模块化标准就要来了，JavaScript 也正为此做准备着，因此现在学习模块化正是最佳时机。
如何前端模块化
脚本模块化
在开头说到了，模块化就是将一个整体分割成不可再分割的最小组成单位。以著名的 jquery 为例：
以上只是部分截图，后面还有更多。仅此这张图，就可以充分的说明了，在 jquery 内部，是可以划分成这么多最小模块的。通常模块的划分原则，是最小化的单一功能才组成一个模块。
比如说，上图的 css.js：
如上图，这个模块导出的方法都与 css 相关，包括了扩展原型链的css、show、hide和toggle四个方法。
如果你想要阅读 jquery 的源码，应该从模块化的脚本里去了解它，而不是合并成一个文件的源码。
CSS 模块化
以上是脚本模块化，对于 css 文件也是如此，这里以 bootstrap 为例，看图：
和 jquery 一样，从文件的命名上就很容易看出，这个文件里主要是什么内容。比如 alert.less（.less 是 less 语法的文件后缀，less 是一种 css 预编译语言，更多阅读：lesscss 组织网/）：
内容很明晰，描述的是警告框的样式。
html 模块化
这里的 html 模块化需要 html 模板引擎来支持。通常，一个站点的 html 文件里都会包含大量的重复内容，这部分重复内容就可以模块化出来，比如网页的 header、footer、dialog 等。
<!doctype html>
<!-- 引入 header 模块 -->
{{include header.html}}
<!-- 引入 dialog 模块 -->
{{include dialog.html}}
<!-- 引入 footer 模块 -->
{{include footer.html}}
结语
此文都是一些理论知识，下面一文开始进入实际操作环节。
湘公网安备 43102202000103号