keywords: 模块化、AMD、CMD、CommonJS。
-
为什么要使用模块化？
什么是模块？模块就是对实现特定功能的一组属性和方法的封装。使用模块化能解决长久以来困扰我们的两大问题：1、命名冲突；2、文件依赖。
对于小团队或简单页面来说，还可以通过人为约定来避免这两个问题；但随着网页逐步向应用程序方向发展，页面所使用到的JS代码越来越庞大，越来越复杂，命名冲突与文件依赖这两个问题越发突出，拖延了项目的开发进度。通过使用模块化，所有组件可以彼此独立，职责单一，协同完成开发。
-
CMD、AMD、CommonJS 规范分别指什么？有哪些应用
**CommomJS **: NodeJS提出的服务器端的模块化规范。
1、定义模块：一个单独的文件就是一个模块。每一个模块都是单独的作用域。
2、模块输出 模块只有一个出口，即module.exports对象，需要把希望输出的内容放入该对象。
3、加载模块：加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象。
//定义模块：myMod.js
var name = 'Byron'
function printName(){
console.log(name)
}
function printFullName(firstName) {
console.log(firstName + name)
}
//输出模块
module.exports = {
printName : printName,
printFullName:printFullName
}
==================================
//加载模块
var nameMod = require('./myMod.js')
nameMod.printName()
不同的实现对require时的路径有不同要求，一般情况可以省略js扩展名，可使用相对路径和绝对路径。
AMD：即Asynchronous Module Definition，是一个浏览器端模块化开发的规范。使用该规范的有requireJS。
1、定义模块：通过define函数来定义模块，它是全局变量。
define(
module_id /*可选*，没有则为匿名模块/,
[dependencies] /*可选*,当前模块依赖的模块组/,
definition function /*用来初始化模块或对象的函数*/
);
2、输出模块：define函数中的回调函数return出的内容即为模块的接口。
3、加载模块：使用require方法加载模块：
require([dependencies],callback)
require函数接收两个参数：
1、第一个参数是一个数组，表示加载的模块；
2、第二个参数是一个回调函数，当第一个参数的模块加载成功后，它将被调用。
加载的模块会以参数形式传入该函数，从而在回调函数内部使用这些模块。
显然，require加载的模块是异步的。
//math.js 定义math模块，回调函数中的return为暴露的接口
define(function(){
return function () {
var sum = 0,i=0,args = arguments,len = arguments.length
while(i<leen) {
sum += args[i++]
}
return sum
}
})
//inc.js 定义inc模块，回调函数中的return为暴露的接口
define(['math',function(math){
return function (val) {
return match(val + 1)
}
}])
//index.js 加载inc模块
requirejs.config({
baseUrl:'js' //用于模块查找的基准路径
})
requirejs(['inc'],function(inc){
console.log(inc(10))
})
CMD：即Common Module Definition，是一个浏览器端模块化开发的规范。使用该规范的有SeaJS。
1、定义模块：通过define函数定义模块。
define(id?,desp?,factory)
1、一个文件一个模块，一般用文件名作为模块id；
2、CMD推崇就近依赖，一般不再define的参数中写依赖，而是在factory中写。
3、factory有3个参数：require（方法）,exports（对象）,module（对象）。
2、输出模块：通过factory中的参数exports对象向外提供模块接口。
3、加载模块：使用require函数加载模块
//定义模块 math.js
define(function(require,exports,module){
exports.add = function() {
var sum = 0,i = 0,args = arguments,len = args.length
while(i < len) {
sum += args[i++]
}
return sum
}
})
//定义inc模块
define(function(require,exports,module){
var add = require('math').add
exports.increment = function(val) {
return add(val,1)
}
})
AMD与CMD的区别：
1、对依赖的处理不同。AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块；CMD推崇就近依赖，只有在用到某个模块的时候再去require。
2、对依赖的执行时机不同。AMD在加载模块完成后就执行该模块，所有模块执行完成后则进入require的回调并执行。而CMD加载模块后并不执行该模块，在所有模块加载完成执行callback，遇到require才执行相应的模块。
网友评论