1.什么是模块化?
模块化是一个JS文件,它实现了一部分功能,并且隐藏自己的内部实现,同时提供一些接口供其它模块使用,模块主要有两个核心要素隐藏和暴露,隐藏主要是将自己的内部功能进行隐藏,暴露体现在对外抛出一些接口。也可以提高代码复用率,方便进行代码的管理。
2.CommonJS模块化
1.实践者:Node.js
2.CommonJs工作原理
当使用require(模块路径)导入一个模块时,node会做以下操作:
2.1 通过模块路径找到本机文件,并且读取文件内容。
2.2 将文件中的代码放入到一个函数环境中执行,并将执行后的module.exports的值作为require函数的返回结果。
3.CommonJS规范
3.1 如果一个JS文件中存在exports或require,该JS文件是一个模块。
3.2 模块内的所有代码均为隐藏代码,包括全局变量、全局函数,这些全局内容均不应该对全局变量造成任何污染。
3.3 如果一个模块需要暴露一些API提供给外部使用,需要通过exports导出,exports是一个空的对象,可以为该对象添加任何需要导出的内容。
3.4 如果一个模块需要导入其他模块,通过require实现,require是一个函数,传入模块的路径即可返回该模块导出的整个内容。
示例代码:
// 定义模块math.js
var basicNum = 0;
function add(a, b) {
return a + b;
}
module.exports = { //在这里写上需要向外暴露的函数、变量
add: add,
basicNum: basicNum
}
// 引用自定义的模块时,参数包含路径,可省略.js
var math = require('./math');
math.add(2, 5);
2.AMD模块化
1.实践者:require.js
2.AMD工作原理
AMD是采用异步方式加载模块机制,模块的加载不影响它后面语句的运行,因此依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
示例代码(格式):
define([依赖的模块列表], function(模块名称列表){
//模块内部的代码
return 导出的内容
3.CMD模块化
1.实践者:sea.js
2.CMD工作原理
CMD是公共模块定义规范,在申明依赖的模块时会在第一之间加载并执行模块内的代码,机制是依赖就近、延迟执行。
示例代码(格式):
define(function(require, exports, module){
//模块内部的代码
var 模块名称列表 = require(依赖的模块列表);
//使用会报错,async方法在cmd中才实现
require.async("./b.js",function(b){
console.log(b)
})
4.ES6模块化
1.ES6模块化特点
1.1 依赖预声明机制。优点:在一开始可以确定模块依赖关系,缺点:有些时候效率较低。
1.2 导入导出的方式非常灵活并且多样。
1.3 路径必须要规范,表示方法:所有路径必须以./或…/开头。
2. ES6模块基本导入导出
2.1 基本导出语法:
export 声明表达式
export {具名符号}
2.2 基本导入语法:
import {导入的符号列表} from "模块路径"
3. ES6模块默认导入导出
3.1 默认导出语法:
export default 默认导出的数据
export {默认导出的数据 as default}
3.2 默认导入语法:
import 接收变量名 from "模块路径"
4. ES6模块注意的细节
4.1 导入时,可以通过关键字as
对导入的符号进行重命名。
4.2 导入时使用的符号是常量,不可修改。
4.3 可以使用*号导入所有的基本导出,必须要重命名。形成一个对象。
4.4 导出一个内容时,尽量保证该内容是不可变的,在导入的模块内部如果发生了更改,将导致一些无法预料的事发生。
4.5 如果只想执行模块中的一些代码,而不需要导入它的任何内容,这时候可以使用无绑定的方法的导入。