亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

高效檢測單頁應用中的 DOM 變化

高效檢測單頁應用中的 DOM 變化

交互式愛情 2023-04-27 17:24:46
我正在構建一個 JS 庫,其中一個用例要求我在 DOM 更改時觸發一個事件,特別是如果它是一個單頁應用程序,例如: github 搜索欄 經過一些研究我發現MutationObserver:// Dom change event listnerMutationObserver = window.MutationObserver || window.WebKitMutationObserver;var observer = new MutationObserver(function(mutations, observer) {    // fired when a mutation occurs    attachListners();    // ...});observer.observe(documentAlias, {  subtree: true,  childList: true  //...});問題:我正在構建的庫旨在插入任何網站,因此我無法控制 html 實現。我有點擔心使用突變觀察器可能會進入無限循環。在同一行看到很多堆棧溢出問題。有沒有替代/更好的方法?如何安全有效地檢測 DOM 更新/更改?或者是變異觀察者最好的選擇
查看完整描述

1 回答

?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

MutationObserver可能是您最好的選擇。之前MutationObserver,有Mutation 事件,但現在已棄用且不推薦使用。

另一個(可以說是糟糕的)選擇是使用setTimeout并定期檢查 DOM 的變化。但這將需要您編寫一個函數來獲取要檢查的節點并將當前值與舊值進行比較。這不會那么有效,因為即使沒有任何更改,您也會每 X 毫秒檢查一次節點。

您應該能夠以不會發生無限循環的方式編寫代碼。如果您遇到無限循環,則應將該代碼添加到上面的問題中。

就性能而言,因為MutationObserver會給你舊值和新值,你可以比較這些值而不是遍歷整個 DOM。例如,像這樣:

let observer = new MutationObserver((mutations) => {

? mutations.forEach((mutation) => {

? ? let oldValue = mutation.oldValue;

? ? let newValue = mutation.target.textContent;

? ? if (oldValue !== newValue) {

? ? ? ? // do something

? ? }

? });

});


observer.observe(document.body, {

? characterDataOldValue: true,?

? subtree: true,?

? childList: true,?

? characterData: true

});


查看完整回答
反對 回復 2023-04-27
  • 1 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號