1. 為什么要使用模塊化柱蟀？
模塊化發(fā)展過程
如圖，在模塊化還未規(guī)范化之前蚜厉，有三種模仿模塊化的方法，分別是函數(shù)聲明畜眨，對象返回昼牛，和立即執(zhí)行函數(shù)封裝，之后才有模塊化的規(guī)范康聂，在ES6中贰健，也對“類”和“模塊”有定義，不過要主流瀏覽器都支持時(shí)才能廣泛使用恬汁。之所以使用模塊化是因?yàn)椋?/p>
- 解決命名沖突伶椿；
- 方便依賴性管理；
- 提高代碼的維護(hù)性和可讀性氓侧；
- 每個(gè)模塊都是單獨(dú)文件脊另，解耦提高代碼復(fù)用性；
2. CMD约巷、AMD偎痛、CommonJS 規(guī)范分別指什么？有哪些應(yīng)用
-
AMD：
是"Asynchronous Module Definition"的縮寫独郎，意思就是"異步模塊定義"踩麦。采用異步方式加載模塊枚赡，模塊的加載不影響它后面語句的運(yùn)行。所有依賴這個(gè)模塊的語句谓谦，都定義在一個(gè)回調(diào)函數(shù)中贫橙，等到加載完成之后，這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行反粥。 -
語法：
define(id, dependences, factory); -
CommonJS：
用于服務(wù)器端模塊化卢肃，有一個(gè)全局性方法require()，用于加載模塊星压。 -
語法：
require(dependences) // 加載依賴模塊exports.factory = function(){ // ...}; // 使用”exports”對象來做為輸出的唯一表示践剂。
-
CMD：
CMD（Common Module Definition）是 SeaJS推廣過程中產(chǎn)生的。和AMD不同的是娜膘，它并不是異步加載逊脯，而是松散加載，只有當(dāng)需要加載模塊的時(shí)候竣贪，再用require方法引用模塊军洼。 -
語法：
define(factory); - eg：
// CMD
// math.js
define(function(requires, exports, module) {
exports.add = function(x, y) {
return x + y;
};
});
// inc.js
define(function(requires, exports, module) {
var add = require('math').add;
exports.inc = function(val) {
return add(val, 1);
};
});
// program.js
define(function(require, exports, module) {
var inc = require('inc').inc;
var a = 1;
inc(a); // 2
module.id = "program";
});
- require.js：
// 加載模塊設(shè)置
requirejs.config({
baseUrl: 'js/libs', // 指明模塊的默認(rèn)路徑
paths: {
'jquery': 'jquery.min', // 每個(gè)模塊都是JS文件，即HTTP請求多
'underscore': 'underscore.min', // 可以用require.js的優(yōu)化工具合并模塊
'backbone': 'backbone.min',
'jquery.scroll': 'jquery.scroll.min'
'xxx': 'https://xxx.com/libs/xxx/1.7.2/xxx.min'
}
shim: { // 為非規(guī)范的模塊定義特征演怎，接受配置對象
'underscore': {
exports: '_' // exports為外部調(diào)用模塊時(shí)所用的名稱
},
'backbone': {
deps: ['underscore', 'jquery'], // deps數(shù)組表明模塊的依賴性
exports: 'Backbone'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
});
// 加載AMD模塊匕争，并用回調(diào)函數(shù)操作
requirejs(['jquery', 'underscore', 'backbone'], function($, _, Backbone) {
//...
});
// 寫AMD模塊
// 1. 不依賴其他模塊，例如：math.js
define(function() {
var add = function(x, y) {
return x + y;
};
return {
add: add
};
});
// 2. 依賴其他模塊爷耀，需指明依賴數(shù)組
define(['mylib'], function(mylib) {
function foo() {
mylib.doSomething();
}
return {
foo: foo
};
});
// require.js提供了一些插件
//1. domready插件甘桑，回調(diào)函數(shù)在頁面DOM結(jié)構(gòu)加載完成時(shí)運(yùn)行
require(['domready!'], function(doc) {
//...
});
//2. text和image插件，允許require.js加載文件和圖片文件
define(['text!review.txt', 'image!dog.jpg'], function(review, dog) {
console.log(review);
document.body.appendChild(dog);
});
// 3. 類似的插件還有json和mdown歹叮，加載json文件和markdown文件
- 創(chuàng)建html文件跑杭，引入require.js庫，設(shè)置data-main屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task38</title>
</head>
<body>
<script src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js" data-main="js/main"></script>
</body>
</html>
- 在html目錄下新建js文件夾咆耿，創(chuàng)建main.js：
// main.js
require(['starting']);
console.log("starting");
- starting.js：
//starting.js
define(['inc'],function(inc){
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
inc.add1();
console.log(inc.getRes());
});
- inc.js：
// inc.js
define(function() {
var a = 1;
var inc = {
add1: function() {
return a++;
},
getRes: function() {
return a;
}
};
return inc;
});
- 結(jié)果：
res
本文歸本人和饑人谷所有德谅，如需轉(zhuǎn)載請注明出處
