資訊專欄INFORMATION COLUMN
摘要：他僅需簡單地通過一個標簽發起請求，是實現跨域服務調用一種公認手段。為了在中使用服務，須要將參數的值指定為。該示例中，的參數為，因此告訴將響應包裹到一個中
加載JavaScript文件
RequireJS的目的是鼓勵代碼的模塊化，它使用了不同于傳統script標簽的腳本加載步驟?？梢杂盟鼇砑铀佟灮a，但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地址。
RequireJs以一個相對于baseUrl的地址來加載所有的代碼。頁面頂層script標簽含有一個特殊屬性data-main,require.js使用它來啟動腳本加載過程，而baseUrl一般設置到與該屬性相一致的目錄。
baseUrl亦可通過RequireJS config手動設置。如果沒有顯式指定config及data-main,則默認的baseUrl為包含RequireJS的那個HTML頁面的所屬目錄。
//app.js
require.config({
baseUrl:"js/lib",
paths:{
app:"../app"
}
});
require(["jquery","canvas","app/sub"],function($,canvas,sub){
//....
})
注意在示例中，三方庫如Jquery沒有將版本號包含在它們的文件名中。我們建議將版本信息放置在多帶帶的文件中進行跟蹤。
理想狀況下，沒個加載的腳本都是通過define()來定義的一個模塊；但是有些瀏覽器全局變量注入型的傳統/遺留庫并沒有使用define()來定義它們的依賴關系，你必須為此使用shim config來指明它們的依賴關系。如果你沒有指明依賴關系，加載可能報錯。這是因為基于速度的原因,srequireJS會異步地以無序的形式加載這些庫。
require.js在加載的時候會檢查data-main屬性：
你可以在data-main指向的腳本中設置模板加載選項，然后加載第一個應用模塊。注意：你再main.js中所這是的腳本是異步加載的。所以如果你在頁面中配置了其它JS加載，則不能保證它們所依賴的JS已經加載成功。
//main.js
require.config({
paths:{
foo:"libs/foo-1.1.3"
}
});
//other.js
require(["foo"],function(foo){})
定義模塊
模塊不同于傳統的腳本文件，它良好的定義了一個作用域來避免全局名稱空間污染。它可以顯式的列出其依賴關系，并以函數參數的形式將這些依賴進行注入，而無需引用全局變量。requireJS的模塊是模塊模式的一個擴展，其好處是無需全局引用其它模塊。
RequireJs模塊語法允許它盡快地加載多個模塊，雖然加載的順序不定，但依賴的順序最終是正確的。同時因為無需創建全局變量，甚至可以做到在同一頁面上同時加載同一模塊的不同版本。
如果一個模塊僅含值對，沒有任何依賴，則在define()中定義這些值就好了：
define({
color:"black",
size:"unisize"
})
如果一個模塊沒有任何依賴，但需要一個setup工作的函數，則在define()中定義該函數，并將其傳給define():
define(function(){
return{
color:"black",
size:"unisize"
}
})
如果模塊存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，在模塊的所有依賴加載完畢后，該函數會被調用來定義該模塊，因此該模塊應該返回一個定義了本模塊的object。依賴關系會以參數的形式注入到該函數上，參數列表與依賴名稱列表一一對應。
define(["./cart","./inventory"],function(cart,inventory){
return{
color:"blue",
size:"large",
addToCart:function(){
inventory.decrement(this);
cart.add(this);
}
}
})
對模塊的返回值類型并沒有強制為一定是個object，任何函數的返回值都是允許的。此處是一個返回了函數的模塊定義：
define(["my/cat","my/inventory"],{
function(cart,inventory){
return function(title){
return title?(window.title = title):inventory.storeName+""+cart.name;
}
}
})
define()中的相對模塊名：為了可以在define()內部使用諸如require("./relative/name")的調用以正確解析相對名稱，記得將require本身作為一個依賴注入到模塊中：
define(["require","./relative/name"],funciton(require){
var mod = require("./relative/name")
})
或者更好地，使用下述轉換為CommonJS模塊所設的更短的語法：
define(function(require){
var mod = require("./relative/name")
})
相對路徑在一些場景下格外有用，例如：為了以便于將代碼共享給其他人或項目，你在某個目錄下創建一些模塊。你可以訪問模塊的相鄰模塊，無需知道該目錄的名稱。
生成相對于模塊的URL地址：你可能需要生成一個相對于模塊的URL地址。你可以將require作為一個依賴注入進來，然后調用require.toUrl()以生成URL:
define(["require"],function(require){
var cssUrl = require.toUrl("./style.css")
})
如果你定義了一個循環依賴（a依賴b，b同時依賴a），則在這種情形下當b的模塊函數被調用的時候，它會得到一個undefined的a。b可以在模塊已經定義好后用require()方法再獲取(記得將require作為依賴注入進來)：
//b.js
define(["require","a"],function(require,a){
return function(title){
return require("a").doSomething();
}
})
一般說你無需使用require()去獲取一個模塊，而是應當使用注入到模塊函數參數中的依賴。循環依賴比較罕見，它也是一個重構代碼重新設計的i警示燈。
如果你熟悉CommonJS，你可以考慮使用exports為模塊建立一個空object，該object可以立即被其它模塊引用。再循環依賴的兩頭都如此操作之后，你就可以完全持有其它模塊了。這種方法僅在每個模塊都是輸出object作為模塊值的時候有效，換成函數無效。
//b.js
define(function(require,exports,module){
var a = require("a");
exports.foo = function(){
return a.bar();
}
})
或則，如果你使用依賴注入數組的步驟，則可用注入特殊exports來解決：
//b.js
define(["a","exports"],function(a,exports){
exports.foo = function(){
return a.bar();
}
});
JSONP是在javascript中服務調用的一種方式。他僅需簡單地通過一個script標簽發起HTTP GET請求，是實現跨域服務調用一種公認手段。
為了在RequireJS中使用JSON服務，須要將callback參數的值指定為define。這意味著你可將獲取到的JSONP URL的值看成是一個模塊定義。
下面是一個調用JSONP API端點的示例。該示例中，JSONP的callback參數為"callback"，因此"callback=define"告訴API將JSON響應包裹到一個"define()"中：
require(["http://example.com/api/data.json?callback=define"],
function (data) {
//The data object will be the API response for the
//JSONP data call.
console.log(data);
}
);
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100414.html
摘要：如果有疑惑的地方，歡迎討論，我是初學，希望能切磋和得到指點加載會阻塞頁面加載默認異步加載文件方法一把放到頁面底部加載方法二支持定義全局相對路徑方法一自定義屬性指定網頁程序的主模塊文件定義整個網頁代碼的入口文件的相對位置，以后此文件 如果有疑惑的地方，歡迎討論，我是初學，希望能切磋和得到指點； js加載會阻塞頁面加載： //requirejs默認異步加載js文件； 方法一...
摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范?？赡苁俏磥砟K化解決方案的首選。 本文章記錄本人在學習 JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。 在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我...
摘要：本文源碼為版本。的代碼結構也是一個很經典的定義結構構造函數實例修改函數原型共享實例方法，它提供事件通道上事件的訂閱撤消訂閱調用。 前言 cordova(PhoneGap) 是一個優秀的經典的中間件框架，網上對其源代碼解讀的文章確實不多，本系列文章試著解讀一下，以便對cordova 框架的原理理解得更深入。本文源碼為cordova android版本6.1.2。 源碼結構 我們使用IDE...
摘要：加載的模塊會以參數形式傳入該函數，從而在回調函數內部就可以使用這些模塊。異步加載，和，瀏覽器不會失去響應它指定的回調函數，只有前面的模塊都加載成功后，才會運行，解決了依賴性的問題。插件，可以讓回調函數在頁面結構加載完成后再運行。 這次主要是對《高性能JavaScript》一書的讀書筆記，記錄下自己之前沒有注意到或者需要引起重視的地方 第一章 加載和執行 js代碼在執行過程中會阻塞瀏覽...
摘要：讀不順中文文檔，對應中文文檔，自行翻譯的如果有問題錯誤，歡迎指點修改配置選項方法一在頂級頁面或頂級腳本文件沒有定義模塊的腳本文件中配置方法二在主模塊中配置缺點主模塊異步加載，多入口的話，會隨機報錯方法三在調用之前，將配置定義為全局變量配置在 讀不順中文文檔，對應中文文檔，自行翻譯的……如果有問題/錯誤，歡迎指點； 修改配置選項： 方法一、 requi...
閱讀 2542·2021-10-11 10:58
閱讀 1020·2019-08-29 13:58
閱讀 1661·2019-08-26 13:32
閱讀 830·2019-08-26 10:40
閱讀 3256·2019-08-26 10:18
閱讀 1756·2019-08-23 14:18
閱讀 1106·2019-08-23 10:54
閱讀 435·2019-08-22 18:39
