javascript中的Require.js/AMD 模組化載入用法案例匯總

Require.js/AMD 模組化載入

開發人員想透過腳本載入器讓混亂不堪的富腳本應用程式變得更規則、更有序一些，而Require .js 就是這樣一種選擇。 Require.js 這個強大的工具包能夠自動和AMD技術一起捋順哪怕最複雜的腳本依賴圖。
現在先來看一個用到Require.js 同名函數的簡單腳本載入範例。

require(['moment'], function(moment) {
  console.log(moment().format('dddd')); // 星期几
});

require 函數接受一個由模組名稱構成的數組，然後並行地載入所有這些腳本模組。與yepnope 不同，Require.js 不會保證按順序運行目標腳本，只是保證它們的運行次序能滿足各自的依賴性要求，但前提是
這些腳本的定義遵守了AMD（Asynchronous Module Definition，非同步模組定義）規範。
案例一：載入JavaScript 檔案

#

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

如案例一所示，有兩個JavaScript 檔案a. js 和b.js，裡面各自定義了myFunctionA 和myFunctionB 兩個方法，透過下面這個方式可以用RequireJS 來載入這兩個文件，在function 部分的程式碼可以引用這兩個檔案裡的方法。

require 方法裡的這個字串陣列參數可以允許不同的值，當字串是以”.js」結尾，或以”/”開頭，或者就是一個URL 時，RequireJS 會認為使用者是在直接載入一個JavaScript 文件，否則，當字串是類似」my/module」的時候，它會認為這是一個模組，並且會以使用者配置的baseUrl 和paths 來載入對應的模組所在的JavaScript文件。配置的部分會在稍後詳細介紹。

這裡要指出的是，RequireJS 預設並沒有保證myFunctionA 和myFunctionB 一定是在頁面加載完成以後執行的，在有需要保證頁面加載以後執行腳本時，RequireJS 提供了一個獨立的domReady 模組，需要去RequireJS 官方網站下載這個模組，它並沒有包含在RequireJS 中。有了 domReady 模組，案例一 的程式碼稍做修改加上對 domReady 的依賴就可以了。
案例二： 頁面載入後執行JavaScript

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

執行案例二的程式碼後，透過Firebug 可以看到RequireJS 會在目前的頁面上插入為a.js 和b.js 分別宣告了一個 標籤，用於非同步方式下載JavaScript 檔案。 async 屬性目前絕大部分瀏覽器已經支持，它表明了這個 標籤中的 js 檔案不會阻塞其他頁面內容的下載。
案例三：RequireJS 插入的

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 
 data-requiremodule="js/a.js" src="js/a.js"></script>

AMD推行一個由Require. js 負責提供的名叫define 的全域函數，該函數有3 個參數：

• #模組名稱，

• ##模組依賴性列表，

• 在那些依賴性模組載入結束時觸發的回呼。

使用 RequireJS 來定義 JavaScript 模組這裡的 JavaScript 模組與傳統的 JavaScript 程式碼不一樣的地方在於它無須存取全域的變數。模組化的設計使得JavaScript 程式碼在需要存取」全域變數」的時候，都可以透過依賴關係，把這些」全域變數」當作參數傳遞到模組的實作體裡，在實作中就避免了存取或宣告全域的變數或函數，有效的避免大量且複雜的命名空間管理。
如同 CommonJS 的 AMD 規範所述，定義 JavaScript 模組是透過 define 方法來實現的。
下面我們先來看一個簡單的例子，這個例子透過定義一個 student 模組和一個 class 模組，在主程式中實作建立 student 物件並將 student 物件放到 class 中去。

案例四： student 模組，student.js

define(function(){ 
   return { 
    createStudent: function(name, gender){ 
       return { 
         name: name, 
         gender: gender 
       }; 
    } 
   }; 
 });

# 案例五：class 模組，class.js

#

 define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

## 案例六：主程序

 require(["js/student", "js/class"], function(student, clz) { 
   clz.addToClass(student.createStudent("Jack", "male")); 
   clz.addToClass(student.createStudent("Rose", "female")); 
   console.log(clz.getClassSize()); // 输出 2 
 });

student 模組和class 模組都是獨立的模組，下面我們再定義一個新的模組，這個模組依賴student 和class 模組，這樣主程式部分的邏輯也可以包裝進去了。

######案例七：依賴student 和class 模組的manager 模組，manager.js#####################

define(["js/student", "js/class"], function(student, clz){ 
  return { 
    addNewStudent: function(name, gender){ 
    clz.addToClass(student.createStudent(name, gender)); 
    }, 
    getMyClassSize: function(){ 
    return clz.getClassSize(); 
    } 
   }; 
});

#### #####案例八：新的主程式######################

require(["js/manager"], function(manager) { 
   manager.addNewStudent("Jack", "male"); 
   manager.addNewStudent("Rose", "female"); 
   console.log(manager.getMyClassSize());// 输出 2 
 });

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。

以上是javascript中的Require.js/AMD 模組化載入用法案例匯總的詳細內容。更多資訊請關注PHP中文網其他相關文章！