国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

JavaScript工作原理（九）：使用MutationObserver跟蹤DOM的改變

1fe1se / 1045人閱讀

摘要：概觀是現代瀏覽器提供的，用于檢測中的變化。您可能正在使用所見即所得的編輯器，試圖實現撤銷重做功能。函數的第一個參數是在一個批次中發生的所有改變的集合。雖然有用，但中的每一次更改都會觸發突變事件，這又會導致性能問題。


Web應用程序在客戶端越來越重要，原因很多，比如需要更豐富的用戶界面來容納更復雜的應用程序必須提供的功能，實時計算等等。

復雜性的增加使得在Web應用程序的生命周期中的每個特定時刻都很難知道UI的確切狀態。

如果你正在構建某種框架或僅僅是一個庫，這會變得更加困難，例如，它必須作出反應并執行某些依賴于DOM的操作。

概觀

MutationObserver是現代瀏覽器提供的Web API，用于檢測DOM中的變化。使用此API，可以偵聽新添加或刪除的節點，屬性更改或文本節點文本內容的更改。

你為什么想這么做？

MutationObserver API在很多情況下可以非常方便地使用。例如：

您希望通知您的網絡應用訪問者在他當前所在的頁面上發生了一些變化。

您正在研究一種新的花式JavaScript框架，該框架可根據DOM如何變化來動態加載JavaScript模塊。

您可能正在使用所見即所得的編輯器，試圖實現撤銷/重做功能。通過利用MutationObserver API，你可以在任何時候都能很容易undo他們

這些只是MutationObserver如何提供幫助的幾個例子。

如何使用MutationObserver

在你的應用中實現MutationObserver相當容易。您需要通過傳遞一個函數來創建一個MutationObserver實例，該函數在每次發生突變時都會被調用。函數的第一個參數是在一個批次中發生的所有改變的集合。每個改變都提供有關其類型和已發生變化的信息。
MutationObserver API，您可以在任何給定的位置知道進行了哪些更改，因此您可以輕松地撤消它們。

var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation);
  });
});

創建的對象有三個方法：

observe - 開始傾聽變化。需要兩個參數 - 您要觀察的DOM節點和一個設置對象

disconnect - 停止監聽更改

takeRecords - 在回調被觸發前返回最后一批更改。

以下片段顯示了如何開始觀察：

// Starts listening for changes in the root HTML element of the page.
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

現在假設你有一些簡單的DIV在DOM中：

 Simple div

使用jQuery，你你可以移除div的class屬性：

$("#sample-div").removeAttr("class");

正如我們開始觀察的那樣，在調用mutationObserver.observe（...）之后，我們將在相應的MutationRecord的控制臺中看到一個日志：

這是由刪除class屬性引起的變異。

最后，為了在完成后停止觀察DOM，可以執行以下操作：

// Stops the MutationObserver from listening for changes.
mutationObserver.disconnect();

如今，MutationObserver得到了廣泛的支持：

備擇方案

然而，MutationObserver并不總是可用的。那么在MutationObserver出現之前開發者會采取什么措施呢？

還有其他幾個選項可用：

輪詢

MutationEvents

CSS動畫

輪詢

最簡單和最簡單的方式是通過輪詢。使用瀏覽器setInterval WebAPI，您可以設置一個任務，定期檢查是否發生了任何更改。當然，這種方法會顯著降低網絡應用程序/網站的性能。

MutationEvents

在2000年，引入了MutationEvents API。雖然有用，但DOM中的每一次更改都會觸發突變事件，這又會導致性能問題。現在，MutationEvents API已被棄用，很快，現代瀏覽器將不再支持它。

這是MutationEvents的瀏覽器支持：

CSS動畫

一個有點奇怪的選擇是依賴CSS動畫。這聽起來有點混亂?；旧希@個想法是創建一個動畫，一旦一個元素被添加到DOM就會觸發該動畫。動畫開始的那一刻，animationstart事件將被觸發：如果您已將事件處理程序附加到該事件，則您將確切知道元素何時添加到DOM。 動畫的執行時間應該很小，以至于用戶幾乎看不到它。

