的Javascript jQuery的DOM數據API架構

我必須對我的應用程序的設計問題，它是一個包含下面的示例JavaScript的一個大項目：的Javascript jQuery的DOM數據API架構

modal.js（包含jQuery插件模式表單）
tooltip.js（包含提示一個jQuery插件）
textbox.js（包含jQuery插件文本框，佔位符等）

會疼的表現，如果我會用數據-API建立我的整個UI的JavaScript，所以我會遍歷與此代碼的所有元素，並在需要初始化一個插件：

$.each('[data-trigger="modal"]', function(a, b){ 
    // Do plugin code here $(this).modal() 
}); 

$.each('[data-textbox="^*"]', function(a, b){ 
    // Do plugin code here $(this).textbox() 
}); 

$.each('[data-tooltip="hello, I am a tooltip"]', function(a, b){ 
    // Do plugin code here $(this).tooltip() 
});

另一種選擇是：

$(document).ready(function(){ 
    $('#modal-create-account-trigger').modal(); 
    $('#tb-username').textbox(); 
    $('#tb-password').textbox(); 
    $('#tb-fullname').textbox(); 
});

我喜歡.each解決方案，所以我們可以在HTML中完全控制它，我怎麼知道這對性能不利，它有多糟，還有其他選擇嗎？

非常感謝您的閱讀。

來源

2012-07-13 onlineracoon

您可以執行'$（「*」）。each'並在單個選擇和循環中檢查數據。 – Esailija 2012-07-13 19:27:27

由於巨大的性能增益，使用#ID選擇器總是更好。

來源

2012-07-13 19:14:07

該頁面必須很大，因爲數據選擇器有任何明顯的緩慢。如果頁面非常龐大，加載頁面將永遠在第一位。 – Esailija 2012-07-13 19:21:09

@Esailija如果用戶使用IE6/7，即使在小型網站上，這些選擇器也有問題，這對用戶來說已經足夠了。 – 2012-07-13 19:22:06

我不這麼認爲，是的，他們很慢但不會太慢，以至於每頁加載時都無法使用這些選擇器。也許如果他試圖在mousemove處理程序中做到這一點，你會有一個觀點。 – Esailija 2012-07-13 19:24:20

的Javascript jQuery的DOM數據API架構

回答

相關問題