jQuery $.fn.data 與 $.data 效能比較

$.fn.data 與 $.data效率比較

簡介

我們之前在jQuery.data()這篇文章有提到data這個方法的使用方式，jQuery提供了兩種data方法，分別是$.fn.data()及$.data()，在本篇文章中，我們將要探討這兩種方法之間的差異以及效率議題。

jQuery.fn.data()

這個方法讓我們能夠使用selector選取一群節點並對其綁定資料，如
$("div").data('key', 'value');
來解釋一下上面這行程式碼，首先jQuery selector會將所有的div元素選取，並且創建(create)一個jQuery物件，再來呼叫data()方法時，jQuery會先對該節點的data(可能有原先的資料)進行解析(parse)，最後將對應key的值放入該節點中。上述步驟依序列出為
Step1. select and create jQuery object
Step2. parse the data
Step3. put the value in the key property

jQuery.data()

這個方法並沒有提供selector的方式進行資料的綁定，我們必須指定一個元素(element)給這個方法使用，如
$.data(document.body, 'key', 'value');
因此這個方法所指定的對象只能有一個，因此我們可以定義這個方法市使用在一個已經存在且定義好的元素上。因此它的執行步驟為
Step1. put the value in the element's key property


說了這麼多我要表達甚麼呢!?


如果你要綁定資料到一個已經定義且存在的節點，那麼使用第二個方法($.data)是最恰當的，如果你還問為什麼那請你看看下面的效能比較結果吧!! (分數越高越好)

你也可以自己測試 : http://jsperf.com/jquery-data-vs-jqueryselection-data/11





這篇文章就探討到這邊，使用data方法時不妨先思考效能的問題，Maybe會是個好習慣。