用於現代JavaScript的Observer API

Observer API（觀察者API）釋放了Web隱藏的超能力，以建立真正的響應式體驗，從懶加載關鍵內容到非侵入式性能監控。

在檢測變化方面很是方便，能夠用來建立響應式應用。

有四種不一樣類型的觀察者能夠觀察不一樣的東西——從DOM到瀏覽器性能。

MutationObserver

MutationObserver觀察DOM樹，監聽DOM的變化。

// 選擇要觀察突變的節點
const targetNode = document.getElementById('element');

// 觀察者的選項（觀察哪些突變）
const config = {
  attributes: true,
  childList: true,
  subtree: true,
};

// 建立一個觀察者實例，連接到一個回調，以便在觀察到突變時執行。
const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  });
});

// 開始觀察目標節點的配置突變狀況
observer.observe(targetNode, config);

// 以後，你能夠中止觀察
observer.disconnect();

當一個元素的屬性、文本或內容發生變化時，咱們會獲得通知，同時也會監控子節點是否被添加或刪除。

這對於調整DOM中元素的大小以及重置DOM值特別有用。

IntersectionObserver

IntersectionObserver觀察一個DOM元素的可見性，監聽其位置的變化。

// 選擇要觀察突變的節點
const targetNode = document.getElementById('element');

// 觀察者的選項（觀察哪些突變）
const config = {
  rootMargin: '-100% 0px 0px 0px',
};

// 建立一個觀察者實例，連接到一個回調，以便在觀察到突變時執行。
const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Observing.');

      // 以後，你能夠中止觀察
      observer.unobserve(entry.target);
    }
  });
});

// 開始觀察
intersectionObserver.observe(targetNode, config);

這在基於目標元素的可見性和位置的懶惰加載和動畫內容方面很是有用。

ResizeObserver

ResizeObserver觀察元素的內容或邊框，監聽元素及其子元素的變化。

// 選擇要觀察突變的節點
const targetNode = document.getElementById('element');

const resizeObserver = new ResizeObserver((entries, observer) => {
  entries.forEach(entry => {
    console.log(`Element size: ${entry.width}px x ${entry.height}px`);
    console.log(`Element padding: ${entry.top}px ; ${entry.left}px`);

    // 以後，你能夠中止觀察
    observer.unobserve(entry.target);
  });
});

// 開始觀察
resizeObserver.observe(targetNode);

建立基於輸入或觸發器包裝的動態內容時，此觀察者很是重要。

PerformanceObserver

PerformanceObserver觀察性能測量事件，監聽新的性能條目。

// 觀察者的選項（觀察哪些突變）
const config = {
  entryTypes: ['resource', 'mark', 'measure']
};

const observer = new PerformanceObserver(list => {
  list.getEntries().forEach(entry => {
    // 在控制檯上顯示每一個報告的測量
    console.log(
      `Name: ${entry.name}`,
      `Type: ${entry.entryType}`,
      `Start: ${entry.startTime}`,
      `Duration: ${entry.duration}`,
    );
  });
});

// 開始觀察
observer.observe(config);
performance.mark('registered-observer');

這對於接收性能通知頗有用，能夠在空閒時間運行，而不與關鍵的渲染工做競爭。

---

原文：https://dev.to/codyjasonbennett做者：Cody Bennett