乐趣区

关于javascript:用于现代JavaScript的Observer-API

jiezi


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

退出移动版