[JavaScript知识库]ES6之模块化发展历程

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 如果只想执行模块中的一些代码，而不需要导入它的任何内容，这时候可以使用无绑定的方法的导入。