RequireJS使用注意細(xì)節(jié)
RequireJS介紹
RequireJS由James Burke創(chuàng)建,他也是AMD規(guī)范的創(chuàng)始人。
RequireJS會讓你以不同于往常的方式去寫JavaScript。你將不再使用script標(biāo)簽在HTML中引入JS文件,以及不用通過script標(biāo)簽順序去管理依賴關(guān)系。
RequireJS是一個非常小巧的JavaScript模塊載入框架,是AMD規(guī)范最好的實(shí)現(xiàn)者之一。最新版本的RequireJS壓縮后只有14K,堪稱非常輕量。它還同時可以和其他的框架協(xié)同工作,使用RequireJS必將使您的前端代碼質(zhì)量得以提升。
使用RequireJS做異步模塊加載,有幾點(diǎn)值得注意的地方:
1.模塊定義兩種寫法
1. 存在依賴的函數(shù)式定義
如果模塊存在依賴:則第一個參數(shù)是依賴的名稱數(shù)組;第二個參數(shù)是函數(shù),在模塊的所有依賴加載完畢后,該函數(shù)會被調(diào)用來定義該模塊,因此該模塊應(yīng)該返回一個定義了本模塊的object。依賴關(guān)系會以參數(shù)的形式注入到該函數(shù)上,參數(shù)列表與依賴名稱列表一一對應(yīng)。
define(['a'], function(aJ) { var hello = function(){ aJ.hello('i am c.js'); } return { hello : hello } });
PS: 對模塊的返回值類型并沒有強(qiáng)制為一定是個object,任何函數(shù)的返回值都是允許的。
2. CommonJS模塊格式定義
require : 用來引入依賴其他模塊方法。
exports : 導(dǎo)出模塊變量或方法的對象。
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會覆蓋調(diào)前面的exports /*return { hello : hello2 }*/ });
PS:return 對象和exports不能一起用,return會覆蓋調(diào)前面的exports。
下面是調(diào)用后打印的信息:
exports:可以看出exports是module的一個屬性。
module :里面包括了該模塊的別名、uri、導(dǎo)出對象、config信息方法。
config :我們常常需要將配置信息傳給一個模塊。這些配置往往是application級別的信息,需要一個手段將它們向下傳遞給模塊。
在RequireJS中,基于requirejs.config()的config配置項(xiàng)來實(shí)現(xiàn)。
2. 警惕單例變量
警惕單例里變量,因?yàn)镽equireJS在require一次后,之后的require都是使用之前的緩存。所以當(dāng)模塊里面定義了一個變量后,只要在此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有緩存的功能,但是在開發(fā)的時候我們不希望它緩存,就可以在require.config設(shè)置urlArgs。
urlArgs:RequireJS獲取資源時附加在URL后面的額外的query參數(shù)。
示例:
urlArgs: "bust=" + (new Date()).getTime()
在開發(fā)中這很有用,但記得在部署到生成環(huán)境之前移除它。
4. 從其他包中加載模塊
RequireJS支持從CommonJS包結(jié)構(gòu)中加載模塊,但需要一些額外的配置。
package config可為特定的包指定下述屬性:
1. name : 包名(用于模塊名/前綴映射)。
2. location : 磁盤上的位置。位置是相對于配置中的baseUrl值,除非它們包含協(xié)議或以“/”開頭。
3. main : 當(dāng)以“包名”發(fā)起require調(diào)用后,所應(yīng)用的一個包內(nèi)的模塊。
默認(rèn)為“main”,除非在此處做了另外設(shè)定。
該值是相對于包目錄的。
例子:
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好像沒有用了,沒內(nèi)容都沒問題。
以上內(nèi)容是小編給大家介紹的RequireJS使用注意細(xì)節(jié),希望對大家有所幫助!
- 一篇文章掌握RequireJS常用知識
- 教你5分鐘學(xué)會用requirejs(必看篇)
- RequireJS入門一之實(shí)現(xiàn)第一個例子
- RequireJS多頁面應(yīng)用實(shí)例分析
- 在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
- 使用requirejs模塊化開發(fā)多頁面一個入口js的使用方式
- requirejs + vue 項(xiàng)目搭建詳解
- 在JavaScript應(yīng)用中使用RequireJS來實(shí)現(xiàn)延遲加載
- 詳解RequireJS按需加載樣式文件
- 使用RequireJS庫加載JavaScript模塊的實(shí)例教程
- RequireJS用法簡單示例
相關(guān)文章
微信小程序 組件的外部樣式externalClasses使用詳解
這篇文章主要介紹了微信小程序里 組件的外部樣式externalClasses使用詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09推薦三款不錯的圖片壓縮上傳插件(webuploader、localResizeIMG4、LUploader)
這篇文章主要為大家詳細(xì)介紹了三款不錯的圖片壓縮上傳插件,webuploader、移動端上傳插件localResizeIMG4以及LUploader)2017-04-04分享5個小技巧讓你寫出更好的 JavaScript 條件語句
在使用 JavaScript 時,我們常常要寫不少的條件語句。這里有五個小技巧,可以讓你寫出更干凈、漂亮的條件語句。需要的朋友跟隨小編一起學(xué)習(xí)吧2018-10-10原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-04-04Ajax實(shí)現(xiàn)省市區(qū)三級聯(lián)動實(shí)例代碼
這篇文章介紹了Ajax實(shí)現(xiàn)省市區(qū)三級聯(lián)動的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04