15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得.doc

15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得很多jQuery開發(fā)人員可能不知道開發(fā)技巧，下面筆者總結(jié)了15個(gè)值得開發(fā)人員關(guān)注的jQuery開發(fā)技巧和心得，供大家學(xué)習(xí)和參考，希望對(duì)開發(fā)人員有所幫助： 1. 盡量使用最新版本的jQuery類庫jQuery項(xiàng)目中使用了大量的創(chuàng)新。最好的方法來提高性能就是使用最新版本的jQuery。每一個(gè)新的版本都包含了優(yōu)化的bug修復(fù)。對(duì)我們來說唯一要干的就是修改tag，何樂而不為呢？我們也可以使用免費(fèi)的CDN服務(wù)，例如， Google來存放jQuery類庫。 2. 使用簡(jiǎn)單的選擇器直到最近，返回DOM元素的方式都是解析選擇器字符串，javascript循環(huán)和內(nèi)建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三種方式的整合使用。但是現(xiàn)代瀏覽器都開始支持querySelectorAll()，這個(gè)方法能夠理解CSS查詢器，而且能帶來顯著的性能提升。然而，我們應(yīng)該避免使用復(fù)雜的選擇器返回元素。更不用說很多用戶使用老版本的瀏覽器，強(qiáng)迫jQuery去處理DOM樹。這個(gè)方式非常慢。$(lidata-selected=true a) / Fancy, but slow $(li.selected a) / Better $(#elem) / Best 選擇id是最快速的方式。如果你需要使用class名稱， 那么你最好帶上tag名稱，這樣會(huì)更快些。特別是在老瀏覽器和移動(dòng)設(shè)備上。訪問DOM是javascript應(yīng)用最慢的方式 ，因此盡量少使用。使用變量去保存選擇器，這樣會(huì)使用cache來保存。性能更好。var buttons = $(#navigation a.button); / Some prefer prefixing their jQuery variables with $: var $buttons = $(#navigation a.button); 另外一個(gè)值得做的是jQuery給了你很多的額外便利選擇器 ，例如，:visible，:hidden，:animated還有其它，這些不是合法的CSS3選擇器。結(jié)果是你使用這些類庫就不能有效地利用querySelectorAll()方法。為了彌補(bǔ)這個(gè)問題，你需要先選擇元素，再過濾，如下：$(a.button:animated); / Does not use querySelectorAll() $(a.button).filter(:animated); / Uses it 3. 數(shù)組方式使用jQuery對(duì)象運(yùn)行選擇器的結(jié)果是一個(gè)jQuery對(duì)象。然而，jQuery類庫讓你感覺你正在使用一個(gè)定義了index和長(zhǎng)度的數(shù)組。/ Selecting all the navigation buttons: var buttons = $(#navigation a.button); / We can loop though the collection: for(var i=;ibuttons.length;i+) console.log(buttonsi); / A DOM element, not a jQuery object / We can even slice it: var firstFour = buttons.slice(,4); 如果性能是你關(guān)注的，那么使用簡(jiǎn)單for或者while循環(huán)來處理，而不是$.each()，這樣能使你的代碼更快。檢查長(zhǎng)度也是一個(gè)檢查你的collection是否含有元素的方式。if(buttons) / This is always true / Do something if(buttons.length) / True only if buttons contains elements / Do something 4. 選擇器屬性jQuery提供了一個(gè)屬性，這個(gè)屬性顯示了用來做鏈?zhǔn)降倪x擇器。$(#container li:first-child).selector / #container li:first-child $(#container li).filter(:first-child).selector / #container li.filter(:first-child) 雖然上面的例子針對(duì)同樣的元素，選擇器則完全不一樣。第二個(gè)實(shí)際上是非法的，你不可以使用它來創(chuàng)建一個(gè)對(duì)象。只能用來顯示filter方法是用來縮小collection。5. 創(chuàng)建一個(gè)空的jQuery對(duì)象創(chuàng)建一個(gè)新的jQuery空間能極大的減小開銷。有時(shí)候，你可能需要?jiǎng)?chuàng)建一個(gè)空的對(duì)象，然后使用add()方法添加對(duì)象。var container = $(); container.add(another_element); 這也是quickEach方法的基礎(chǔ)，你可以使用這種更快的方式而非each()。6. 選擇一個(gè)隨機(jī)元素上面我提到過，jQuery添加它自己的選擇器過濾。除了類庫，你可以添加自己的過濾器。只需要添加一個(gè)新的方法到$.expr:對(duì)象。一個(gè)非常棒的使用方式是Waldek Mastykarz的博客中提到的：創(chuàng)建一個(gè)用來返回隨機(jī)元素的選擇器。你可以修改下面代碼：(function($) var random = ; $.expr:.random = function(a, i, m, r) if (i = ) random = Math.floor(Math.random() * r.length); return i = random; ; )(jQuery); / This is how you use it: $(li:random).addClass(glow); 7. 使用CSS HooksCSS hooks API是提供開發(fā)人員得到和設(shè)置特定的CSS數(shù)值的方法。使用它，你可以隱藏瀏覽器特定的執(zhí)行并且使用一個(gè)統(tǒng)一的界面來存取特定的屬性。$.cssHooksborderRadius = get: function(elem, computed, extra) / Depending on the browser, read the value of / -moz-border-radius, -webkit-border-radius or border-radius , set: function(elem, value) / Set the appropriate CSS3 property ; / Use it without worrying which property the browser actually understands: $(#rect).css(borderRadius,5); 更好的在于，人們已經(jīng)創(chuàng)建了一個(gè)支持CSS hooks類庫8. 使用自定義的緩動(dòng)方法你可能聽到過jQuery的緩動(dòng)插件，它能夠允許你給你的動(dòng)畫添加特效。唯一的缺點(diǎn)是你的訪問者需要加載另外一個(gè)javascript文件。幸運(yùn)的是，你可以簡(jiǎn)單的從插件拷貝效果，并且添加到j(luò)Query.easing對(duì)象中，如下：$.easing.easeInOutQuad = function (x, t, b, c, d) if (t/=d/2) 1) return c/2*t*t + b; return -c/2 * (-t)*(t-2) - 1) + b; ; / To use it: $(#elem).animate(width:200,slow,easeInOutQuad); 9. $.proxy()使用callback方法的缺點(diǎn)之一是當(dāng)執(zhí)行類庫中的方法后，context被設(shè)置到另外一個(gè)元素，例如： Close 執(zhí)行下面代碼：$(#panel).fadeIn(function() / this points to #panel $(#panel button).click(function() / this points to the button $(this).fadeOut(); ); ); 你將遇到問題，button會(huì)消失，不是panel。使用$.proxy方法，你可以這樣書寫代碼：$(#panel).fadeIn(function() / Using $.proxy to bind this: $(#panel button).click($.proxy(function() / this points to #panel $(this).fadeOut(); ,this); ); 這樣才正確的執(zhí)行。$.proxy方法接受兩個(gè)參數(shù)，你最初的方法，還有context。這里閱讀更多$.proxy in the docs.。10. 判斷頁面是否太過復(fù)雜一個(gè)非常簡(jiǎn)單的道理，約復(fù)雜的頁面，加載的速度越慢。你可以使用下面代碼檢查一下你的頁面內(nèi)容：console.log( $(*).length ); 以上代碼返回的數(shù)值越小，網(wǎng)頁加載速度越快。你可以考慮通過刪除無用多余的元素來優(yōu)化你的代碼11. 將你的代碼轉(zhuǎn)化成jQuery插件如果你要花一定得時(shí)間去開發(fā)一段jQuery代碼，那么你可以考慮將代碼變成插件。這將能夠幫助你重用代碼，并且能夠有效的幫助你組織代碼。創(chuàng)建一個(gè)插件代碼如下：(function($) $.fn.yourPluginName = function() / Your code goes here return this; ; )(jQuery); 你可以在這里閱讀更多開發(fā)教程。12. 設(shè)置全局AJAX為缺省如果你開發(fā)ajax程序的話，你肯定需要有”加載中“之類的顯示告知用戶，ajax正在進(jìn)行，我們可以使用如下代碼統(tǒng)一管理，如下：/ ajaxSetup is useful for setting general defaults: $.ajaxSetup( url : /ajax/, dataType : json ); $.ajaxStart(function() showIndicator(); disableButtons(); ); $.ajaxComplete(function() hideIndicator(); enableButtons(); ); /* / Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */ 13. 在動(dòng)畫中使用delay()方法鏈?zhǔn)降膭?dòng)畫效果是jQuery的強(qiáng)大之處。但是有一個(gè)忽略了的細(xì)節(jié)就是你可以在動(dòng)畫之間加上delays，如下：/ This is wrong: $(#elem).animate(width:200,function() setTimeout(function() $(#elem).animate(marginTop:100); ,2000); ); / Do it like this: $(#elem).animate(width:200).delay(2000).animate(marginTop:100); jQuery動(dòng)畫幫了我們大忙，否則我們得自己處理一堆的細(xì)節(jié)，設(shè)置timtout，處理屬性值，跟蹤動(dòng)畫變化等等。大家可以參考這個(gè)文章：jQuery animations14. 合理利用HTML5的Data屬性HTML5的data屬性可以幫助我們插入數(shù)據(jù)。特別合適前后端的數(shù)據(jù)交換。jQuery近來發(fā)布的data()方法，可以有效的利用HTML5的屬性，來自動(dòng)得到數(shù)據(jù)。下面是個(gè)例子： 為了存取數(shù)據(jù)你需要調(diào)用如下代碼：$(#d1).data(role); / page $(#d1).data(lastValue); / 43 $(#d1).data(hidden); / true; $(#d1).data(options).name; / John; data()的jQuery文檔：data() in the jQuery docs15. 本地存儲(chǔ)和jQuery本地存儲(chǔ)是一個(gè)超級(jí)簡(jiǎn)單的API。簡(jiǎn)單的添加你的數(shù)據(jù)到localStorage全局屬性中:/ Check if key exists in the storage var value = $.jStorage.get(key); if(!value) / if n