文章目錄
- 1. 概述
- 2. 詳論
-
- 2.1. 定義
- 2.2. 調用
- 2.3. 入口
- 3. 結果
- 4. 參考
1. 概述
require.js是各種網絡APP中非常常見的JS依賴庫，它其實不僅僅是個子產品加載器那麼簡單。它背後蘊含了一個非常重要的設計，也就是JS子產品化程式設計。子產品化是任何一個程式設計語言都會支援的設計，通過子產品化能夠将一個重要的問題拆分成一個個小的問題，并且子產品與子產品之間不關聯（或者弱關聯），減小的程式的開發難度。
最開始的時候，每個JS架構都會設計自己的子產品加載方案，每次使用不同的JS的架構就得了解不同的子產品加載方案。後來随着require.js的推廣和使用，就逐漸形成了AMD（The Asynchronous Module Definition），也就是"異步子產品加載機制"。這樣，如果大家都約定使用同樣的子產品化規範設計，從一個架構到另外一個架構就沒有成本，并且可以互相加載引入。
這裡通過一個計算幂運算的例子，詳細論述require.js的使用。
2. 詳論
AMD子產品規範聽起來很高大上，但實際上并不是很複雜。子產品化設計就是為了友善子產品之間互動性，那麼接口必然是統一而簡約的，我們隻要按照約定的規則來使用它即可。
2.1. 定義
子產品化設計當然應該先定義一個子產品了，這裡定義一個乘法函數子產品(Multiply.js)：
//自定義子產品
define(function () {
"use strict";
var Multiply = function(x, y) {
return x * y;
};
return Multiply;
})
再定義一個數學函數庫子產品，當然裡面隻有一個求幂運算函數(MyMath.js)：
//自定義子產品
define(["./Multiply"], function(Multiply){
"use strict";
function MyMath(){
}
MyMath.prototype.pow = function(base, exponent){
let result = 1;
for(let i = 0; i < exponent; i++){
result = Multiply(result, base);
}
return result;
}
var myMath = new MyMath();
return myMath;
})
這裡兩個例子說明了定義子產品是通過define方法定義子產品的，其中第一個參數可以是一個數組，指明該子產品的依賴：
define([tools], function(){});
2.2. 調用
接下來在主函數(main.js)中調用自定義的數學函數庫子產品：
//函數立即執行，避免污染全局作用域
(function(){
"use strict";
require.config({
paths: {
"jquery": "./3rdParty/jquery-3.5.1",
"MyMath": "./MyMath"
}
});
//調用子產品
require(["jquery", "MyMath"],function($, MyMath){
$("button").click(function () {
var base = $("#base").val();
var exponent = $("#exponent").val();
var result = MyMath.pow(base, exponent);
$("#result").val(result);
});
})
})()
這裡加載了JQuery庫，因為JQuery庫是按照AMD标準規範來建構的，是以可以通過require.js來引入。
require.config是用來配置導入的庫檔案，用來給子產品定義配置真正的路徑和簡短的名稱。
通過require方法去加載自定義的數學庫子產品和JQuery子產品，其中第一個參數定義了需要加載的子產品；第二個參數則是加載成功之後的回調函數：
require(['modules'], callback);
2.3. 入口
接下來就是定義HTML頁面腳本加載的入口了（RequireJSTest.html）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>RequireJS-AMD規範</title>
</head>
<body>
<div>
<div>
<label>求幂運算：</label>
</div>
<div>
<label>底數：</label>
<input type="number" value="2" id = "base">
</div>
<div>
<label>指數：</label>
<input type="number" value="8" id = "exponent">
</div>
<div>
<button type="button">結果為：</button>
<input type="number" id = "result">
</div>
</div>
<script src="3rdParty/require.js" data-main="main"></script>
</body>
</html>
其中，
<script src="3rdParty/require.js" data-main="main"></script>
這句代碼定義了腳本的加載入口，src當然是require.js的源代碼，而data-main則會預設的将dota-main指定的js路徑為根路徑。
關于dota-main屬性，mozilla.org的具體說明如下：data-* 全局屬性 是一類被稱為自定義資料屬性的屬性，它賦予我們在所有 HTML 元素上嵌入自定義資料屬性的能力，并可以通過腳本在 HTML 與 DOM 表現之間進行專有資料的交換。
這裡還要注意的是AMD規範的腳本加載是異步的，同時會預先加載所有的依賴子產品的腳本直到完成，再進入本腳本内容。
3. 結果
運作結果如下，輸入底數和指數後，點選按鈕就會生成正确的結果：
4. 參考
- 【第67期】ES6 系列之子產品加載方案
- Javascript子產品化程式設計（三）：require.js的用法
- JavaScript的子產品化程式設計
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)