欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于RequireJS和JQuery的模塊化編程日常問題解析

 更新時間:2016年04月14日 10:02:18   作者:xingoo  
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程,感興趣的朋友一起學習吧

由于js的代碼邏輯越來越重,一個js文件可能會有上千行,十分不利于開發(fā)與維護。最近正在把邏輯很重的js拆分成模塊,在一頓糾結(jié)是使用requirejs還是seajs的時候,最終還是偏向于requirejs。畢竟官方文檔比較專業(yè)嘛...

不過即便是有完整的官方文檔,仍然遇到不少的問題,比如jquery-ui的使用。

下面就循序漸進的講解一下我遇到的問題,以及解決的辦法。

關(guān)于AMD和CMD的理解

AMD(異步模塊定義)的典型就是requirejs,而CMD(通用模塊定義)的典型是淘寶的seajs。

他們的相同點是,都會異步的加載js。但是不同點是,require.js加載完會立即執(zhí)行;而seajs則是等到進入主函數(shù)需要執(zhí)行時才執(zhí)行。

如果使用seajs初始的加載執(zhí)行效率會比較高,但是在使用的過程中可能會取執(zhí)行js,因此可能會出現(xiàn)卡頓,影響用戶體驗(由于我也沒試過,要是說錯了,別見怪)。而requirejs則是在一開始就把所有加載的js都執(zhí)行,這時,如果你的模塊中有一些執(zhí)行方法,它們可能并不會按照你想的順序執(zhí)行。

因此,如果已經(jīng)習慣了異步編程,并且希望有完善的文檔推薦使用requirejs;如果是想對執(zhí)行順序有特殊要求,又方便開發(fā),那么也可以使用seajs。

如何解決requirejs中循環(huán)依賴問題

如果你定義的某個a模塊使用到了b模塊,而b模塊又使用了a模塊,那么就會拋出循環(huán)依賴的異常。

比如,我這里寫了一個循環(huán)依賴的例子。

主頁面:

<!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();
}
}
});

這樣相當于a調(diào)用了b的方法,但是b的方法依賴于a的方法,這就造成了循環(huán)依賴。瀏覽器會提示錯誤:

Uncaught Error: Module name "js/a" has not been loaded yet for context: _ 

按照官方文檔的說法,這種屬于設(shè)計的問題,應(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()方法時,才加載a模塊。這時,a模塊很顯然已經(jīng)加載完了 。可以看到輸出的信息:

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可能就不好使了。這時因為模塊加載的順序是從b開始的。

關(guān)于循環(huán)依賴的源碼可以參考云盤

如何在requirejs中使用jquery

如果想要使用jquery比較簡單,直接在main.js中添加對應(yīng)的依賴即可:

requirejs.config({
baseUrl: './',
paths:{
'jquery':'lib/jquery'
}
});
requirejs(['jquery'],
function ($){
$('#test').html('test');
});

如何在requirejs中使用jquery插件

對于jquery的插件,比較常見的做法都是傳入一個jquery的對象,在這個jquery對象的基礎(chǔ)上添加插件對應(yīng)的方法。

首先需要添加jquery插件的依賴,這里用兩個插件舉例子——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風格的調(diào)用:

define(function(require){
var $ = require('jquery');
require('jquery-ui');
require('jquery-dataTables');
//下面都是測試,可以忽略
var _test = $('#test');
_test.selectmenu({
width : 180,
change : function(event, ui) {
console.log('change');
}
});
return {
test:function(){
//測試jquery-ui
_test.append($('<option>test1</option><option>test1</option>'));
_test.selectmenu("refresh");
//測試jquery-datatables
var _table = $('table');
_table.dataTable();
}
}
});

不過,執(zhí)行上面的代碼,會報一個異常:

Uncaught TypeError: _table.dataTable is not a function 

這是因為,dataTables并不是一個require風格的模塊,因此直接這樣引入,并不會執(zhí)行它內(nèi)部的匿名函數(shù)??梢孕薷乃哪涿瘮?shù),傳入$對象,在最后一行:

*/
return $.fn.dataTable;
//}));原來是這樣
}($)));//這里增加執(zhí)行這個匿名函數(shù),并且傳入$對象。
}(window, document));

這也是在網(wǎng)上搜的方法,原理奈何經(jīng)驗不足....

樣例代碼可以參考云盤,由于引入的資源不是很全,所以會報錯,可以直接忽略,因為能執(zhí)行UI插件就表示已經(jīng)成功了。

