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