簡單的jQuery入門指引

2024-05-06 16:23:57

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了簡單的jQuery入門指引,jQuery是當今最為流行的JavaScript庫,需要的朋友可以參考下

引言

jQuery可以說是web開發領域應用最為廣泛的輕量級javascript庫，不僅專業的web開發者使用它，很多剛入門的web開發者或者web愛好者也通過使用jQuery輕松地融入到了javascript的開發。

而如果你還希望在這方面做得更好，就應學習和了解最佳實踐。最佳實踐(Best Practice)是隨某一技術領域的發展而逐漸建立起來的關于最新技術和開發方法的信息，在web開發領域也非常有用。

本文內容參考了杰出前端工程師 Addy Osmani 的 jQuery Performance TIPs & Tricks ，如果有興趣，你也可以自己看看這位大師的這個演說PPT，Addy Osmani本人也是jQuery的核心團隊(jQuery Core teams)的成員之一。

為什么需要遵循jQuery最佳實踐

web開發領域對于性能的追求是永不停滯的。jQuery雖然是非常強大的開發工具，但不當的使用方法仍會給瀏覽器帶來額外的工作和負擔，也會使開發的web應用占用更多的系統資源，運行起來也更慢。而我們都知道，好的web應用需要的是清爽靈活。

如何判斷javascript的性能呢?現在，這種性能測試都可以歸納為運行速度，簡單的說，同一項功能，某一種寫法如果比另一種寫法運行起來更快，那么這種寫法就可以實現更好的性能。當然，這里只單純從性能角度來考慮，并不包含代碼的可維護性。如果你想自己測試不同的javascript代碼段的性能，推薦使用 jsPerf.com ，這個站點可以幫助你輕松創建javascript性能測試用例，還可以保存和分享測試結果。jQuery團隊也使用它進行javascript性能測試。

jQuery使用建議 1.使用最新版

新版本的jQuery提供的API會在性能上有所提升，而且修復了一些存在的bug。由于非常多的網站都在使用jQuery，所以jQuery每一個新版本的更改都會經過非常嚴格的測試，升級一般都不會帶來問題。

此外，新版本的jQuery可能會在API上做非常有用的改動，讓開發工作更加簡單。比如在jQuery 1.7之前，事件綁定使用bind()、delegate()以及live()這幾個方法。雖然都是事件綁定，但每個方法各有針對，這就產生了“什么時候應該使用哪個”的麻煩事。而從jQuery 1.7開始，新增并推薦使用on()和off()這2個方法來完成所有的事件綁定與移除，理解起來就要容易多了。

2.理解你的選擇符

在jQuery中，不是所有的選擇符(Selectors)都是同等性能的。也就是說，雖然某一些元素你可以用很多種不同的選擇符寫法來選取，但不要認為它們在性能上也是一樣的。

jQuery的選擇符的運行速度是不同的，從最快到最慢依次是：

ID選擇符($(#ElementId))

元素選擇符($(form)，$(input)等)

Class選擇符($(.someClass))

偽類和屬性選擇符($(:hidden)，$([attribute=value])等)

由于瀏覽器支持的原生DOM操作方法(比如document.getElementById())就可用，所以ID選擇符和元素選擇符是最快的。而稍慢的Class選擇符是因為IE6-IE8不支持原生的getElementsByClassName()，而在支持這個原生方法的其他現代瀏覽器中，Class選擇符仍是很快的。

至于最慢的偽類和屬性選擇符，則是因為瀏覽器并不提供對應功能的可用原生方法。盡管jQuery嘗試了使用querySelector()和querySelectorAll()這兩個原生選擇符API(屬于css查詢API)來提升部分jQuery選擇符在部分現代瀏覽器中的性能，但綜合起來，仍然是比較慢的。當然，這也是在于jQuery對偽類和屬性選擇符這個API要求較高，不僅要支持input[type="text"]這種css中合法的選擇符，還要支持p:first這類用于元素過濾，但在css中不合法的選擇符?？傊?，jQuery的偽類和屬性選擇符功能很強大，但請慎重使用。

3.緩存你操作的元素

var parents = $('.parents');

var children = $('.parents').find('.child'); //bad

緩存是指保存jQuery選擇符的返回結果，方便之后再次調用。每一個$('.whatever')都會重新從DOM中搜索并返回一個jQuery包裝集(jQuery collection)，因此要避免重復使用。

原生javascript中，建立局部變量來緩存數據或對象，有利于精簡代碼、優化性能。這里也是一樣的道理。

4.鏈式語法

var parents = $('.parents').doSomething().doSomethingElse();

jQuery中大部分方法都返回jQuery包裝集并支持這種鏈式語法。javasript的性能優化要點之一是最小化語句數，因此鏈式語法不僅寫起來更容易，運行起來也會更快。

5.使用事件代理

利用事件冒泡，指定一個位于dom較高層級的元素(比如document)的事件處理程序，就可以管理某一類型的所有事件。減少了頁面中添加的事件處理程序，自然可以提升整體性能。

6.最小化現場更新

如果你進行操作的DOM部分是已經顯示的頁面的一部分，那么你就是在進行一個現場更新。現場更新需要瀏覽器重新計算尺寸，涉及到重繪(repaint)和回流(reflow)，有較高的性能花費，因此應減少使用。

在新增內容時，建議先把要新增的代碼段合并完全，最后再使用單個append()方法添加到頁面。而如果元素存在復雜的交互，比如反復地添加和移除，detach()這個針對性的方法就是最佳的選擇。

7.不在不必要的時候使用jQuery方法

$('.nav_link').bind('click', function() {

console.log('nav id: ' + $(this).attr('id')); //bad

$.data(elem, key, value); //significantly faster

jQuery方法不一定是最好的方法。這里使用$(this).attr('id')獲取當前事件元素的ID，為當前事件元素創建了jQuery包裝集，然后調用attr()屬性獲取方法。但這都是額外的性能花費。事實上，this在事件函數內就表示當前事件元素，直接使用this.id就可以獲取元素ID，這種原生DOM屬性的寫法要更快。

8.適當使用jQuery工具函數

操作jQuery包裝集的方法(也就是寫在$.fn中的方法)，其中一部分也有作為jQuery工具函數(直接寫在$中的方法)的同類方法。由于jQuery工具函數在使用中不涉及創建jQuery包裝集，因此，在部分情況下，可以通過換用jQuery工具函數提升性能。

比如，在DOM中存儲數據，一般的做法是：