我們都知道，雖然我們可以通過原型和繼承來使javascript面向對象。但是，當js代碼和邏輯過多時，代碼的維護和擴展會變的很不方便。這時，nodejs做的非常好，但是在瀏覽器端模塊化的js編程一直都是個難題。而requireJS就是來幫助我們解決這個問題的。requireJS遵循amd規范，所以讓我們先了解下關于AMD規范的事情。

一、AMD規范

　　AMD規范是瀏覽器端的模塊規范，它的全稱為異步模塊定義。從名稱上看便知它是適合script tag的。也可以說AMD是專門為瀏覽器中JavaScript環境設計的規范。它吸取了CommonJS的一些優點，但又不照搬它的格式。開始AMD作為CommonJS的transport format?存在，因無法與CommonJS開發者達成一致而獨立出來。它有自己的wiki?和討論組?。

AMD設計出一個簡潔的寫模塊API：

define(id?, dependencies?, factory);

其中：

• id: 模塊標識，可以省略。
• dependencies: 所依賴的模塊，可以省略。
• factory: 模塊的實現，或者一個JavaScript對象。

id遵循CommonJS?Module Identifiers?。dependencies元素的順序和factory參數一一對應。 以下是使用AMD模式開發的簡單三層結構（基礎庫/UI層/應用層）： base.js define(function() {return {mix: function(source, target) {}}; });

　　

ui.js

define(['base'], function(base) {return {show: function() {// todo with module base}} });

?

page.js

define(['base'],?function(base) { ????return?{ ????????show:?function() { ????????????// todo with module base ????????} ????} });

?

data.js

define({ ????users: [], ????members: [] });

?

以上同時演示了define的三種用法

定義無依賴的模塊（base.js）

定義有依賴的模塊（ui.js，page.js）

定義數據對象模塊（data.js）

細心的會發現，還有一種沒有出現，即具名模塊 4，具名模塊 define('index', ['data','base'],?function(data, base) { ????// todo });

?

具名模塊多數時候是不推薦的，一般由打包工具合并多個模塊到一個js文件中時使用。 前面提到dependencies元素的順序和factory一一對應，其實不太嚴謹。AMD開始為擺脫CommonJS的束縛，開創性的提出了自己的模塊風格。但后來又做了妥協，兼容了 CommonJS?Modules/Wrappings?。即又可以這樣寫 5，包裝模塊 define(function(require, exports, module) { ????var?base = require('base'); ????exports.show =?function() { ????????// todo with module base ????} });

?

不考慮多了一層函數外，格式和Node.js是一樣的：使用require獲取依賴模塊，使用exports導出API。 除了define外，AMD還保留一個關鍵字require。require?作為規范保留的全局標識符，可以實現為?module loader，也可以不實現。 目前，實現AMD的庫有RequireJS?、curl?、Dojo?、bdLoad、JSLocalnet?、Nodules?等。 也有很多庫支持AMD規范，即將自己作為一個模塊存在，如MooTools?、jQuery?、qwery?、bonzo??甚至還有?firebug?。 二、CMD規范 與AMD規范類似的還有CMD規范， 在CMD中，一個模塊就是一個文件，格式為： define( factory ); 全局函數define，用來定義模塊。 參數 factory ?可以是一個函數，也可以為對象或者字符串。 當 factory 為對象、字符串時，表示模塊的接口就是該對象、字符串。 定義JSON數據模塊：

define({?"foo":?"bar"?});

通過字符串定義模板模塊：

define('this is {{data}}.');

factory 為函數的時候，表示模塊的構造方法，執行構造方法便可以得到模塊向外提供的接口。

define(?function(require,?exports,?module)?{?

????// 模塊代碼

});

define( id?, deps?, factory ); define也可以接受兩個以上的參數，字符串id為模塊標識，數組deps為模塊依賴：

define(?'module',?['module1',?'module2'],?function(?require,?exports,?module?){

????// 模塊代碼

}?);

其與 AMD 規范用法不同。 require?是 factory 的第一個參數。 require( id ); 接受模塊標識作為唯一的參數，用來獲取其他模塊提供的接口：

define(function(?require,?exports?){

????var?a?=?require('./a');

????a.doSomething();

});

require.async( id, callback? ); require是同步往下執行的，需要的異步加載模塊可以使用 require.async 來進行加載：

define(?function(require,?exports,?module)?{?

????require.async('.a',?function(a){

????????a.doSomething();

????});

});

require.resolve( id ) 可以使用模塊內部的路徑機制來返回模塊路徑，不會加載模塊。 exports?是 factory 的第二個參數，用來向外提供模塊接口。

define(function(?require,?exports?){

????exports.foo?=?'bar';?// 向外提供的屬性

????exports.do?=?function(){};?// 向外提供的方法

});

當然也可以使用 return 直接向外提供接口。

define(function(?require,?exports?){

????return{

????????foo?:?'bar',?// 向外提供的屬性

????????do?:?function(){}?// 向外提供的方法

????}

});

也可以簡化為直接對象字面量的形式:

define({

????foo?:?'bar',?// 向外提供的屬性

????do?:?function(){}?// 向外提供的方法

});

與nodeJS中一樣需要注意的是，一下方式是錯誤的：

define(function(?require,?exports?){

????exports?=?{

????????foo?:?'bar',?// 向外提供的屬性

????????do?:?function(){}?// 向外提供的方法

????}

});

需要這么做

define(function(?require,?exports,?module?){

????module.exports?=?{

????????foo?:?'bar',?// 向外提供的屬性

????????do?:?function(){}?// 向外提供的方法

????}

});

傳入的對象引用可以添加屬性，一旦賦值一個新的對象，那么值錢傳遞進來的對象引用就會失效了。開始之初，exports 是作為 module.exports 的一個引用存在，一切行為只有在這個引用上 factory 才得以正常運行，賦值新的對象后就會斷開引用，exports就只是一個新的對象引用，對于factory來說毫無意義，就會出錯。 ????module?是factory的第三個參數，為一個對象，上面存儲了一些與當前模塊相關聯的屬性與方法。 module.id 為模塊的唯一標識。 module.uri 根據模塊系統的路徑解析規則得到模塊的絕對路徑。 module.dependencies 表示模塊的依賴。 module.exports 當前模塊對外提供的接口。

?

轉載于:https://www.cnblogs.com/dunken/p/4524093.html

總結

以上是生活随笔為你收集整理的深入浅出requireJS-1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。