requirejs 模組化編程

標籤：style   class   blog   code   http   ext   

       在介紹 require.js 之前，先介紹下 AMD ( Asynchronous Module Definition ), 意思是“非同步模組定義”。它採用非同步方式載入模組，模組的載入不影響它後面語句的運行。所有依賴這個模組的語句，都定義在一個回呼函數中，等到載入完成之後，這個回呼函數才會運行。實現 AMD 規範的載入器其實很多，不過多數人還是使用 require.js 。

       所以，為避免以下問題而使用 require.js：

       1）實現js檔案的非同步載入，避免網頁失去響應；

       2）管理模組之間的依賴性，便於代碼的編寫和維護。

 

使用說明：

1. require.js 載入

<script src="js/require.js" defer async="true" ></script>

 

2. 模組調用

       (1) 如果我們的代碼不依賴任何其他模組，那麼我們就沒有必要使用 require.js .

       (2) 如果我們的代碼依賴其他的模組，那麼就需要requrie.js , 例如：

require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){     // code here 主模組代碼});

       require.js會先載入jQuery、underscore和backbone，然後再運行回呼函數。主模組的代碼就寫在回呼函數中。

 

3. 模組載入

       require.js 在 js 目錄下，其他標準庫置於 js目錄下 lib 檔案夾中，自訂模組置於 app 檔案夾中。

按微擎系統的js目錄結構。使用 require.config() 方法，我們可以對模組的載入行為進行定義。可以將 require.config() 方法置於模組檔案頭部，或抽離單獨的 js檔案（config.js）。

require.config({    paths: {        "jquery": "lib/jquery.min",        "underscore": " lib/underscore.min"    }}); 

或使用 baseUrl 來改變基路徑

 require.config({    baseUrl: "js/app",  // 設定為自訂模組路徑。    paths: {   // require.js要求，每個模組是一個單獨的js檔案。        ‘jquery‘: ‘../lib/jquery-1.11.1.min‘,       // ‘模組名稱‘： ’相對 baseUrl 的路徑 ‘        ‘underscore‘: ‘../lib/underscore-min‘,     }});

 

4. 載入非規範模組

require.config({    shim: {        ‘colorpicker‘: {            // （輸出的變數名），表明這個模組外部調用時的名稱；            exports: ‘$‘,            // 依賴項， css! 依賴外部css            deps: [‘css!../../components/colorpicker/spectrum.css‘]        },               }});

 

5. 載入外掛程式

require.js還提供一系列外掛程式，實現一些特定的功能。

(1)  domready外掛程式，可以讓回呼函數在頁面DOM結構載入完成後再運行。

require([‘domready!‘], function (doc){    // called once the DOM is ready});

 

(2)  text和image外掛程式，則是允許require.js載入文本和圖片檔案。

define([‘text!review.txt‘, ‘image!cat.jpg‘], function(review,cat){    console.log(review);    document.body.appendChild(cat);});

 

其他外掛程式地址：https://github.com/jrburke/requirejs/wiki/Plugins

 

6. 定義模組

 //  [‘jquery’, ‘underscore’] 數組的元素是 require.config() 中聲明的模組名，回呼函數中會使用   
 //  ‘$’ 為 ‘jquery‘ 模組的輸出變數，’_’ 為 ’underscroe’模組的輸出變數; //  $, _ 可以在回調function 中直接使用。 define([‘jquery’, ‘underscore’], function($, _ ){
    var mod = {};
    // code-segment
    return mod;
});