前言 - 什么是 AMD 模式
AMD是"Asynchronous Module Definition"的縮寫(xiě)减江，意思就是"異步模塊定義"。
說(shuō)白了就是先裝載模塊再使用，AMD 模式的 需要載入 requirejs 這個(gè)包, 瀏覽器兼容ie6+ 所以放心用吧芭梯。
使用方式:
require(['模塊文件名稱(chēng)'], function (對(duì)象名){
對(duì)象名.方法();
});
可以看到當(dāng)require調(diào)用模塊成功后，才會(huì)回調(diào) function 這個(gè)函數(shù)弄喘。
模塊調(diào)用 單例方式
- 首先定義模塊 module1.js
// 單例
define(function () {
console.log('module1 被裝載~');
var num = 0;
var add = function () {
num++;
};
var get = function () {
return num;
};
return{
add : add,
get : get
};
});
define方式包裹一個(gè) function玖喘。
- 主界面html
<script src="../core/require.js" data-main="main1"></script>
頁(yè)面中調(diào)入 require.js, 標(biāo)簽節(jié)點(diǎn) data-main 表示主控制js文件。
- 主控制 main1.js
// 第一次調(diào)用
require(['../lib/module1'], function (mod1){
mod1.add();
mod1.add();
console.log(mod1.get());
});
// 第二次調(diào)用
require(['../lib/module1'], function (mod1){
mod1.add();
mod1.add();
console.log(mod1.get());
});
為了看看 作用域 蘑志，我這里 調(diào)用了兩次累奈。
- 輸出
module1 被裝載~
2
4
可以看出 模塊被裝載后，整個(gè)頁(yè)面全局有效急但。
非單例方式
有的模塊需要非單例澎媒，否則每次都是全局使用。
- 首先定義模塊 module2.js
// 非單例
define(function () {
console.log('module2 被裝載~');
function UserModel() {
var num = 1000;
var name = "AAAAA";
var uid = "1001";
this.add = function () {
num ++;
};
this.show = function () {
return num + ":" + name + ":" + uid;
};
}
return function () {
return new UserModel();
};
});
我這里 嵌套了 function波桩，然后 返回的時(shí)候 new 了一個(gè)返回戒努。
- 主界面html
<script src="../core/require.js" data-main="main2"></script>
這里主控制是 main2.js
- 主控制 main2.js
// 第一次調(diào)用
require(['../lib/module2'], function (mod2){
var mod = mod2();
mod.add();
mod.add();
mod.add();
console.log(mod.show());
});
// 第二次調(diào)用
require(['../lib/module2'], function (mod2){
var mod = mod2();
mod.add();
mod.add();
mod.add();
console.log(mod.show());
});
這里，我還是調(diào)用了兩次镐躲。
- 輸出
module2 被裝載~
1003:AAAAA:1001
1003:AAAAA:1001
可以看出 每次調(diào)用的都是全新的實(shí)例對(duì)象储玫，互不干擾。
繼承調(diào)用
- 首先定義模塊 module3.js
// 繼承
define(['module1'],function (mod1) {
console.log('module3 被裝載~');
mod1.show = function () {
return "number:"+mod1.get();
};
return function () {
return mod1;
};
});
define(['module1'] 第一個(gè)參數(shù)就是依賴(lài)的模塊文件名萤皂。
對(duì)象被傳入后撒穷，直接擴(kuò)展，最后返回被修改的對(duì)象裆熙。
- 主界面html
<script src="../core/require.js" data-main="main3"></script>
這里主控制是 main3.js端礼。
- 主控制 main3.js
// 配置
require.config({
baseUrl: "../lib/"
});
// 第一次調(diào)用
require(['module3'], function (mod3){
mod3().add();
mod3().add();
mod3().add();
console.log(mod3().show());
});
// 第一次調(diào)用
require(['module3'], function (mod3){
mod3().add();
mod3().add();
mod3().add();
console.log(mod3().show());
});
require.config 是配置項(xiàng)目。
baseUrl 指模塊的默認(rèn)路徑入录。
這里蛤奥，我還是調(diào)用了兩次。
- 輸出
module1 被裝載~
module3 被裝載~
number:3
number:4
可以看出 當(dāng)多模塊依賴(lài)的時(shí)候僚稿，都是先裝載完成模塊后 再依次執(zhí)行命令喻括，很符合瀏覽器行為。
別名調(diào)用
- 主界面html
<script src="../core/require.js" data-main="main4"></script>
這里主控制是 main4.js贫奠。
- 主控制 main4.js
// 配置
require.config({
paths: {
"jquery" : "../core/jquery-3.1.1.min"
}
});
// 第一次調(diào)用
require(['jquery'], function (jq){
var obj1 = jq(document);
console.log(obj1[0].charset);
var obj2 = $(document);
console.log(obj2[0].charset);
});
paths 是以別名的方式指定文件路徑。
require的時(shí)候直接用別名就行望蜡。
- 輸出
windows-1252
windows-1252
jquery被載入后 $ 符號(hào) 還是可以用的唤崭。
參考代碼
https://github.com/hans007/JavaScriptCodes/tree/master/requirejs%E6%A8%A1%E5%9D%97%E5%8C%96
