CMD、AMD、commonJS
2016-08-07 本文已影响28人
INTERNALENVY
1.为什么要使用模块化?
以为随着代码量的增大,会造成命名冲突、文件依赖和加载顺序等问题,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块。
模块化可以带来很多好处:
- 模块的版本管理
- 提高可维护性
- 前端性能优化
- 跨环境共享模块
2.CMD、AMD、CommonJS 规范分别指什么?有哪些应用
-
commonJS:CommonJS是服务器端模块的规范,Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。在CommonJS中,有一个全局性方法require(),用于加载模块。假定有一个数学模块math.js,就可以像下面这样加载。
<pre>
var math = require('math')
</pre>
然后,就可以调用模块提供的方法:
<pre>
var math = require('math')
math.add(2,3)
</pre>
但是,由于一个重大的局限,使得CommonJS规范不适用于浏览器环境。还是上面的代码,如果在浏览器中运行,会有一个很大的问题,第二行math.add(2, 3),在第一行require('math')之后运行,因此必须等math.js加载完成。也就是说,如果加载时间很长,整个应用就会停在那里等。造成页面长时间没有响应,因此,浏览器端的模块,不能采用“同步加载”,只能异步,这就是是AMD。 -
AMD:异步模块定义,它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。requireJS,Dojo,jQuery采用了这个规范。AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
<pre>
require ([module],callback);
</pre>
第一个参数[module]是一个数组,里面的成员就是加载的模块,第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改成AMD形式,则是:
<pre>
require(['math'],function(math){
math.add(2,3);
})
</pre> -
CMD:是 SeaJS推广过程中产生的。在 CMD 规范中,一个模块就是一个文件。与AMD类似,也是异步加载模块,不过书写规范不同。上述代码用CMD的规范书写则是:
<pre>
define(function(require,exports,module){
var add = require('math').add;
exports.increment = function(){
return add(2,3);
}
})
</pre>
版权归ENVY和饥人谷所有,转载请注明出处。