作者註釋 (pie6k)。幾年前我創建了這個庫,當時它很棒。現在你可能不應該使用 jQuery 來做類似的事情,而應該使用 React 或類似的東西。謝謝。 — 2018-11-21
錯誤報告仍然被接受。
創建jQuery.initialize
外掛是為了幫助維護頁面上動態創建的元素。
jQuery.initialize 將迭代與選擇器相符的每個元素並套用回呼函數。然後,它將偵聽文件物件模型的任何更改,並將回調函數套用至插入到與原始選擇器相符的文件中的任何新元素。
$.initialize([selector], [callback]);
這允許開發人員定義一個初始化回調,每當與選擇器相符的新元素插入 DOM 時就會套用該回呼。它也適用於透過 AJAX 載入的元素。
簡單示範 - 點擊此處
$.initialize(".some-element", function() {
$(this).css("color", "blue");
});
但現在如果頁面上出現與.some-element
選擇器相符的新元素,它將立即初始化。新增項目的方式並不重要,您不需要關心任何回呼等。
$("<div/>").addClass("some-element").appendTo("body"); //new element will have blue color!
要停止對文件的觀察,您可以透過在傳回的MutationObserver
實例上呼叫disconnect()
來斷開觀察者的連接,這將阻止觀察者接收進一步的通知,直到再次呼叫observe()
為止。 。例如,
var obs = $.initialize([selector], [callback]); // Returns MutationObserver
obs.disconnect();
target
預設情況下,會觀察整個文件的變更。這可能會導致性能不佳。可以透過指定目標來觀察 DOM 中的特定節點:
$.initialize(".some-element", function() {
$(this).css("color", "blue");
}, { target: document.getElementById('observe-this-element') });
否則,目標將預設為document.documentElement
。
observer
可以提供自訂MutationObserverInit
。如果沒有提供,它將預設為內部配置。
插件基於MutationObserver
。它適用於 IE9+(請閱讀下面的註釋)和所有現代瀏覽器。
注意:要使其在 IE9 和 IE10 上運行,您需要添加 MutationObserver polyfill - 就像這裡的那樣:https://github.com/webcomponents/webcomponentsjs
性能測試(感謝@bezborodow和@liuhongbo )
bower
和npm
,添加高級性能測試。