RequireJS入門簡介

RequireJS 學習筆記(一)

RequireJS是一個非常小巧的JavaScript子產品載入架構，是AMD規範最好的實作者之一。

RequireJS是一個JavaScript檔案和子產品加載器。requireJS允許你把你的javascript代碼獨立成檔案和子產品，同時管理每個子產品間的依賴關系。

主要目的還是為了代碼的子產品化。解決了兩個問題:

（1）實作js檔案的異步加載，避免網頁失去響應；

（2）管理子產品之間的依賴性，便于代碼的編寫和維護。

1.基本API

require會定義三個變量：define,require,requirejs，其中require === requirejs，一般使用require更簡短。

• define 用來定義一個子產品
• require 加載依賴子產品，并執行加載完後的回調函數
• config該函數用于配置RequireJS.

例如，define函數定義了一個子產品，然後再頁面中使用：

//a.js
define(function(){
    function fun1(){
      alert("it works");
    }

    fun1();
})
//index.js
require(["js/a"],function(){
    alert("load finished");
})
           

注意:require中的依賴是一個數組，即使隻有一個依賴，你也必須使用數組來定義.

requir API的第二個參數是callback，一個function，是用來處理加載完畢後的邏輯.

2.加載JS檔案

它鼓勵在使用腳本時以module ID替代URL位址，以一個相對于baseUrl的位址來加載所有的代碼

RequireJS預設假定所有的依賴資源都是js腳本，是以無需在module ID上再加”.js”字尾，RequireJS在進行module ID到path的解析時會自動補上字尾。

例如，要麼将所有的腳本都放置到baseUrl中，要麼分置為項目庫/第三方庫的一個扁平結構：

//index.html
<script data-main="js/app.js" src="js/require.js"></script>

//app.js
requirejs.config({ 
    baseUrl: 'js/lib',
    paths: {
        app: '../app'
    }
});

requirejs(['jquery', 'canvas', 'app/sub'],function($,canvas,sub) {

});
           

require函數用于加載子產品依賴但并不會建立一個子產品。

3.data-main入口點

require.js 在加載的時候會檢察data-main 屬性。require.js使用它來啟動腳本加載過程。

data-main需要給所有的腳本檔案設定一個根路徑。根據這個根路徑，RequireJS将會去加載所有相關的子產品。

4.定義子產品

子產品不同于傳統的腳本檔案，它良好地定義了一個作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關系，并以函數(定義此子產品的那個函數)參數的形式将這些依賴進行注入。

4.1 存在依懶關系的函數定義

如果子產品存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，在子產品的所有依賴加載完畢後，該函數會被調用來定義該子產品。

依賴關系會以參數的形式注入到該函數上，參數清單與依賴名稱清單一 一對應。

define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);
           

5.shim

通過require加載的子產品一般都需要符合AMD規範(使用define來申明子產品)，但是部分時候需要加載非AMD規範的js，這時候就需要用到另一個功能：shim。專門用來配置不相容的子產品。

具體來說，每個子產品要定義：

（1）exports值（輸出的變量名），表明這個子產品外部調用時的名稱；

（2）deps數組，表明該子產品的依賴性。

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})
           

6.require.config配置函數

• baseUrl——用于加載子產品的根路徑。
• paths——用于映射不存在根路徑下面的子產品路徑。
• shims——配置在腳本/子產品外面并沒有使用RequireJS的函數依賴并且初始化函數。假設underscore并沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它，那麼你就需要在配置中把它定義為一個shim。
• deps——加載依賴關系數組