require開發 requirejs教程二

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

前一篇中的a.js：

define
(function
()fun1
();})

通過define函式定義了乙個模組，然後再頁面中使用：

require
(["js/a"
]);

來載入該模組(注意require中的依賴是乙個陣列，即使只有乙個依賴，你也必須使用陣列來定義)，requir api的第二個引數是callback，乙個function，是用來處理載入完畢後的邏輯，如：

require
(["js/a"
],function
())

之前的例子中載入模組都是本地js，但是大部分情況下網頁需要載入的js可能來自本地伺服器、其他**或cdn，這樣就不能通過這種方式來載入了，我們以載入乙個jquery庫為例：

require
.config(})
require
(["jquery"
,"js/a"
],function($
))})

require
.config(})
require
(["jquery"
,"a"
],function($
))})

通過paths的配置會使我們的模組名字更精煉，paths還有乙個重要的功能，就是可以配置多個路徑，如果遠端cdn庫沒有載入成功，可以載入本地的庫，如：

require
.config(})
require
(["jquery"
,"a"
],function($
))})

在使用requirejs時，載入模組時不用寫.js字尾的，當然也是不能寫字尾

上面例子中的callback函式中發現有$引數，這個就是依賴的jquery模組的輸出變數，如果你依賴多個模組，可以依次寫入多個引數來使用：

require
(["jquery"
,"underscore"
],function($
,_))})

如果某個模組不輸出變數值，則沒有，所以盡量將輸出的模組寫在前面，防止位置錯亂引發誤解

上面的例子中重複出現了require.config配置，如果每個頁面中都加入配置，必然顯得十分**，requirejs提供了一種叫"主資料"的功能，我們首先建立乙個main.js：

require
.config
(})

然後再頁面中使用下面的方式來使用requirejs：

解釋一下，載入requirejs指令碼的script標籤加入了data-main屬性，這個屬性指定的js將在載入完reuqire.js後處理，我們把require.config的配置加入到data-main後，就可以使每乙個頁面都使用這個配置，然後頁面中就可以直接使用require來載入所有的短模組名

data-main還有乙個重要的功能，當script標籤指定data-main屬性時，require會預設的將data-main指定的js為根路徑，是什麼意思呢？如上面的data-main="js/main"設定後，我們在使用require(['jquery'])後(不配置jquery的paths)，require會自動載入js/jquery.js這個檔案，而不是jquery.js，相當於預設配置了：

require
.config
()

通過require載入的模組一般都需要符合amd規範即使用define來申明模組，但是部分時候需要載入非amd規範的js，這時候就需要用到另乙個功能：shim，shim解釋起來也比較難理解，shim直接翻譯為"墊"，其實也是有這層意思的，目前我主要用在兩個地方

1. 非amd模組輸出，將非標準的amd模組"墊"成可用的模組，例如：在老版本的jquery中，是沒有繼承amd規範的，所以不能直接require["jquery"],這時候就需要shim，比如我要是用underscore類庫，但是他並沒有實現amd規範，那我們可以這樣配置

require
.config(}
})

這樣配置後，我們就可以在其他模組中引用underscore模組：

require
(["underscore"
],function(_
))

外掛程式形式的非amd模組，我們經常會用到jquery外掛程式，而且這些外掛程式基本都不符合amd規範，比如jquery.form外掛程式，這時候就需要將form外掛程式"墊"到jquery中：

require
.config
(,"jquery.form":}
})

也可以簡寫為：

require
.config
(,"jquery.form":[
"jquery"]}
})

這樣配置之後我們就可以使用載入外掛程式後的jquery了

require
.config
(["jquery"
,"jquery.form"
],function($
));})
})

好了，requirejs的基本配置大致就是這麼多，還有一些擴充套件的功能會在之後的篇幅中提

require開發 requirejs教程二

requir與include的區別

requir和load的區別

Lua模組引入import 和require的區別

require開發 requirejs教程 二

requir與include的區別

requir和load的區別

Lua模組引入import 和require的區別

相關推薦

require開發 requirejs教程二