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/archive/2020/12/19/2" id = "base">
        </div>

        <div> 
            <label>指數：</label>
            <input type="number" value="https://www.cnblogs.com/charlee44/archive/2020/12/19/8" id = "exponent">
        </div>

        <div>
        <button type="button">結果為：</button>
        <input type="number" id = "result">
        </div>
    </div>
    <script src="https://www.cnblogs.com/charlee44/archive/2020/12/19/3rdParty/require.js" data-main="main"></script>
</body>

</html>

其中，<script src="https://www.cnblogs.com/charlee44/archive/2020/12/19/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. 結果

運行結果如下，輸入底數和指數后，點擊按鈕就會生成正確的結果：
imglink1

4. 參考

【第67期】ES6 系列之模塊加載方案
Javascript模塊化編程（三）：require.js的用法
JavaScript的模塊化編程

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/237518.html

標籤：其他

上一篇：字體

下一篇：思索 p5.js 的最佳實踐