成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

1fe1se / 1144人閱讀

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


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

復(fù)雜性的增加使得在Web應(yīng)用程序的生命周期中的每個特定時刻都很難知道UI的確切狀態(tài)。

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

概觀

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

你為什么想這么做？

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

您希望通知您的網(wǎng)絡(luò)應(yīng)用訪問者在他當(dāng)前所在的頁面上發(fā)生了一些變化。

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

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

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

如何使用MutationObserver

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

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

創(chuàng)建的對象有三個方法：

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

disconnect - 停止監(jiān)聽更改

takeRecords - 在回調(diào)被觸發(fā)前返回最后一批更改。

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

// 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
});

現(xiàn)在假設(shè)你有一些簡單的DIV在DOM中：

 Simple div

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

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

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

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

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

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

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

備擇方案

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

還有其他幾個選項可用：

輪詢

MutationEvents

CSS動畫

輪詢

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

MutationEvents

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

這是MutationEvents的瀏覽器支持：

CSS動畫

一個有點奇怪的選擇是依賴CSS動畫。這聽起來有點混亂。基本上，這個想法是創(chuàng)建一個動畫，一旦一個元素被添加到DOM就會觸發(fā)該動畫。動畫開始的那一刻，animationstart事件將被觸發(fā)：如果您已將事件處理程序附加到該事件，則您將確切知道元素何時添加到DOM。 動畫的執(zhí)行時間應(yīng)該很小，以至于用戶幾乎看不到它。

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

為了獲得節(jié)點插入的句柄，我們需要設(shè)置一系列關(guān)鍵幀動畫，這些動畫將在插入節(jié)點時開始：

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

在創(chuàng)建關(guān)鍵幀后，需要將動畫應(yīng)用到您想要的元素上。請注意，持續(xù)時間較短 - 他們正在放松瀏覽器中的動畫腳?。?/p> 

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

這將動畫添加到容器元素的所有子節(jié)點。當(dāng)動畫結(jié)束時，插入事件將觸發(fā)。

我們需要一個JavaScript函數(shù)作為事件監(jiān)聽器。在該函數(shù)中，必須進行初始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);
  }
}

顯示是時候添加監(jiān)聽器到父容器了：

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

CSS動畫的瀏覽器支持：

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/94731.html

相關(guān)文章

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

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

    jasperyang 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監(jiān)測 DOM 變化

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

    bbbbbb 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監(jiān)測 DOM 變化

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

    zone 評論0 收藏0

  • JavaScript 工作原理之十－使用 MutationObserver 監(jiān)測 DOM 變化

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

    Richard_Gao 評論0 收藏0

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

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

    lx1036 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<