requirejs使用jquery-ui的問題

由于requirejs加載js文件后會立即執(zhí)行,如果你的jquery ui 插件需要刷新DOM頁面,那么可能會導致頁面的事件失效。

比如,你的模塊在加載后,對頁面的某個元素$('#test')綁定了click事件。但是使用了某個UI插件,這個插件會重新渲染DOM元素,test對應(yīng)的click事件就失效了。

解決辦法:

•把事件綁定推遲到DOM元素渲染完后再手動觸發(fā)綁定;
•也可以使用事件捕獲代替DOM元素的事件綁定(太麻煩了...不推薦)。

比如在DOM重構(gòu)的JS模塊中,執(zhí)行渲染的代碼下面:

require("xxx").initEvents();

常見場景:

比如我在頁面中使用了jquery-steps這個UI插件,它會對頁面進行重新渲染。這就導致我最開始綁定的事件都失效了....只有推遲到這個js重構(gòu)完頁面,再綁定才行。

以上所述是小編針對RequireJS和JQuery的模塊化編程日常問題解析的全部敘述,希望對大家有所幫助!

相關(guān)文章

  • ECMAScript6--解構(gòu)

    ECMAScript6--解構(gòu)

    解構(gòu)就是將聲明的一組變量和與相同結(jié)構(gòu)的數(shù)組或者對象的元素數(shù)值一一對應(yīng),并將變量相對應(yīng)元素進行賦值。本文將詳細介紹ECMAScript6--解構(gòu)的相關(guān)知識。下面跟著小編一起來看下吧
    2017-03-03
  • 詳談LABJS按需動態(tài)加載js文件

    詳談LABJS按需動態(tài)加載js文件

    為了提高頁面的打開和加載速度,我們經(jīng)常把JS文件放在頁面的尾部,但是有些JS必須放在頁面前面,這樣就會增加頁面的加載時間;于是出現(xiàn)了按需動態(tài)加載的概念,這個概念就是當頁面需要用到這個JS文件或者CSS渲染文件的時候,在去請求這些文件,這樣就節(jié)省了頁面的加載時間
    2015-05-05
  • js中的數(shù)組對象排序分析

    js中的數(shù)組對象排序分析

    這篇文章為大家分析一下js中的數(shù)組對象排序的一些知識,方便大家在以后使用中知道這些排序的原理
    2018-12-12
  • JS實現(xiàn)的顏色實時漸變效果完整實例

    JS實現(xiàn)的顏色實時漸變效果完整實例

    這篇文章主要介紹了JS實現(xiàn)的顏色實時漸變效果,結(jié)合實例形式分析了JavaScript結(jié)合時間函數(shù)定時觸發(fā)動態(tài)改變頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
    2016-03-03
  • 高性能JavaScript模板引擎實現(xiàn)原理詳解

    高性能JavaScript模板引擎實現(xiàn)原理詳解

    這篇文章主要介紹了JavaScript模板引擎實現(xiàn)原理詳解,本文著重講解artTemplate模板的實現(xiàn)原理,它采用預(yù)編譯方式讓性能有了質(zhì)的飛躍,是其它知名模板引擎的25、32 倍,需要的朋友可以參考下
    2015-02-02
  • 移動端H5頁面返回并刷新頁面(BFcache)的方法

    移動端H5頁面返回并刷新頁面(BFcache)的方法

    這篇文章主要給大家介紹了關(guān)于移動端H5頁面返回并刷新頁面(BFcache)的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2018-11-11
  • 通用無限極下拉菜單的實現(xiàn)代碼

    通用無限極下拉菜單的實現(xiàn)代碼

    下面小編就為大家?guī)硪黄ㄓ脽o限極下拉菜單的實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-05
  • js點擊按鈕實現(xiàn)帶遮罩層的彈出視頻效果

    js點擊按鈕實現(xiàn)帶遮罩層的彈出視頻效果

    這篇文章主要介紹了js點擊按鈕實現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下
    2015-12-12
  • 可選擇和輸入的下拉列表框示例

    可選擇和輸入的下拉列表框示例

    如果想實現(xiàn)可選擇和輸入的下拉列表框,那么下面有個不錯的示例,希望大家可以參考下
    2013-11-11
  • JS實現(xiàn)玩轉(zhuǎn)風車

    JS實現(xiàn)玩轉(zhuǎn)風車

    這篇文章主要為大家詳細介紹了JS實現(xiàn)玩轉(zhuǎn)風車,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02

最新評論