随着学习的深入,代码数量的增多我们所编写的程序复杂度越来越高。此时如果我们依然将所有的代码编写到同一个文件中,代码将变得非常难以维护。模块化是解决这种问题的关键。
什么是模块?
模块简单理解其实就是一个代码片段,本来写在一起的JS代码,我们按照不同的功能将它拆分为一个一个小的代码片段,这个代码片段就是一个模块。简单来说,就是化整为零。
模块化的好处
模块化后不再是所有代码写在一起,而是按功能做了不同的区分,当我们维护代码时可以比较快捷的找到那些要修改的代码。再者,模块化后,代码被拆分后更容易被复用,同样一个模块可以在不同的项目中使用,大大的降低了我们的开发成本。jQuery便可以理解为是一种模块。
但是jQuery这种模块化的方式存在有许多的不足。jQuery是通过script标签引入的形式来完成模块化的,引入后实际效果是向全局作用域中添加了一个变量$(或jQuery),这样很容易出现模块间互相覆盖的情况。并且当我们使用了较多的模块时,有一些模块是相互依赖的,必须先引入某个组件再引入某个组件,模块才能够正常工作。 比如jQuery和jQueryUI,就必须先引入jQuery,如果引入顺序出错将导致jQueryUI无法使用。这还仅仅是两个组件,而实际开发中的依赖关系往往更加复杂,像是a依赖b,b依赖c,c依赖d这种关系,必须按照d、c、b、a的顺序进行引入,有一个顺序错误就会导致其他的一起失效。所以通过script标签实现的模块化是非常的不靠谱的。
CommonJS
一直到2015年,JavaScript中一直都没有一个内置的模块化系统。但是随着JavaScript项目越来越复杂,模块化的需求早已迫在眉睫。于是大神门开始着手自定义一个模块化系统,CommonJS便是其中的佼佼者。同时它也是Node.js中默认使用的模块化标准。
模块就是一个js文件,在模块内部任何变量或其他对象都是私有的,不会暴露给外部模块。在CommonJS模块化规范中,在模块内部定义了一个module
对象,module对象内部存储了当前模块的基本信息,这些信息默认是不能被外部看到的,不过module对象中有一个属性名为exports
,exports用来指定需要向外部暴露的内容。只需要将需要暴露的内容设置为exports或exports的属性,其他模块即可通过require
来获取这些暴露的内容。
let a = 10 //外部无法访问
let b = 20 //外部无法访问
console.log('我是m1');
/*
当我们在其他模块中引入当前模块时,require函数的返回值就是exports
*/
console.log(exports === module.exports)//输出true
exports.a = 'cloud'//外部可以访问
exports.c = function() {
console.log('ccc')
}//外部可以访问
这样一个一个导出比较麻烦,我们可以直接使用module.exports
导出一个模块
module.exports = {
a: '哈哈哈',
b: [1, 2, 3, 4],
c: () => {
console.log('eee')
}
}
默认情况下,Node.js会将以下内容视为CommonJS模块:
- 使用.cjs为扩展名的文件
- 当前的package.json的type属性为commonjs时,扩展名为.js的文件
- 当前的package.json不包含type属性时,扩展名为.js的文件
- 文件的扩展名是mjs、cjs、json、node、js以外的值时(type不是module时)
require()是同步加载模块的方法,所以无法用来加载ES6的模块。当我们需要在CommonJS中加载ES模块时,需要通过import()方法来加载。
import("./m2.mjs").then(m2 => {
console.log(m2)
})
文件作为模块
当我们加载一个自定义的文件模块时,模块的路径必须以/
、./
或../
开头。如果不以这些开头,node会认为你要加载的是核心模块或node_modules中的模块。
当我们要加载的模块是一个文件模块时,CommonJS规范会先去寻找该文件,比如:require("./m1")时,会首先寻找名为m1的文件。如果这个文件没有找到,它会自动为文件添加扩展名然后再查询。扩展名的顺序为:js、json和node。还是上边的例子,如果没有找到m1,则会按照顺序搜索m1.js、m1.json、m1.node哪个先找到则返回哪个,如果都没有找到则报错。
文件夹作为模块
当我们使用一个文件夹作为模块时,文件夹中必须有一个模块的主文件,一般是index.js。如果文件夹中含有package.json文件且文件中设置main属性,则main属性指定的文件会成为主文件,导入模块时就是导入该文件。如果没有package.json,则node会按照index.js、index.node的顺序寻找主文件。
node_modules
如果我们加载的模块没有以/
、./
或../
开头,且要加载的模块不是核心模块,node会自动去node_modules目录下去加载模块。node会先去当前目录下的node_modules下去寻找模块,找到则使用,没找到则继续去上一层目录中寻找,以此类推,知道找到根目录下的node_modules为止。
比如,当前项目的目录为:'C:\Users\lilichao\Desktop\Node-Course\myProject\node_modules',则模块查找顺序依次为:
C:\Users\lilichao\Desktop\Node-Course\node_modules
C:\Users\lilichao\Desktop\node_modules
C:\Users\lilichao\node_modules
C:\Users\node_modules
C:\node_modules
模块的包装
每一个CommandJS模块在执行时,外层都会被套上一个函数
(function(exports, require, module, __filename, __dirname){
//模块代码会被放在这里
})
所以我们之所以能在CommonJS模块中使用exports、require并不是因为它们是全局变量。它们实际上以参数的形式传递进模块的。
-
exports,用来设置模块向外部暴露的内容
-
require,用来引入模块的方法
-
module,当前模块的引用
-
__filename,模块的路径
-
__dirname,模块所在目录的路径