用于現(xiàn)代JavaScript的Observer API

MutationObserver

// 選擇要觀察突變的節(jié)點(diǎn)const targetNode = document.getElementById('element');
// 觀察者的選項(xiàng)（觀察哪些突變）const config = {  attributes: true,  childList: true,  subtree: true,};
// 創(chuàng)建一個(gè)觀察者實(shí)例，鏈接到一個(gè)回調(diào)，以便在觀察到突變時(shí)執(zhí)行。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.`);    }  });});
// 開始觀察目標(biāo)節(jié)點(diǎn)的配置突變情況observer.observe(targetNode, config);
// 之后，你可以停止觀察observer.disconnect();

IntersectionObserver

// 選擇要觀察突變的節(jié)點(diǎn)const targetNode = document.getElementById('element');
// 觀察者的選項(xiàng)（觀察哪些突變）const config = {  rootMargin: '-100% 0px 0px 0px',};
// 創(chuàng)建一個(gè)觀察者實(shí)例，鏈接到一個(gè)回調(diào)，以便在觀察到突變時(shí)執(zhí)行。const intersectionObserver = new IntersectionObserver((entries, observer) => {  entries.forEach(entry => {    if (entry.isIntersecting) {      console.log('Observing.');
      // 之后，你可以停止觀察      observer.unobserve(entry.target);    }  });});
// 開始觀察intersectionObserver.observe(targetNode, config);

ResizeObserver

// 選擇要觀察突變的節(jié)點(diǎn)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

// 觀察者的選項(xiàng)（觀察哪些突變）const config = {  entryTypes: ['resource', 'mark', 'measure']};
const observer = new PerformanceObserver(list => {  list.getEntries().forEach(entry => {    // 在控制臺(tái)上顯示每個(gè)報(bào)告的測(cè)量    console.log(      `Name: ${entry.name}`,      `Type: ${entry.entryType}`,      `Start: ${entry.startTime}`,      `Duration: ${entry.duration}`,    );  });});
// 開始觀察observer.observe(config);performance.mark('registered-observer');