jQuery編寫widget的一些技巧分享
更新時(shí)間:2010年10月28日 12:54:06 作者:
在編寫widget的時(shí)候,一般我們需要綁定一些事件,最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。
1、在編寫widget的時(shí)候,一般我們需要綁定一些事件,最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。如果同一個(gè)jQuery對象,使用了兩個(gè)widget,而兩個(gè)widget都綁定了相同的事件名稱,可能會(huì)出現(xiàn)問題。在銷毀widget的時(shí)候,去除綁定事件也很方便,只需要unbind(”.namespace“)就可以了。
2、在寫jQuery的時(shí)候,因?yàn)閖Query對象是支持連寫的。譬如:$(obj).css("height","20px").attr("title","abc")....
3、在編寫的時(shí)候可以利用javascript的原生方法來避免switch。
switch(a)
{
case "aa":
this._set_aa();
break;
case "bb":
this._set_bb();
break;
case "cc"
this._set_cc();
break;
}
上面的代碼可以用下面的代碼替換
this["_set_"+a]();
4、盡量緩存jQuery對象,和各種變量。這樣可以提高腳本的性能
5、采用變量緩存this指針,在最小化代碼的時(shí)候this可以被最小化掉。
6、最好將css類名取一致的名稱,然后定義變量保存起來。在使用的時(shí)候直接采用變量,這樣就算css名稱有調(diào)整,只需要改變變量緩存的值即可。同時(shí)代碼在最小化的時(shí)候也能減小體積。
7、setOption的時(shí)候,如果一個(gè)option是復(fù)雜對象,而不是簡單的值對象,最好不要簡單的this.options[key]=value.而在這之前需要將value和以前的option的值做一個(gè)extend,然后在賦值,這樣可以保留復(fù)雜對象原有的部分值。比如:
var a = {width:120,height:200};
var c={width:200};
a=c;
a=$.extend(a,c);
其結(jié)果是第一個(gè)a將是{width:20},會(huì)丟失掉height:200;而下面的那個(gè)將繼續(xù)保留原始的height:200。
2、在寫jQuery的時(shí)候,因?yàn)閖Query對象是支持連寫的。譬如:$(obj).css("height","20px").attr("title","abc")....
3、在編寫的時(shí)候可以利用javascript的原生方法來避免switch。
復(fù)制代碼 代碼如下:
switch(a)
{
case "aa":
this._set_aa();
break;
case "bb":
this._set_bb();
break;
case "cc"
this._set_cc();
break;
}
上面的代碼可以用下面的代碼替換
復(fù)制代碼 代碼如下:
this["_set_"+a]();
4、盡量緩存jQuery對象,和各種變量。這樣可以提高腳本的性能
5、采用變量緩存this指針,在最小化代碼的時(shí)候this可以被最小化掉。
6、最好將css類名取一致的名稱,然后定義變量保存起來。在使用的時(shí)候直接采用變量,這樣就算css名稱有調(diào)整,只需要改變變量緩存的值即可。同時(shí)代碼在最小化的時(shí)候也能減小體積。
7、setOption的時(shí)候,如果一個(gè)option是復(fù)雜對象,而不是簡單的值對象,最好不要簡單的this.options[key]=value.而在這之前需要將value和以前的option的值做一個(gè)extend,然后在賦值,這樣可以保留復(fù)雜對象原有的部分值。比如:
復(fù)制代碼 代碼如下:
var a = {width:120,height:200};
var c={width:200};
a=c;
a=$.extend(a,c);
其結(jié)果是第一個(gè)a將是{width:20},會(huì)丟失掉height:200;而下面的那個(gè)將繼續(xù)保留原始的height:200。
相關(guān)文章
jQuery數(shù)據(jù)類型小結(jié)(14個(gè))
jQuery除了包含原生JS中的內(nèi)置數(shù)據(jù)類型(built-in datatype),還包括一些擴(kuò)展的數(shù)據(jù)類型(virtual types),如Selectors、Events等,通過本文給大家分享14個(gè)jquery數(shù)據(jù)類型,感興趣的朋友一起學(xué)習(xí)吧2016-01-01jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)購物車的總價(jià)計(jì)算和總價(jià)傳值功能 ,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11jQuery中slideUp 和 slideDown 的點(diǎn)擊事件
這篇文章主要介紹了jQuery中slideUp 和 slideDown 的點(diǎn)擊事件的相關(guān)資料,需要的朋友可以參考下2015-02-02jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法示例詳解
這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴(kuò)展方法的應(yīng)用,需要的朋友可以參考下2014-05-05為Jquery EasyUI 組件加上清除功能的方法(詳解)
下面小編就為大家?guī)硪黄獮镴query EasyUI 組件加上清除功能的方法(詳解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04jQuery實(shí)現(xiàn)的多屏圖像圖層切換效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多屏圖像圖層切換效果,可實(shí)現(xiàn)多個(gè)圖層的點(diǎn)擊切換效果,設(shè)計(jì)jQuery鼠標(biāo)事件及樣式的操作技巧,需要的朋友可以參考下2015-05-05jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08