基于RequireJS和JQuery的模塊化編程——常見問題全面解析
由于js的代碼邏輯越來越重，一個(gè)js文件可能會(huì)有上千行，十分不利于開發(fā)與維護(hù)。最近正在把邏輯很重的js拆分成模塊，在一頓糾結(jié)是使用requirejs還是seajs的時(shí)候，最終還是偏向于requirejs。畢竟官方文檔比較專業(yè)嘛...
不過即便是有完整的官方文檔，仍然遇到不少的問題，比如jquery-ui的使用。
下面就循序漸進(jì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ì)比較高，但是在使用的過程中可能會(huì)取執(zhí)行js，因此可能會(huì)出現(xiàn)卡頓，影響用戶體驗(yàn)（由于我也沒試過，要是說錯(cuò)了，別見怪）。而requirejs則是在一開始就把所有加載的js都執(zhí)行，這時(shí)，如果你的模塊中有一些執(zhí)行方法，它們可能并不會(huì)按照你想的順序執(zhí)行。
因此，如果已經(jīng)習(xí)慣了異步編程，并且希望有完善的文檔推薦使用requirejs；如果是想對(duì)執(zhí)行順序有特殊要求，又方便開發(fā)，那么也可以使用seajs。
如何解決requirejs中循環(huán)依賴問題
如果你定義的某個(gè)a模塊使用到了b模塊，而b模塊又使用了a模塊，那么就會(huì)拋出循環(huán)依賴的異常。
比如，我這里寫了一個(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: _
按照官方文檔的說法，這種屬于設(shè)計(jì)的問題，應(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開始的。
關(guān)于循環(huá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的插件，比較常見的做法都是傳入一個(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();
}
}
});
不過，執(zhí)行上面的代碼，會(huì)報(bào)一個(gè)異常：
Uncaught TypeError: _table.dataTable is not a function
這是因?yàn)椋琩ataTables并不是一個(gè)require風(fēng)格的模塊，因此直接這樣引入，并不會(huì)執(zhí)行它內(nèi)部的匿名函數(shù)?？梢孕薷乃哪涿瘮?shù)，傳入$對(duì)象，在最后一行：
*/ return $.fn.dataTable; //}));原來是這樣 }($)));//這里增加執(zhí)行這個(gè)匿名函數(shù)，并且傳入$對(duì)象。 }(window, document));
這也是在網(wǎng)上搜的方法，原理奈何經(jīng)驗(yàn)不足....
樣例代碼可以參考云盤,由于引入的資源不是很全，所以會(huì)報(bào)錯(cuò)，可以直接忽略，因?yàn)槟軋?zhí)行UI插件就表示已經(jīng)成功了。
requirejs使用jquery-ui的問題
由于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();常見場(chǎng)景：
比如我在頁(yè)面中使用了jquery-steps這個(gè)UI插件，它會(huì)對(duì)頁(yè)面進(jìn)行重新渲染。這就導(dǎo)致我最開始綁定的事件都失效了....只有推遲到這個(gè)js重構(gòu)完頁(yè)面，再綁定才行。
以上這篇基于RequireJS和JQuery的模塊化編程——常見問題全面解析就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
- 在Html中使用Requirejs進(jìn)行模塊化開發(fā)實(shí)例詳解
- 使用requirejs模塊化開發(fā)多頁(yè)面一個(gè)入口js的使用方式
- 詳解JavaScript模塊化開發(fā)
- JavaScript的模塊化開發(fā)框架Sea.js上手指南
- Seajs 簡(jiǎn)易文檔 提供簡(jiǎn)單、極致的模塊化開發(fā)體驗(yàn)
- JavaScript模塊化開發(fā)之SeaJS
- 了解Javascript的模塊化開發(fā)
- javascript 構(gòu)建模塊化開發(fā)過程解析
- 深入探尋seajs的模塊化與加載方式
- seajs和requirejs模塊化簡(jiǎn)單案例分析
- 基于RequireJS和JQuery的模塊化編程日常問題解析
- JavaScript 模塊化開發(fā)實(shí)例詳解【seajs、requirejs庫(kù)使用】
相關(guān)文章
解決微信瀏覽器Javascript無法使用window.location.reload()刷新頁(yè)面
這篇文章主要介紹在微信瀏覽器Javascript無法使用window.location.reload()刷新頁(yè)面的解決方法，比較實(shí)用，需要的朋友可以參考下。2016-06-06
ES6代碼轉(zhuǎn)ES5詳細(xì)教程(babel安裝使用教程)
Babel 是一個(gè)廣泛使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)為 ES5 代碼，從而在老版本的瀏覽器執(zhí)行，這意味著，你可以用 ES6 的方式編寫程序，又不用擔(dān)心現(xiàn)有環(huán)境是否支持，這篇文章主要介紹了ES6代碼轉(zhuǎn)ES5教程(babel安裝使用教程),需要的朋友可以參考下2023-01-01
javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法
這篇文章主要介紹了javascript 刪除數(shù)組元素和清空數(shù)組的簡(jiǎn)單方法的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹了了解Javascript的模塊化開發(fā),本文講解了為什么需要模塊化開發(fā),模塊化開發(fā)的形成原因等內(nèi)容,需要的朋友可以參考下2015-03-03
本篇文章主要介紹了js在輸入框屏蔽按鍵,只能鍵入數(shù)字的示例代碼。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
詳解JavaScript如何創(chuàng)建一個(gè)非自動(dòng)播放的GIF網(wǎng)絡(luò)組件
這篇文章主要為大家介紹了如何利用JavaScript創(chuàng)建一個(gè)允許您的用戶決定是否要播放gif的Web組件，文中的實(shí)現(xiàn)步驟講解詳細(xì)，需要的可以參考一下2022-02-02
JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過javascript針對(duì)table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-09-09
這篇文章主要介紹了js+canvas簡(jiǎn)單繪制圓圈的方法,涉及JavaScript調(diào)用canvas組件實(shí)現(xiàn)簡(jiǎn)單圖形繪制的相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了Taro集成Redux快速上手的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)根據(jù)iphone屏幕方向調(diào)用不同樣式表的方法,涉及javascript針對(duì)樣式表動(dòng)態(tài)操作的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-07-07