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 语句处执行这个要输出的代码,而不是加载整个代码块。