模块化发展历程

1.IIFE：使用自执行函数来编写模块化，特点：在一个单独的函数作用域中执行代码，避免变量冲突。

(function(){
        return {
            data:[]
        }
    })()

 

2. AMD： 使用requireJS来编写模块化，特点：依赖必须提前声明好。

define('./index.js',function(code){
        // wxxxcode-style 就是index.js返回的内容
    })

3.CMD：使用seaJS来编写模块化，特点：支持动态引入依赖文件。

define(function(require,exports,module){
        var indexCode = require('./index.js')
    })

 

4.CommonJS : nodejs 中自带的模块化 特点：require  、module.exports 、 exports

var fs = require('fs')

CommonJS 一般用在服务端或者Node用来同步加载模块，它对于模块的依赖发生在代码运行阶段，不合适在浏览器端做异步加载。

exports 实际上是对module.exports 的引用：

exports.add = function add() { }
    //等同于
module.exports.add = function add() { }

但注意，不能给exports赋值，否则会断开与module.exports的连接。

 

5：UMD ： 兼容AMD，CommonJS模块化语法。

 

6.webpack(require.ensure): webpack 2.x 版本中的代码分割

 

7.ES Modules : ES6 引入的模块化，支持import 来引入另一个js  特点 : import 、export

import a from 'a'

ES6模块化不是对象，import会在JavaScript引擎静态分析，在编译时就引入模块化代码，而并非在代码运行时加载，因此也不适合异步加载。

在HTML中如果要引入模块需要使用

<script type='module' src="./module.js"></script>

 

ESModule的优势

        编译化优势：在 CommonJS 等动态模块系统中，无论采用哪种方式，本质上导入的都是一个对象，而ES6 Module 支持直接导入变量，减少了引用层级，程序效率更高。

 

CommonJS 和 ES6 Module 的差异

　　1.CommonJS模块引用是一个值的拷贝，而ES Module 引用后是一个值的动态映射 ，并且这个映射是只读的。

          CommonJS 模块输出的是值的拷贝，一旦输出之后，无论模块内部怎么变化，都无法影响之前的引用。

　　   ES Module 是引擎会在遇到 import 后生成一个引用链接，在脚本真正执行时才会根据这个引用链接去模块里面取值，模块内部的原始值变了 import 加载的模块也会变。

       2.CommonJS运行时加载，ES Module编译阶段引用

          CommonJS 在引入时加载整个模块，生成一个对象然后再从这个生成的对象上读取方法和属性。

          ES Module 不是对象，而是通过 exports 暴露出要输出的代码块，在 import 时使用静态命令的方法引用指定的输出代码块，并在 import 语句处执行这个要输出的代码，而不是加载整个代码块。