摘要:讀不順中文文檔,對應中文文檔,自行翻譯的如果有問題錯誤,歡迎指點修改配置選項方法一在頂級頁面或頂級腳本文件沒有定義模塊的腳本文件中配置方法二在主模塊中配置缺點主模塊異步加載,多入口的話,會隨機報錯方法三在調用之前,將配置定義為全局變量配置在
讀不順中文文檔,對應中文文檔,自行翻譯的……如果有問題/錯誤,歡迎指點;
修改配置選項:
方法一、 方法二、 在主模塊中配置; 缺點:主模塊異步加載,多入口的話,會隨機報錯; 方法三、
支持的配置選項:
baseUrl:模塊查找的根路徑;
//目的:不必在重復相同的上級路徑,只需考慮引用基路徑下的哪個腳本 //注意:只要以相對路徑設置baseUrl,是相對于引用requireJS的HTML位置,而不是相對于main.js require.config({ baseUrl: "/another/path" }); 以下路徑文件不會基于baseUrl查找:*.js /** http://... 默認值:不設置該屬性的話,默認是加載require.js的HTML所在的位置;
paths:module ID & 路徑映射
//目的:不再使用路徑調用腳本,而僅僅通過module ID調用; //針對于不在baseUrl/在baseUrl子孫文件下的模塊進行映射; //路徑映射最后一節應該是一個文件夾,而不是腳本文件; //映射是基于baseUrl的,除非以‘/’或‘http://’開始; require.config({ baseUrl: "/another/path", paths: { "some": "some/v1.0", "others":["http://files...","location/files"] } }); /*屬性值為鍵/值對: 鍵表示module ID 值為路徑/路徑列表 *(路徑列表為數組,當第一項獲取不到的時候,加載第二項...) *路徑列表中,文件地址指向的是同一文件,只是做備選; */ /* *如果paths屬性的值中的路徑腳本文件有自有名,該值的鍵名的值為undefined,而不是該腳本文件; *只能通過自有名來引用該路徑的腳本文件; */
注意:一些命名的第三方庫(如jquery),不能給它改名,鍵名不能設置jquery以外的名字,否則找不到jquery庫;
map:調用模塊文件 & 模塊映射------適用于不同模塊調用不同版本的腳本;
//目的:不再使用路徑調用腳本,而僅僅通過module ID調用; //只應用于真正的AMD模塊---調用define()定義并匿名的模塊 //map屬性只能用純module IDs作為鍵名------純module IDs?----------------以paths鍵名開始的路徑? //構建優化不會破壞map配置,即構建后仍然可用; requirejs.config({ map: { "*": { "foo": "foo1.2" }, "some/newmodule": { "foo": "foo1.2" }, "some/oldmodule": { "foo": "foo1.0" } } });
//抱怨下,map我理解的官文是調用不同的模板,但對jquery不行……
如果要引用不同版本的jquery,請看這里
bundles:配置一個腳本文件中的多個模塊------未實踐
//目的:將一個腳本中的多個模塊暴露出來,使其可以直接被require(); //推薦一個腳本文件一個模塊; //一個腳本文件一個模塊,模塊會自動綁定到module ID上; *一個腳本多個模塊,模塊需要手動的將模塊名綁定到module ID上; requirejs.config({ bundles: { "primary": ["main", "util", "text", "text!template.html"], "secondary": ["text!secondary.html"] } }); //Note that the keys and values are module IDs, not path segments.
shim:兼容不能用define()來聲明依賴的傳統“瀏覽器全局”腳本
/* *按我理解: *不兼容define(),不符合AMD規范,沒有像define()一樣,最終return 對象/函數; *所以需要用shim將其中的某個全局變量exports給requirejs,才能被define()和require()引用; * *如果需要暴露多個全局變量,就不能用exports,而用init函數 *init:function(){
return{
}
*} */ //僅僅起到聲明依賴關系的作用,但不會加載依賴-----可以理解為shim只說不做; //如果要加載shim指定的依賴,仍需要require()/define()調用; //要求RequireJS2.1.0以上版本 //RequireJS有wrapShim build 屬性能自動包裹shimmed code在define()中升級為AMD,但不保證能正常執行; requirejs.config({ /* *shim只能應用到非AMD規范的腳本文件上; *應用到符合AMD規范的腳本文件上不起作用; */ shim: { /* *shim屬性值為鍵/值對:鍵值為module ID; *如果backbone、underscore、foo在baseUrl文件中,則不需要paths配置; *否則,使用paths配置 值(文件路徑) 到 鍵名 */ "backbone": { /* *deps聲明依賴關系; *deps的值只能是非AMD規范的腳本或者“沒有依賴關系且建立全局變量后調用define()的AMD庫”; *如果shim用AMD模塊作為依賴的話,會有錯誤發生--------因為shim對符合AMD規范的腳本不起作用; */ deps: ["underscore", "jquery"], //將backbone傳統腳本的Backbone函數暴露出來,類似于define()中的return; exports: "Backbone" }, "underscore": { exports: "_" }, "foo": { deps: ["bar"], exports: "Foo", init: function (bar) { //初始化傳統腳本; return this.Foo.noConflict(); } }, //像jQuery插件不需要暴露任何全局變量,則只需聲明依賴即可; //若要判斷腳本是否被加載,需要聲明exports "jquery.scroll":["jquery"] } });
那么,怎么知道暴漏什么屬性、對象或者方法呢?
哈哈,我的做法是,看源碼最后一行--------一般看return什么就根據需要暴漏什么;
config:設置application級別的配置信息;-------未實踐
//config的屬性值為鍵/值對; requirejs.config({ config: { "bar": { size: "large" }, "baz": { color: "blue" } } }); define(function () { //在模塊中作為module.config()的屬性來讀取配置信息; var size = module.config().size; }); //將配置信息傳遞給一個包package requirejs.config({ //Pass an API key for use in the pixie package"s //main module. config: { "pixie/index": { apiKey: "XJKDLNS" } }, //Set up config for the "pixie" package, whose main //module is the index.js file in the pixie folder. packages: [ { name: "pixie", main: "index" } ] });
nodeIdCompat:node module ID兼容-------未實踐
//Node中認為模塊ID example.js和example是相同的------通過設置true認為是不同的; //而在RequireJS中,example.js和example是不同的 require.config({ nodeIdCompat:true //如果通過npm加載模塊的話,需要設置為true-----只對‘.js’后綴起作用; })
waitSeconds:設置超時時間;-------未實踐
//目的:設置加載腳本超時時間,超時后放棄加載; //默認7s; //設置0禁止超時; require.config({ waitSeconds:0 })
deps:在require.js加載之前,定義全局對象require設置依賴環境-------未實踐
callback:在deps加載完成后執行的程序-------未實踐
enforceDefine:嚴格define()或shim exports -------未實踐
require.config({ enforceDefine:true //設置為true-----加載的腳本必須是通過define()定義或者配置shim有exports值,否則拋出錯誤; })
xhtml:創建script元素-------未實踐
require.config({ xhtml:true //設置為true-----調用document.createElementNS()創建script元素; })
urlArgs:本地開發環境應對強緩存方案;-------未實踐
//添加額外的查詢字符串到RequireJS獲取資源的URLs上; //部署代碼的時候要確保刪除此配置; requirejs.config({ //module ID和URL作為參數; urlArgs: function(id, url) { var args = "v=1"; if (url.indexOf("view.html") !== -1) { args = "v=2" } //返回字符串添加到URL的后面; return (url.indexOf("?") === -1 ? "?" : "&") + args; } });
scriptType:設置腳本type屬性-------未實踐
requirejs.config({ //RequireJS添加的script標簽type默認為‘text/javascript’; scriptType: ‘text/javascript;version=1.8’ });
skipDataMain:忽略 data-main屬性;-------未實踐
requirejs.config({ //設置為true,跳過data-main屬性掃描加載模塊; //如果兩個加載RequireJS的程序有嵌套關系,被嵌套的不應該有data-main屬性???????沒懂 skipDataMain: true });
疑問:求各位大神解答
哪些腳本符合AMD規范; 哪些AMD庫call define() after they also create a global (like jQuery or lodash) 怎么用mainConfigFile build option來指定shim config 怎么生成依賴關系表; map屬性只能用純module IDs作為鍵名------純module IDs?----------------以paths鍵名開始的路徑? bundles----Note that the keys and values are module IDs--------------values的module IDs是從哪來的,define("module IDs")?????? context:怎么用 package:怎么用 skipDataMain:如果兩個加載RequireJS的程序有嵌套關系,被嵌套的不應該有data-main屬性???????沒懂
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79088.html
摘要:如果有疑惑的地方,歡迎討論,我是初學,希望能切磋和得到指點加載會阻塞頁面加載默認異步加載文件方法一把放到頁面底部加載方法二支持定義全局相對路徑方法一自定義屬性指定網頁程序的主模塊文件定義整個網頁代碼的入口文件的相對位置,以后此文件 如果有疑惑的地方,歡迎討論,我是初學,希望能切磋和得到指點; js加載會阻塞頁面加載: //requirejs默認異步加載js文件; 方法一...
摘要:最近一段時間在學習,由于覺得直接使用它需要加載很多的文件,因此想使用來實現異步加載,并動態注入控制器。手動啟動,特別說明此處的不是那個框架,而是的一個手動啟動框架的函數中完成了各模塊的初始化,并且引入了。 最近一段時間在學習angularjs,由于覺得直接使用它需要加載很多的js文件,因此想使用requirejs來實現異步加載,并動態注入控制器。簡單搜索了下發現好多教程寫的都很復雜,所...
摘要:工作方式為使用將每一個依賴加載為一個標簽。然后在被瀏覽器加載完畢后,便會自動繼承之前配置的參數。可以單獨定義鍵值隊數據,作為配置文件來使用還可以定義依賴的關系壓縮使用來進行壓縮時,需要指定文件。在鏈接中有很好的示例,可以參看學習。 1、簡介 官方對requirejs的描述:RequireJS is a JavaScript file and module loader. It is o...
摘要:他僅需簡單地通過一個標簽發起請求,是實現跨域服務調用一種公認手段。為了在中使用服務,須要將參數的值指定為。該示例中,的參數為,因此告訴將響應包裹到一個中 加載JavaScript文件 RequireJS的目的是鼓勵代碼的模塊化,它使用了不同于傳統script標簽的腳本加載步驟。可以用它來加速、優化代碼,但其主要目的還是為了代碼的模塊化。它鼓勵在使用腳本時以module ID替代URL地...
摘要:概述是一款遵循規范協議的模塊加載器,不但能在瀏覽器端充分利用,同樣能在其他的運行時環境,比如和。使用像這樣的模塊加載器能提高代碼的質量和開發速度。一般放在頁面的入口出,用來加載其他的模塊。 RequireJS概述 RequireJS是一款遵循AMD規范協議的JavaScript模塊加載器, 不但能在瀏覽器端充分利用,同樣能在其他的JavaScript運行時環境, 比如Rhino和No...
閱讀 1936·2021-11-15 17:58
閱讀 2131·2021-10-19 11:45
閱讀 3482·2021-09-02 15:40
閱讀 2595·2021-07-25 10:50
閱讀 3745·2019-08-30 15:56
閱讀 3146·2019-08-30 12:44
閱讀 1028·2019-08-26 13:38
閱讀 1869·2019-08-23 18:29