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

发布于 2021-11-19 12:53:13 字数 3376 浏览 1134 评论 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 为例:

img.png

如上图,使用 require 语法,就引入了一个模块,非常的方便。

同样的,其他语言都已早早的实现了模块化编程,如 importinclude 等等。

因此,es6 的模块化标准(更多:http://www.infoq.com/cn/news/2013/08/es6-modules)就要来了,JavaScript 也正为此做准备着,因此现在学习模块化正是最佳时机。

如何前端模块化

脚本模块化

在开头说到了,模块化就是将一个整体分割成不可再分割的最小组成单位。以著名的 jquery 为例:

img.png

以上只是部分截图,后面还有更多。仅此这张图,就可以充分的说明了,在 jquery 内部,是可以划分成这么多最小模块的。通常模块的划分原则,是最小化的单一功能才组成一个模块。

比如说,上图的 css.js:

img.png

如上图,这个模块导出的方法都与 css 相关,包括了扩展原型链的cssshowhidetoggle四个方法。

如果你想要阅读 jquery 的源码,应该从模块化的脚本里去了解它,而不是合并成一个文件的源码。

CSS 模块化

以上是脚本模块化,对于 css 文件也是如此,这里以 bootstrap 为例,看图:

img.png

和 jquery 一样,从文件的命名上就很容易看出,这个文件里主要是什么内容。比如 alert.less(.less 是 less 语法的文件后缀,less 是一种 css 预编译语言,更多阅读:http://lesscss.org/):

img.png

内容很明晰,描述的是警告框的样式。

html 模块化

这里的 html 模块化需要 html 模板引擎来支持。通常,一个站点的 html 文件里都会包含大量的重复内容,这部分重复内容就可以模块化出来,比如网页的 header、footer、dialog 等。

<!doctype html>
<!-- 引入 header 模块 -->
{{include header.html}}

<!-- 引入 dialog 模块 -->
{{include dialog.html}}

<!-- 引入 footer 模块 -->
{{include footer.html}}

结语

此文都是一些理论知识,下面一文开始进入实际操作环节。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

水水月牙

暂无简介

0 文章
0 评论
654 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文