目錄
- 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="https://www.cnblogs.com/charlee44/p/2" id = "base">
</div>
<div>
<label>指數：</label>
<input type="number" value="https://www.cnblogs.com/charlee44/p/8" id = "exponent">
</div>
<div>
<button type="button">結果為：</button>
<input type="number" id = "result">
</div>
</div>
<script src="https://www.cnblogs.com/charlee44/p/3rdParty/require.js" data-main="main"></script>
</body>
</html>
其中，<script src="https://www.cnblogs.com/charlee44/p/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的模塊化編程
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237514.html
標籤：JavaScript