JS模块化——CommonJS AMD CMD UMD ES6 Module 比较

1、CommonJS

是服务器模块的规范,Node.js采用了这个规范。

根据 CommonJS 规范,一个单独的文件就是一个模块,每一个模块都是一个单独的作用域,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。

CommonJS规范加载模块是同步的,也就是说,只有加载完成,才能执行后面的操作。

2、AMD

AMD = Asynchronous Module Definition,即 异步模块定义。

AMD 规范加载模块是异步的,并允许函数回调,不必等到所有模块都加载完成,后续操作可以正常执行。

AMD 中,使用 require 获取依赖模块,使用 exports 导出 API。

3、CMD

CMD = Common Module Definition,即 通用模块定义。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

CMD规范和AMD类似,都主要运行于浏览器端,写法上看起来也很类似。主要是区别在于 模块初始化时机

区别:

  1. AMD中只要模块作为依赖时,就会加载并初始化
  2. CMD中,模块作为依赖且被引用时才会初始化,否则只会加载。
  3. CMD 推崇依赖就近,AMD 推崇依赖前置。
  4. AMD 的 API 默认是一个当多个用,CMD 严格的区分推崇职责单一。
  5. 例如,AMD 里 require 分全局的和局部的。CMD里面没有全局的 require,提供 seajs.use() 来实现模块系统的加载启动。CMD 里每个 API 都简单纯粹。

4、UMD

UMD = Universal Module Definition,即通用模块定义。

  1. UMD 是AMD 和 CommonJS的糅合。 AMD 模块以浏览器第一的原则发展,异步加载模块。
  2. CommonJS 模块以服务器第一原则发展,选择同步加载。它的模块无需包装(unwrapped modules)。 这迫使人们又想出另一个更通用的模式 UMD(Universal Module Definition),实现跨平台的解决方案。
  3. UMD 先判断是否支持 Node.js 的模块(exports)是否存在,存在则使用 Node.js 模块模式。再判断是否支持 AMD(define 是否存在),存在则使用 AMD 方式加载模块。

5、ES6模块

        ES6模块和CommonJS区别:  

  1. ES6 模块输出的是值的引用,输出接口动态绑定,而 CommonJS 输出的是值的拷贝。
  2. CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。

CommonJS 输出值的拷贝

CommonJS 模块输出的是值的拷贝(类比于基本类型和引用类型的赋值操作)。

对于基本类型,一旦输出,模块内部的变化影响不到这个值。对于引用类型,效果同引用类型的赋值操作。

ES6 输出值的引用

  1. ES6 模块是动态关联模块中的值,输出的是值得引用。原始值变了,import 加载的值也会跟着变。
  2. ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析时,遇到模块加载命令 import,就会生成一个只读引用。 等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。
  3. ES6 模块中,原始值变了,import 加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值

上述内容选自:JS模块化——CommonJS AMD CMD UMD ES6 Module 比较 - 掘金

改文章只是方便自己简单的记录一下,以免后面丢失,详细的请点击上面链接查看

你可能感兴趣的:(JS,js,es6,umd,CommonJS,AMD)