首先，我們需要一個父元素，在其中我們想要聽節點插入：

為了獲得節點插入的句柄，我們需要設置一系列關鍵幀動畫，這些動畫將在插入節點時開始：

@keyframes nodeInserted { 
 from { opacity: 0.99; }
 to { opacity: 1; } 
}

在創建關鍵幀后，需要將動畫應用到您想要的元素上。請注意，持續時間較短 - 他們正在放松瀏覽器中的動畫腳印：

#container-element * {
 animation-duration: 0.001s;
 animation-name: nodeInserted;
}

這將動畫添加到容器元素的所有子節點。當動畫結束時，插入事件將觸發。

我們需要一個JavaScript函數作為事件監聽器。在該函數中，必須進行初始event.animationName檢查以確保它是我們想要的動畫。

var insertionListener = function(event) {
  // Making sure that this is the animation we want.
  if (event.animationName === "nodeInserted") {
    console.log("Node has been inserted: " + event.target);
  }
}

顯示是時候添加監聽器到父容器了：

document.addEventListener(“animationstart”, insertionListener, false); // standard + firefox
document.addEventListener(“MSAnimationStart”, insertionListener, false); // IE
document.addEventListener(“webkitAnimationStart”, insertionListener, false); // Chrome + Safari

CSS動畫的瀏覽器支持：

與上述解決方案相比，MutationObserver具有許多優點。 從本質上講，它涵蓋了DOM中可能發生的每一個變化，并且它在批處理中引發更改時更加優化。最重要的是，所有主要的現代瀏覽器都支持MutationObserver，以及一些使用MutationEvents的polyfill。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94731.html

相關文章

  • JavaScript是如何工作的:使用 MutationObserver 跟蹤 DOM 的變化

    摘要：復雜性的增加使得在應用程序生命周期的每個給定時刻都很難知道的確切狀態。概述用來監視變動。這個被創建的對象有三個方法啟動監聽用來停止觀察返用來清除變動記錄，即不再處理未處理的變動。使用瀏覽器方法，可以設置一個任務，定期檢查是否發生了任何更改。 這是專門探索 JavaScript 及其所構建的組件的系列文章的第10篇。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ ...

    jasperyang 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監測 DOM 變化

    摘要：概述是現代瀏覽器提供的用來檢測變化的網頁接口。比如通知用戶當前所在的頁面所發生的一些變化。觸發回調前返回最新的批量變化。在函數內部，開始必須使用代碼進行檢查，確保是我們所監聽的動畫。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十章。 網絡應用...

    bbbbbb 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監測 DOM 變化

    摘要：概述是現代瀏覽器提供的用來檢測變化的網頁接口。比如通知用戶當前所在的頁面所發生的一些變化。觸發回調前返回最新的批量變化。在函數內部，開始必須使用代碼進行檢查，確保是我們所監聽的動畫。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十章。 網絡應用...

    zone 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監測 DOM 變化

    摘要：概述是現代瀏覽器提供的用來檢測變化的網頁接口。比如通知用戶當前所在的頁面所發生的一些變化。觸發回調前返回最新的批量變化。在函數內部，開始必須使用代碼進行檢查，確保是我們所監聽的動畫。 原文請查閱這里，略有刪減，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。 本系列持續更新中，Github 地址請查閱這里。 這是 JavaScript 工作原理的第十章。 網絡應用...

    Richard_Gao 評論0 收藏0

  • JavaScript 是如何工作的系列文章已更新到22篇

    摘要：為了方便大家共同學習，整理了之前博客系列的文章，目前已整理是如何工作這個系列，可以請猛戳博客查看。以下列出該系列目錄，歡迎點個星星，我將更友動力整理理優質的文章，一起學習。 為了方便大家共同學習，整理了之前博客系列的文章，目前已整理 JavaScript 是如何工作這個系列，可以請猛戳GitHub博客查看。 以下列出該系列目錄，歡迎點個星星，我將更友動力整理理優質的文章，一起學習。 J...

    lx1036 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<