jQuery編寫widget的一些技巧分享
更新時間：2010年10月28日 12:54:06 作者：
在編寫widget的時候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。
1、在編寫widget的時候，一般我們需要綁定一些事件，最好將這些widget的綁定事件加上當(dāng)前widget的命名空間。如果同一個jQuery對象，使用了兩個widget，而兩個widget都綁定了相同的事件名稱，可能會出現(xiàn)問題。在銷毀widget的時候，去除綁定事件也很方便，只需要unbind（”.namespace“）就可以了。
2、在寫jQuery的時候，因為jQuery對象是支持連寫的。譬如：$(obj).css("height","20px").attr("title","abc")....
3、在編寫的時候可以利用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指針，在最小化代碼的時候this可以被最小化掉。
6、最好將css類名取一致的名稱，然后定義變量保存起來。在使用的時候直接采用變量，這樣就算css名稱有調(diào)整，只需要改變變量緩存的值即可。同時代碼在最小化的時候也能減小體積。
7、setOption的時候，如果一個option是復(fù)雜對象，而不是簡單的值對象，最好不要簡單的this.options[key]=value.而在這之前需要將value和以前的option的值做一個extend，然后在賦值，這樣可以保留復(fù)雜對象原有的部分值。比如：
var a = {width:120,height:200};
var c={width:200};
a=c;
a=$.extend(a,c);
其結(jié)果是第一個a將是{width:20},會丟失掉height：200；而下面的那個將繼續(xù)保留原始的height:200。
2、在寫jQuery的時候，因為jQuery對象是支持連寫的。譬如：$(obj).css("height","20px").attr("title","abc")....
3、在編寫的時候可以利用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指針，在最小化代碼的時候this可以被最小化掉。
6、最好將css類名取一致的名稱，然后定義變量保存起來。在使用的時候直接采用變量，這樣就算css名稱有調(diào)整，只需要改變變量緩存的值即可。同時代碼在最小化的時候也能減小體積。
7、setOption的時候，如果一個option是復(fù)雜對象，而不是簡單的值對象，最好不要簡單的this.options[key]=value.而在這之前需要將value和以前的option的值做一個extend，然后在賦值，這樣可以保留復(fù)雜對象原有的部分值。比如：
復(fù)制代碼 代碼如下:
var a = {width:120,height:200};
var c={width:200};
a=c;
a=$.extend(a,c);
其結(jié)果是第一個a將是{width:20},會丟失掉height：200；而下面的那個將繼續(xù)保留原始的height:200。
相關(guān)文章
jQuery實現(xiàn)鼠標(biāo)經(jīng)過顯示動畫邊框特效
本文主要介紹了jQuery鼠標(biāo)經(jīng)過顯示動畫邊框特效的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
下面小編就為大家?guī)硪黄胘query獲取自定義的標(biāo)簽屬性的值簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
淺談JSON和JSONP區(qū)別及jQuery的ajax jsonp的使用
文章從JSON和JSONP區(qū)別開始講起，用實例來對比他們之間的不同之處，然后詳細(xì)講解了jQuery中的ajax jsonp的使用并給出了示例及詳細(xì)參數(shù)說明。這里推薦給大家，希望對小伙伴能有所幫助2014-11-11
基于JQuery框架的AJAX實例代碼，需要的朋友可以參考下。2009-11-11
這篇文章主要教大家如何簡單實現(xiàn)jQuery手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
本篇文章主要是對Json序列化和反序列化方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了jquery簡單圖片輪播特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
一定要注意如果從list的開始元素循環(huán)下去，remove掉一個元素后，有些元素就找不到了或者說不是要找的那個元素，感興趣的各位可以研究下哈2013-06-06
本文主要介紹了jQuery的ready方法的使用方法，用此方法實現(xiàn)了當(dāng)爺們加載完成后才執(zhí)行的效果，有相同需求的小伙伴可以參考下。2014-11-11
jQuery+css實現(xiàn)的tab切換標(biāo)簽(兼容各瀏覽器)
這篇文章主要介紹了jQuery+css實現(xiàn)的tab切換標(biāo)簽,可兼容各瀏覽器,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-01-01