requirejs 配製

匡匡發表於2017-02-05

 

baseUrl: 用來配製動態載入指令碼時,指令碼檔案的起始位置,此屬性可以指定值,也可以由 requirejs 自動計算出值:

  1:不進行任何配製: 假如 a.html 中引用 require.js 檔案 <script src="require.js"></script>

    這樣在 require(['util'],...)  的時候,util.js 的路徑就是和 a.html 在同一個目錄.

 

  2:通過 data-main 屬性指定主檔案:假如 a.html 中引用 require.js 檔案 <script data-main="../app/main.js" src="require.js"></script>

    這種情況下,requirejs 會把 "../app/"  作為 baseUrl 屬性的值,在 require(['util'],...)  的時候,util.js 的路徑就是 ../app/util.js 了。

 

  3:顯示指定 baseUrl 屬性:假如 /admin/home.html 中引用 require.js 檔案 <script data-main="../app/main.js" src="require.js"></script>

    在 main.js 中配製了 baseUrl 的值為 'lib' 值,在 require(['util'],...)  的時候,util.js 的路徑就是 lib/util.js, 這是相對於 home.html 檔案, 對於網站的絕對地址就是 /admin/lib/util.js 了。

 

  從上面的三種情況可以看取, requirejs 生成指令碼路徑的時候,就是把 baseUrl 加上 指令碼的路徑。

    

  另外一個比較特殊的方式載入js檔案。當以以下三種方式來載入js檔案時,載入的路徑將繞過上述的這些配置(意思是設定什麼路徑就以什麼路徑載入,不對路徑進行任何處理)。這三種方式包括:

    1、以/開頭的路徑。
    2、以.js結尾的路徑
    3、以協議http或https開頭的路徑

 

paths: 用來配製一些路徑的別名,在 require 的時候直接使用別名就可以載入相應的指令碼。

    paths 也可以資料夾的別名,如控制元件全部放在 lib/common/controls/ 目錄下面,如果在不取別名的情況下,引用一個控制元件需要這樣 require(['lib/common/controls/date'], ...), 如果在 paths 裡配製了 'controls': 'lib/common/controls' 後, 就可以 require(['controls/date'], ...) 了。

 

    paths 還有備錯配製功能,如 jquery 的庫預設從 cdn 上載入,如果 cdn 載入不成功就從本地載入:

    'jquery':['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min', 'lib/jquery']

 

shim: 配製一些未按 AMD 模式定義的庫,(在 requirejs 中,模組使用 define 方法定義,define 方法會有一個返回值,這返回值就是模組的物件),如 jquery 的一些外掛及以前一些老點的庫,都沒有按這些方式做,所以需要通過 shim 屬性來配製一下:

    shim: {

      'bold': [

        'deps': ['jquery'],

        'exports': 'jQuery.fn.bold'

      ]

    }

 

  上面的程式碼中,主要是 exports 屬性,這此屬性的意思是當檔案載入成功後, requirejs 從哪個變數中獲取檔案中所定義的物件,其實就是一個變數名稱,requirejs 通過這個變數名稱獲取到一個值,並傳遞到相應的方法。

urlArgs: 用來指定在載入指令碼時,附加在指令碼 url 地址後面的引數,如 urlArgs: 'ver=10001', 那麼在動態載入的所有的指令碼檔案中,都會加上這個引數。

bundles: 當一個檔案中定義了多個模組時,就需要使用此屬性來進行相應的配製 bundles: { jsUtil:['MathUtil', 'DateUtil'] }, jsUtil 是檔名稱, MathUtil 和 DateUtil 是通過 define 定義的模組名稱,這樣定義後,就可以使用 require(['MathUtil', 'DateUtil']...) 的方式對模組進行相應的引用。

相關文章