DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> RequireJS使用注意細節
RequireJS使用注意細節
編輯:關於JavaScript     

RequireJS介紹

RequireJS由James Burke創建,他也是AMD規范的創始人。

RequireJS會讓你以不同於往常的方式去寫JavaScript。你將不再使用script標簽在HTML中引入JS文件,以及不用通過script標簽順序去管理依賴關系。

RequireJS是一個非常小巧的JavaScript模塊載入框架,是AMD規范最好的實現者之一。最新版本的RequireJS壓縮後只有14K,堪稱非常輕量。它還同時可以和其他的框架協同工作,使用RequireJS必將使您的前端代碼質量得以提升。

使用RequireJS做異步模塊加載,有幾點值得注意的地方:

1.模塊定義兩種寫法

1. 存在依賴的函數式定義

如果模塊存在依賴:則第一個參數是依賴的名稱數組;第二個參數是函數,在模塊的所有依賴加載完畢後,該函數會被調用來定義該模塊,因此該模塊應該返回一個定義了本模塊的object。依賴關系會以參數的形式注入到該函數上,參數列表與依賴名稱列表一一對應。

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

PS: 對模塊的返回值類型並沒有強制為一定是個object,任何函數的返回值都是允許的。

2. CommonJS模塊格式定義

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

exports : 導出模塊變量或方法的對象。

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會覆蓋調前面的exports
/*return {
hello : hello2
}*/
});

PS:return 對象和exports不能一起用,return會覆蓋調前面的exports。

下面是調用後打印的信息:

exports:可以看出exports是module的一個屬性。

module :裡面包括了該模塊的別名、uri、導出對象、config信息方法。

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

在RequireJS中,基於requirejs.config()的config配置項來實現。

2. 警惕單例變量

警惕單例裡變量,因為RequireJS在require一次後,之後的require都是使用之前的緩存。所以當模塊裡面定義了一個變量後,只要在此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
}
});

調用:

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. 清除緩存

因為RequireJS有緩存的功能,但是在開發的時候我們不希望它緩存,就可以在require.config設置urlArgs。

urlArgs:RequireJS獲取資源時附加在URL後面的額外的query參數。

示例:

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

在開發中這很有用,但記得在部署到生成環境之前移除它。

4. 從其他包中加載模塊

RequireJS支持從CommonJS包結構中加載模塊,但需要一些額外的配置。

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

1. name : 包名(用於模塊名/前綴映射)。

2. location : 磁盤上的位置。位置是相對於配置中的baseUrl值,除非它們包含協議或以“/”開頭。

3. main : 當以“包名”發起require調用後,所應用的一個包內的模塊。

默認為“main”,除非在此處做了另外設定。

該值是相對於包目錄的。

例子:

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);
}
});

這種從其他包加載模塊的方式,我感覺有兩個怪異地方(我不是很明白):

1. 其他包裡面的模塊引用其他模塊的寫法,使用者反而影響模塊的寫法?

2. 其他包裡面的main.js好像沒有用了,沒內容都沒問題。

以上內容是小編給大家介紹的RequireJS使用注意細節,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved