怎么书写高质量jQuery代码
眾所周知，jQuery現(xiàn)在已經(jīng)非常流行，百度新首頁中也已經(jīng)開始使用jQuery，今天總結(jié)下怎么書寫更好的jQuery代碼使jQuery代碼更好、更快的執(zhí)行，希望本篇jQuery教程一改大家以前不合理的做法。
1.正確引用jQuery
盡量在body結(jié)束前才引入jQuery，而不是在head中。
借助第三方提供的CDN來引入jQuery，同時注意當使用第三方CDN出現(xiàn)問題時，要引入本地的jQuery文件。
如果在</body>前引入script文件的話，就不用寫document.ready了，因為這時執(zhí)行js代碼時DOM已經(jīng)加載完畢了。
2.優(yōu)化jQuery選擇器
高效正確的使用jQuery選擇器是熟練使用jQuery的基礎(chǔ)，而掌握jQuery選擇器需要一定的時間積累，我們開始學習jQuery時就應(yīng)該注意選擇器的使用。
<div?id="nav"?class="nav"> ????<a?class="home"?href="http://www.jquery001.com">jQuery學習網(wǎng)</a> ????<a?class="articles"?href="http://www.jquery001.com/articles/">jQuery教程</a> </div>如果我們選擇class為home的a元素時，可以使用下邊代碼：
$('.home');??//1 $('#nav?a.home');??//2 $('#nav').find('a.home');??//3方法1會使jQuery在整個DOM中查找class為home的a元素，性能可想而知。
方法2為要查找的元素添加了上下文，在這里變?yōu)椴檎襥d為nav的子元素，查找性能得到了很大提升。
方法3使用了find方法，它的速度更快，所以方法三最好。
關(guān)于jQuery選擇器的性能優(yōu)先級，ID選擇器快于元素選擇器，元素選擇器快于class選擇器。因為ID選擇器和元素選擇器是原生的JavaScript操作，而類選擇器不是，大家順便可以看下find context 區(qū)別，find() children區(qū)別。
3.緩存jQuery對象
緩存jQuery對象可以減少不必要的DOM查找，關(guān)于這點大家可以參考下緩存jQuery對象來提高性能。
4.正確使用事件委托
事件委托可以使事件更好的執(zhí)行，在動態(tài)添加的元素上綁定事件也需要委托來實現(xiàn)，在新版本的jQuery中推薦大家使用on來給元素綁定一個或多個事件的處理函數(shù)。
<table?id="t"> ????<tr> ????????<td>我是單元格</td> ????</tr> </table>比如我們要在上邊的單元格上綁定一個單擊事件，不注意的朋友可能隨手寫成下邊的樣子：
$('#t').find('td').on('click',?function?()?{ ????$(this).css({?'color':?'red',?'background':?'yellow'?}); });這樣會為每個td綁上事件，在為100個單元格綁定click事件的測試中，兩者性能相差7倍之多，好的做法應(yīng)該是下邊寫法：
$('#t').on('click',?'td',?function?()?{ ????$(this).css({?'color':?'red',?'background':?'yellow'?}); });5.精簡jQuery代碼
如在上述代碼中我們對jQuery代碼進行了適當?shù)暮喜?#xff0c;類似的還有.attr()方法等，我們沒有寫成下邊的方式：
$('#t').on('click',?'td',?function?()?{ ????$(this).css('color',?'red').css('background',?'yellow'); });6.減少DOM操作
剛開始使用jQuery時可能會頻繁的操作DOM，這是相當耗費性能的。如我們要在body中動態(tài)輸出一個表格，一些朋友會這樣寫：
var?$t?=?$('body'); $t.append('<table>'); $t.append('<tr><td>1</td></tr>'); $t.append('</table>');好的做法：
$('body').append('<table><tr><td>1</td></tr></table>');這樣在拼接完table串后再添加到body中，對DOM的操作只需一次。群里以前有朋友就因為這個導(dǎo)致在IE下輸出時出現(xiàn)問題，而關(guān)于字符串的拼接可以參考下最快創(chuàng)建字符串的方法。
7.不使用jQuery
原生函數(shù)總是最快的，這點不難理解，在代碼書寫中我們不應(yīng)該忘記原生JS。
就先總結(jié)這幾條吧，每條建議并不難理解，但總結(jié)全面的話還是要花費不少時間的。如在減少代碼段中，如果需要根據(jù)條件從數(shù)組中得到新數(shù)組時，可以使用$.grep() 方法，如果你在使用jQuery時有自己心得的話，歡迎在留言中和大家分享！
轉(zhuǎn)載于:https://www.cnblogs.com/focai/p/4369661.html
總結(jié)
以上是生活随笔為你收集整理的怎么书写高质量jQuery代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [数分提高]2014-2015-2第4教
- 下一篇： [POJ] 3687 Labeling