使用RequireJS做異步模塊加載，有幾點(diǎn)值得注意的地方：

1.模塊定義兩種寫法

1.?存在依賴的函數(shù)式定義

如果模塊存在依賴：則第一個(gè)參數(shù)是依賴的名稱數(shù)組；第二個(gè)參數(shù)是函數(shù)，在模塊的所有依賴加載完畢后，該函數(shù)會被調(diào)用來定義該模塊，因此該模塊應(yīng)該返回一個(gè)定義了本模塊的object。依賴關(guān)系會以參數(shù)的形式注入到該函數(shù)上，參數(shù)列表與依賴名稱列表一一對應(yīng)。

define(['a'], function(aJ) {var hello = function(){aJ.hello('i am c.js');}return {hello : hello} });

PS: 對模塊的返回值類型并沒有強(qiáng)制為一定是個(gè)object，任何函數(shù)的返回值都是允許的。

2.?CommonJS模塊格式定義

require ： 用來引入依賴其他模塊方法。

exports ： 導(dǎo)出模塊變量或方法的對象。

module ：包含該模塊的信息。

require.config({baseUrl: "",config: {'b': {size: 'large'}},paths: {a : 'base/a',b : 'base/b',c : 'base/c'} }); define(function(require, exports, module) {var aJ = require("a");var hello = function(){aJ.hello('i am b.js');}var hello2 = function(){aJ.hello('i am b.js22');}exports.hello = hello;console.log("b.js : exports", exports);console.log("b.js : module", module);console.log("b.js : config", module.config());//不能一起用，return會覆蓋調(diào)前面的exports/*return {hello : hello2}*/ });

PS：return 對象和exports不能一起用，return會覆蓋調(diào)前面的exports。

下面是調(diào)用后打印的信息：

exports：可以看出exports是module的一個(gè)屬性。

module ：里面包括了該模塊的別名、uri、導(dǎo)出對象、config信息方法。

config ：我們常常需要將配置信息傳給一個(gè)模塊。這些配置往往是application級別的信息，需要一個(gè)手段將它們向下傳遞給模塊。

在RequireJS中，基于requirejs.config()的config配置項(xiàng)來實(shí)現(xiàn)。

2. 警惕單例變量

警惕單例里變量，因?yàn)镽equireJS在require一次后，之后的require都是使用之前的緩存。所以當(dāng)模塊里面定義了一個(gè)變量后，只要在此require改變后，其他require也是保持一致的。

define(function() {var index = 0;var hello = function(msg){console.log(msg);}var addIndex = function(){index ;}var getIndex = function(){return index;}return {hello : hello,addIndex : addIndex,getIndex : getIndex} });

調(diào)用：

require(['a',], function (A) {require(['a'], function (A) {console.log(A.getIndex());A.addIndex();A.addIndex();});require(['a'], function (A) {console.log(A.getIndex());}); });

上面分別打印的是：

0 2

這例子可以看出這幾個(gè)require都是共用一個(gè)index變量。

3. 清除緩存

因?yàn)镽equireJS有緩存的功能，但是在開發(fā)的時(shí)候我們不希望它緩存，就可以在require.config設(shè)置urlArgs。

urlArgs：RequireJS獲取資源時(shí)附加在URL后面的額外的query參數(shù)。

示例：

urlArgs: "bust=" (new Date()).getTime()

在開發(fā)中這很有用，但記得在部署到生成環(huán)境之前移除它。

4.?從其他包中加載模塊

RequireJS支持從CommonJS包結(jié)構(gòu)中加載模塊，但需要一些額外的配置。

package config可為特定的包指定下述屬性：

1.?name?: 包名（用于模塊名/前綴映射）。

2.?location?: 磁盤上的位置。位置是相對于配置中的baseUrl值，除非它們包含協(xié)議或以“/”開頭。

3.?main?: 當(dāng)以“包名”發(fā)起require調(diào)用后，所應(yīng)用的一個(gè)包內(nèi)的模塊。

? ? ? ? ? ? ? 默認(rèn)為“main”，除非在此處做了另外設(shè)定。

? ? ? ? ? ? ? 該值是相對于包目錄的。

例子：

main.js

require.config({baseUrl: "",packages: [{name: "student",location: "package-stu"},{name: "teacher",location: "package-tea"}],urlArgs: "bust=" (new Date()).getTime() }); require(["student/store", "teacher/tea"], function (Sto, Tea) {Sto.hello(); Tea.hello(); });

tea.js：

define(function(require, exports, module) {exports.hello = function(){console.log('i am a teacher.');} });

stu.js:

define(function(require, exports, module) {exports.name = '海角'; });

store.js:

define(function(require, exports, module) {var stu = require("student/stu"); exports.hello = function(){console.log('i am ' stu.name);} });

這種從其他包加載模塊的方式，我感覺有兩個(gè)怪異地方（我不是很明白，例子雖然調(diào)通）：

1. 其他包里面的模塊引用其他模塊的寫法，使用者反而影響模塊的寫法？

2. 其他包里面的main.js好像沒有用了，沒內(nèi)容都沒問題。

參考文獻(xiàn)

1.?RequireJS 中文網(wǎng)

?

本文為原創(chuàng)文章，轉(zhuǎn)載請保留原出處，方便溯源，如有錯(cuò)誤地方，謝謝指正。

本文地址 ：http://www.cnblogs.com/lovesong/p/5495177.html

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的RequireJS使用注意地方的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。