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