JS模塊化編程規範1——require.js

時間 2020-12-20

標籤 javascript html java jquery 編程數組網絡框架異步編程語言欄目 JavaScript 简体版

原文原文鏈接

1. 概述

require.js是各類網絡APP中很是常見的JS依賴庫，它其實不單單是個模塊加載器那麼簡單。它背後蘊含了一個很是重要的設計，也就是JS模塊化編程。模塊化是任何一個編程語言都會支持的設計，經過模塊化可以將一個重要的問題拆分紅一個個小的問題，而且模塊與模塊之間不關聯（或者弱關聯），減少的程序的開發難度。javascript

最開始的時候，每一個JS框架都會設計本身的模塊加載方案，每次使用不一樣的JS的框架就得理解不一樣的模塊加載方案。後來隨着require.js的推廣和使用，就逐漸造成了AMD（The Asynchronous Module Definition），也就是"異步模塊加載機制"。這樣，若是你們都約定使用一樣的模塊化規範設計，從一個框架到另一個框架就沒有成本，而且能夠互相加載引入。html

這裏經過一個計算冪運算的例子，詳細論述require.js的使用。java

2. 詳論

AMD模塊規範聽起來很高大上，但實際上並非很複雜。模塊化設計就是爲了方便模塊之間交互性，那麼接口必然是統一而簡約的，咱們只要按照約定的規則來使用它便可。jquery

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路徑爲根路徑。