跟我学 coolie 之为什么要前端模块化

发布于 2021-11-19 12:53:13 字数 3376 浏览 1142 评论 0

什么是模块化

模块化是个相对概念，相对于整块、整体而言，模块通常是组成一个整体的最小单位。比如，你眼前的电脑，它在计算机网络世界里，它是个模块个体。而相对于一台电脑而言，电脑内部的 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}}