<noframes id="ffjxp">

    <th id="ffjxp"></th>

    <big id="ffjxp"></big>
      <pre id="ffjxp"></pre>
        <var id="ffjxp"><font id="ffjxp"></font></var>

        成都web前端培訓
        成都達內金融街中心

        成都web前端培訓:JS模塊化編程規范require.js

        • 時間:2020-12-22 12:01
        • 發布:成都達內
        • 來源:成都達內

        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

        其中,這句代碼定義了腳本的加載入口,src當然是require.js的源代碼,而data-main則會默認的將dota-main指定的js路徑為根路徑。

        關于dota-main屬性,mozilla.org的具體說明如下:data-* 全局屬性 是一類被稱為自定義數據屬性的屬性,它賦予我們在所有 HTML 元素上嵌入自定義數據屬性的能力,并可以通過腳本在 HTML 與 DOM 表現之間進行專有數據的交換。

        這里還要注意的是AMD規范的腳本加載是異步的,同時會預先加載所有的依賴模塊的腳本直到完成,再進入本腳本內容。

        上一篇:成都web前端學習路線:electron-playground系列打包優化之路
        下一篇:成都web培訓:思索p5.js的最佳實踐

        成都web前端培訓班:React Fiber

        成都web前端培訓機構:教你玩轉CSS的所有字體

        成都web培訓:React+AntdMobile+Axios實現全局Loading提示組件

        成都前端培訓:解決移動端手機瀏覽器軟鍵盤遮擋輸入框問題

        • 關注微信公眾號

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        江西省

        貴州省

        廣西省

        海南省

        校花把腿张开让男生桶视频,欧美va天堂在线电影,欧美中文有码字幕在线播放,九九热线精品视频6在线