CMD 、AMD 、es6 模块化

CMD 、AMD 、es6 模块化

1. 产生的背景：

变量的收纳减少全局的污染和不同功能模块的可维护性。

大程序拆分成互相依赖的小文件，再用简单的方法拼装起来

CMD  

（注意：）

模块依赖建立在代码运行阶段，（动态）。 es6 的Module 的“静态”，依赖关系建立于代码编译阶段。

因此，es6 的Module 具有以下优势

1，死代码检测和排除。2，模块变量的检测。3，编译优化。   

4.es6 的Module 是动态映射，这个映射是只读的。不可更改的是指针（内存地址）。push还是可以push的，但是push 的结果会共享

 

同步加载，脱胎于nodejs 参照参照CommonJS规范实现，此规范广泛使用于后台。耗费的仅是读取时间

 举个例子： var math = require('math'); math.add(2,3); // 5

在第一行require('math')之后运行，因此必须等math.js加载完成。

一个文件多次的 require('../js') 只会执行一次。其余的直接返回执行后的结果。

这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

 

1. AMD  Asynchronous Module Definition

所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

AMD比较适合浏览器环境。例如（require.js）
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){

 

// some code here

 

});

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

 

具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中。

 

假定现在有一个math.js文件，它定义了一个math模块。那么，math.js就要这样写：

 

// math.js

define(function (){

var add = function (x,y){

return x+y;

};

return {

add: add
};

});

加载方法如下：

// main.js

 

require(['math'], function (math){

 

alert(math.add(1,1));

 

});

Es6 Module 的语法

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。

ES6 模块输出的是值的引用，输出接口动态绑定，而 CommonJS 输出的是值的拷贝

关于第二点，ES6 模块编译时执行会导致有以下两个特点：

 

import 命令会被 JavaScript 引擎静态分析，优先于模块内的其他内容执行。

export 命令会有变量声明提前的效果。

import 优先执行:

 

从第一条来看，在文件中的任何位置引入 import 模块都会被提前到文件顶部。