模块化

JavaScript 模块化开发免费看

什么是模块化、模块化的好处、CommonJs规范是什么、模块化开发的使用

06-22侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 16     0     122

在早期的 JavaScript 编程时,我们一般是直接使用 <script> 标签将需要用到的 js 文件引入到 HTML 页面中,例如像下面这样:

<script src="vue.js"></script>
<script src="jqery.js"></script>
<script src="iScroll.js"></script>
<script src="handlebar.js"></script>

但是这样引入 js 文件会有几个弊端,首先因为各个 js 文件的变量都是挂载到 windows 对象上,所以这个做可能会造成全局变量污染。

并且不同的 js 文件中可能会出现变量重名的情况,而根据代码的执行顺序,后面引入的文件中的变量可能会覆盖前面文件中变量,这会造成程序运行错误。

除此之外,还有文件的引入顺序问题,多个文件之间可能存在依赖关系,这就需要保证文件的加载顺序,否则如果有一个文件没有加载完成,而另一个文件依赖这个文件,这可能造成接下来的文件会出现错误。

总之,随着项目越来越大,依赖越来越多,就会容易出现各种问题,可能会造成逻辑混乱呀,可维护性变差呀等等。而为了解决这些问题,就有人提出了 JavaScript 模块化开发。

什么是模块化

什么是模块化? 模块化就是将一组模块及其依赖项以正确的顺序拼接到一个文件或一组文件中的过程。

简单来说,就是将 js 文件按照功能分离,分成不同的模块,每一个js 文件看作是一个模块。然后在使用的时候根据需要通过固定的方式引入,并且通过固定的方式向外暴露指定的内容。

为什么要有模块呢,因为有了模块,我们就可以很方便地使用别人的代码,不需要重复写很多一样的功能,想要使用什么功能,就加载什么模块即可。

模块化的好处

那么使用模块化有什么好处呢?使用模块化我们可以:

  • 解决项目中的全局变量污染的问题。
  • 有利于多人协同开发,提高了开发效率和协作。
  • 模块职责单一,方便代码复用和维护 。
  • 解决文件依赖问题,无需关注引用文件的顺序。

CommonJS规范是什么

在 ES6 之前,JavaScript 没有模块系统、标准库较少、缺乏包管理工具不能到处运行。CommonJS 规范的提出,主要是为了弥补 JavaScript 没有标准的缺陷,以使得 JavaScript 能够达到像 Python 和 Java 那样的开发大型应用的基础能力,而不是停留在开发浏览器端小脚本程序的阶段。

CommonJS 模块规范主要分为三部分:模块引用、模块定义、模块标识。

  • 模块引用,我们可以使用 require 函数来实现模块的引用,例如:
var a = require('a');

上面代码中,我们通过 require 函数引入模块 a,然后将其赋值给了变量 a,这个变量 a 就是我们自定义的变量名,它也可以和模块名不一致,例如你可以将它定义为bc 等都行。

如果你要引入的模块和当前模块不在同意目录下,你还需要在引入的模块前面加上路径,例如:

var t = require('./test.js');
  • 模块定义
module对象:在每一个模块中,module对象代表该模块自身。
export属性:module对象的一个属性,它向外提供接口。

假设现在有两个 js 文件,这两个文件此时是无法使用对方的代码的,如果想要让一个模块中的函数能被另一个模块使用,就需要通过 export 属性暴露一个对外的接口,例如:

exports.test=function (a, b){
    console.log(a + b);
}
  • 模块标识,模块标识指的是传递给 require 函数的参数,必须是符合小驼峰命名的字符串,或者以....、开头的相对路径,或者绝对路径。

CommonJS 模块的特点如下:

  • 所有代码都运行在模块作用域,不会污染全局作用域。
  • 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。要想让模块再次运行,必须清除缓存。
  • 模块加载的顺序,按照其在代码中出现的顺序。

模块化开发的使用

例如现在有一个 add.js 文件,文件内容如下所示:

function add(a, b){
   return a+b;
}

还有一个show.js 文件,内容如下所示:

function show(){
    console.log(add(3, 5));
}
show();  // ReferenceError: add is not defined

当我们执行这段代码时,会报错,因为 show.js 中并没有 add 函数 。

那我们必须在 show.js 文件中使用这个 add() 函数,我们要怎么做呢?有人会想到,那我在 show.js 再定义一个 add() 函数不就得了,但是这样不仅麻烦,如果多个文件中都要使用这个函数,会导致代码重复使用多次。

学习 CommonJs 模块规范之后,我们就知道可以在 add.js 中,使用 module.exports 导出 add() 函数:

module.exports = function add(a, b){
   return a+b;
}

然后在show.js中引入这个这个模块:

var add = require('./add');

function show(){
    console.log(add(3, 5));
}
show();  // 8

这样我们再次执行代码,控制台就会成功显示执行结果。

CommonJS 就是一个模块加载器,可以方便地对 JavaScript 代码进行模块化管理。但是它有一个缺点,它没有完全为浏览器环境考虑,浏览器环境的特点是所有的资源不考虑本地缓存的因素,都需要从服务器端加载,加载的速度取决于网络速度。而 CommonJS 的模块加载过程是同步阻塞的,也就是说如果模块体积很大,网速又不好的时候,整个程序便会停止,等待模块加载完成,这就会影响用户体验。而为了解决这个问题,就诞生了 AMD 规范。

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

16

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?