基于RequireJS和JQuery的模塊化編程日常問(wèn)題解析
由于js的代碼邏輯越來(lái)越重,一個(gè)js文件可能會(huì)有上千行,十分不利于開(kāi)發(fā)與維護(hù)。最近正在把邏輯很重的js拆分成模塊,在一頓糾結(jié)是使用requirejs還是seajs的時(shí)候,最終還是偏向于requirejs。畢竟官方文檔比較專業(yè)嘛...
不過(guò)即便是有完整的官方文檔,仍然遇到不少的問(wèn)題,比如jquery-ui的使用。
下面就循序漸進(jìn)的講解一下我遇到的問(wèn)題,以及解決的辦法。
關(guān)于AMD和CMD的理解
AMD(異步模塊定義)的典型就是requirejs,而CMD(通用模塊定義)的典型是淘寶的seajs。
他們的相同點(diǎn)是,都會(huì)異步的加載js。但是不同點(diǎn)是,require.js加載完會(huì)立即執(zhí)行;而seajs則是等到進(jìn)入主函數(shù)需要執(zhí)行時(shí)才執(zhí)行。
如果使用seajs初始的加載執(zhí)行效率會(huì)比較高,但是在使用的過(guò)程中可能會(huì)取執(zhí)行js,因此可能會(huì)出現(xiàn)卡頓,影響用戶體驗(yàn)(由于我也沒(méi)試過(guò),要是說(shuō)錯(cuò)了,別見(jiàn)怪)。而requirejs則是在一開(kāi)始就把所有加載的js都執(zhí)行,這時(shí),如果你的模塊中有一些執(zhí)行方法,它們可能并不會(huì)按照你想的順序執(zhí)行。
因此,如果已經(jīng)習(xí)慣了異步編程,并且希望有完善的文檔推薦使用requirejs;如果是想對(duì)執(zhí)行順序有特殊要求,又方便開(kāi)發(fā),那么也可以使用seajs。
如何解決requirejs中循環(huán)依賴問(wèn)題
如果你定義的某個(gè)a模塊使用到了b模塊,而b模塊又使用了a模塊,那么就會(huì)拋出循環(huán)依賴的異常。
比如,我這里寫(xiě)了一個(gè)循環(huán)依賴的例子。
主頁(yè)面:
<!DOCTYPE html> <html> <head> </head> <body> <script data-main="test.js" src="lib/require.js"></script> </body> </html>
主方法:
requirejs.config({ baseUrl: './' }); requirejs(['js/a'],function (a){ console.log("in test"); a.testfromb(); });
a.js模塊中,atest()方法提供b調(diào)用、testfromb()方法調(diào)用b的方法
define(function(require){ var b = require("js/b"); console.log("in a"); return { atest:function(){ console.log("test in a"); }, testfromb:function(){ console.log("testfromb in a"); b.btest(); } } });
b模塊中,調(diào)用了a的方法。
define(function(require){ var a = require("js/a"); console.log("in b"); return { btest:function(){ console.log("test in b"); a.atest(); } } });
這樣相當(dāng)于a調(diào)用了b的方法,但是b的方法依賴于a的方法,這就造成了循環(huán)依賴。瀏覽器會(huì)提示錯(cuò)誤:
Uncaught Error: Module name "js/a" has not been loaded yet for context: _
按照官方文檔的說(shuō)法,這種屬于設(shè)計(jì)的問(wèn)題,應(yīng)該盡量避免。那么如果避免不了該怎么辦呢?可以這樣修改b模塊:
define(function(require){ // var a = require("js/a"); console.log("in b"); return { btest:function(){ console.log("test in b"); require("js/a").atest(); } } });
這里是等到執(zhí)行atest()方法時(shí),才加載a模塊。這時(shí),a模塊很顯然已經(jīng)加載完了 ??梢钥吹捷敵龅男畔ⅲ?/p>
in b a.js:3 in a test.js:6 in test a.js:9 testfromb in a b.js:6 test in b a.js:6 test in a
同樣的方式,修改a可能就不好使了。這時(shí)因?yàn)槟K加載的順序是從b開(kāi)始的。
關(guān)于循環(huán)依賴的源碼可以參考云盤(pán)
如何在requirejs中使用jquery
如果想要使用jquery比較簡(jiǎn)單,直接在main.js中添加對(duì)應(yīng)的依賴即可:
requirejs.config({ baseUrl: './', paths:{ 'jquery':'lib/jquery' } }); requirejs(['jquery'], function ($){ $('#test').html('test'); });
如何在requirejs中使用jquery插件
對(duì)于jquery的插件,比較常見(jiàn)的做法都是傳入一個(gè)jquery的對(duì)象,在這個(gè)jquery對(duì)象的基礎(chǔ)上添加插件對(duì)應(yīng)的方法。
首先需要添加jquery插件的依賴,這里用兩個(gè)插件舉例子——jquery-ui和jquery-datatables
requirejs.config({ baseUrl: './', paths:{ 'jquery':'lib/jquery', 'jquery-ui':'lib/jquery-ui', 'jquery-dataTables':'lib/jquery.dataTables' }, shim:{ 'jquery-ui':['jquery'], 'jquery-dataTables':['jquery'] } }); requirejs(['jquery','jquery-ui','jquery-dataTables'], function ($){ .... });
由于jquery插件都需要依賴于jquery,因此可以在shim中指定依賴關(guān)系。
除了上面這種使用方法,也可以使用commonJS風(fēng)格的調(diào)用:
define(function(require){ var $ = require('jquery'); require('jquery-ui'); require('jquery-dataTables'); //下面都是測(cè)試,可以忽略 var _test = $('#test'); _test.selectmenu({ width : 180, change : function(event, ui) { console.log('change'); } }); return { test:function(){ //測(cè)試jquery-ui _test.append($('<option>test1</option><option>test1</option>')); _test.selectmenu("refresh"); //測(cè)試jquery-datatables var _table = $('table'); _table.dataTable(); } } });
不過(guò),執(zhí)行上面的代碼,會(huì)報(bào)一個(gè)異常:
Uncaught TypeError: _table.dataTable is not a function
這是因?yàn)?,dataTables并不是一個(gè)require風(fēng)格的模塊,因此直接這樣引入,并不會(huì)執(zhí)行它內(nèi)部的匿名函數(shù)??梢孕薷乃哪涿瘮?shù),傳入$對(duì)象,在最后一行:
*/ return $.fn.dataTable; //}));原來(lái)是這樣 }($)));//這里增加執(zhí)行這個(gè)匿名函數(shù),并且傳入$對(duì)象。 }(window, document));
這也是在網(wǎng)上搜的方法,原理奈何經(jīng)驗(yàn)不足....
樣例代碼可以參考云盤(pán),由于引入的資源不是很全,所以會(huì)報(bào)錯(cuò),可以直接忽略,因?yàn)槟軋?zhí)行UI插件就表示已經(jīng)成功了。
requirejs使用jquery-ui的問(wèn)題
由于requirejs加載js文件后會(huì)立即執(zhí)行,如果你的jquery ui 插件需要刷新DOM頁(yè)面,那么可能會(huì)導(dǎo)致頁(yè)面的事件失效。
比如,你的模塊在加載后,對(duì)頁(yè)面的某個(gè)元素$('#test')綁定了click事件。但是使用了某個(gè)UI插件,這個(gè)插件會(huì)重新渲染DOM元素,test對(duì)應(yīng)的click事件就失效了。
解決辦法:
•把事件綁定推遲到DOM元素渲染完后再手動(dòng)觸發(fā)綁定;
•也可以使用事件捕獲代替DOM元素的事件綁定(太麻煩了...不推薦)。
比如在DOM重構(gòu)的JS模塊中,執(zhí)行渲染的代碼下面:
require("xxx").initEvents();
常見(jiàn)場(chǎng)景:
比如我在頁(yè)面中使用了jquery-steps這個(gè)UI插件,它會(huì)對(duì)頁(yè)面進(jìn)行重新渲染。這就導(dǎo)致我最開(kāi)始綁定的事件都失效了....只有推遲到這個(gè)js重構(gòu)完頁(yè)面,再綁定才行。
以上所述是小編針對(duì)RequireJS和JQuery的模塊化編程日常問(wèn)題解析的全部敘述,希望對(duì)大家有所幫助!
- 在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)實(shí)例詳解
- 使用requirejs模塊化開(kāi)發(fā)多頁(yè)面一個(gè)入口js的使用方式
- 詳解JavaScript模塊化開(kāi)發(fā)
- JavaScript的模塊化開(kāi)發(fā)框架Sea.js上手指南
- Seajs 簡(jiǎn)易文檔 提供簡(jiǎn)單、極致的模塊化開(kāi)發(fā)體驗(yàn)
- JavaScript模塊化開(kāi)發(fā)之SeaJS
- 了解Javascript的模塊化開(kāi)發(fā)
- javascript 構(gòu)建模塊化開(kāi)發(fā)過(guò)程解析
- 深入探尋seajs的模塊化與加載方式
- seajs和requirejs模塊化簡(jiǎn)單案例分析
- 基于RequireJS和JQuery的模塊化編程——常見(jiàn)問(wèn)題全面解析
- JavaScript 模塊化開(kāi)發(fā)實(shí)例詳解【seajs、requirejs庫(kù)使用】
相關(guān)文章
JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的顏色實(shí)時(shí)漸變效果,結(jié)合實(shí)例形式分析了JavaScript結(jié)合時(shí)間函數(shù)定時(shí)觸發(fā)動(dòng)態(tài)改變頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-03-03高性能JavaScript模板引擎實(shí)現(xiàn)原理詳解
這篇文章主要介紹了JavaScript模板引擎實(shí)現(xiàn)原理詳解,本文著重講解artTemplate模板的實(shí)現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下2015-02-02移動(dòng)端H5頁(yè)面返回并刷新頁(yè)面(BFcache)的方法
這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5頁(yè)面返回并刷新頁(yè)面(BFcache)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下2015-12-12JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車(chē)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)玩轉(zhuǎn)風(fēng)車(chē),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02