RequireJS是一個(gè)非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實(shí)現(xiàn)者之一。這篇文章主要介紹了RequireJS使用注意細(xì)節(jié)的相關(guān)資料,需要的朋友可以參考下
RequireJS介紹
RequireJS由James Burke創(chuàng)建，他也是AMD規(guī)范的創(chuàng)始人。
RequireJS會(huì)讓你以不同于往常的方式去寫(xiě)JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件，以及不用通過(guò)script標(biāo)簽順序去管理依賴(lài)關(guān)系。
RequireJS是一個(gè)非常小巧的JavaScript模塊載入框架，是AMD規(guī)范最好的實(shí)現(xiàn)者之一。最新版本的RequireJS壓縮后只有14K，堪稱(chēng)非常輕量。它還同時(shí)可以和其他的框架協(xié)同工作，使用RequireJS必將使您的前端代碼質(zhì)量得以提升。
使用RequireJS做異步模塊加載，有幾點(diǎn)值得注意的地方：
1.模塊定義兩種寫(xiě)法
1. 存在依賴(lài)的函數(shù)式定義
如果模塊存在依賴(lài)：則第一個(gè)參數(shù)是依賴(lài)的名稱(chēng)數(shù)組；第二個(gè)參數(shù)是函數(shù)，在模塊的所有依賴(lài)加載完畢后，該函數(shù)會(huì)被調(diào)用來(lái)定義該模塊，因此該模塊應(yīng)該返回一個(gè)定義了本模塊的object。依賴(lài)關(guān)系會(huì)以參數(shù)的形式注入到該函數(shù)上，參數(shù)列表與依賴(lài)名稱(chēng)列表一一對(duì)應(yīng)。
define(['a'], function(aJ) {
var hello = function(){
aJ.hello('i am c.js');
}
return {
hello : hello
}
});
PS: 對(duì)模塊的返回值類(lèi)型并沒(méi)有強(qiáng)制為一定是個(gè)object，任何函數(shù)的返回值都是允許的。
2. CommonJS模塊格式定義
require ： 用來(lái)引入依賴(lài)其他模塊方法。
exports ： 導(dǎo)出模塊變量或方法的對(duì)象。
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會(huì)覆蓋調(diào)前面的exports
/*return {
hello : hello2
}*/
});
PS：return 對(duì)象和exports不能一起用，return會(huì)覆蓋調(diào)前面的exports。
下面是調(diào)用后打印的信息：
exports：可以看出exports是module的一個(gè)屬性。
module ：里面包括了該模塊的別名、uri、導(dǎo)出對(duì)象、config信息方法。
config ：我們常常需要將配置信息傳給一個(gè)模塊。這些配置往往是application級(jí)別的信息，需要一個(gè)手段將它們向下傳遞給模塊。
在RequireJS中，基于requirejs.config()的config配置項(xiàng)來(lái)實(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
3. 清除緩存
因?yàn)镽equireJS有緩存的功能，但是在開(kāi)發(fā)的時(shí)候我們不希望它緩存，就可以在require.config設(shè)置urlArgs。
urlArgs：RequireJS獲取資源時(shí)附加在URL后面的額外的query參數(shù)。
示例：
urlArgs: "bust=" + (new Date()).getTime()
在開(kāi)發(fā)中這很有用，但記得在部署到生成環(huán)境之前移除它。
4. 從其他包中加載模塊
RequireJS支持從CommonJS包結(jié)構(gòu)中加載模塊，但需要一些額外的配置。
package config可為特定的包指定下述屬性：
1. name : 包名（用于模塊名/前綴映射）。
2. location : 磁盤(pán)上的位置。位置是相對(duì)于配置中的baseUrl值，除非它們包含協(xié)議或以“/”開(kāi)頭。
3. main : 當(dāng)以“包名”發(fā)起require調(diào)用后，所應(yīng)用的一個(gè)包內(nèi)的模塊。
默認(rèn)為“main”，除非在此處做了另外設(shè)定。
該值是相對(duì)于包目錄的。
例子：
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);
}
});
這種從其他包加載模塊的方式，我感覺(jué)有兩個(gè)怪異地方（我不是很明白）：
1. 其他包里面的模塊引用其他模塊的寫(xiě)法，使用者反而影響模塊的寫(xiě)法？
2. 其他包里面的main.js好像沒(méi)有用了，沒(méi)內(nèi)容都沒(méi)問(wèn)題。
以上內(nèi)容是小編給大家介紹的RequireJS使用注意細(xì)節(jié)，希望對(duì)大家有所幫助！