用于现代JavaScript的Observer API
web前端开发
共 2592字,需浏览 6分钟
· 2020-11-08
![](https://filescdn.proginn.com/0cdb1445a79cab2179f94e462da3017a/e3eb6c580e213dfba328445c6461d323.webp)
作者 | Cody Bennett
MutationObserver
// 选择要观察突变的节点
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();
IntersectionObserver
// 选择要观察突变的节点
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
// 选择要观察突变的节点
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
// 观察者的选项(观察哪些突变)
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://filescdn.proginn.com/8ba64c7adf65bc76ca9c80016170db9e/df4f17564e4024b710fbd81d03557599.webp)
评论
cookie.js轻量级的JavaScript API,用于处理浏览器cookie
一个简单,轻量级的JavaScript API,用于处理浏览器cookie,它易于使用,具有合理的占
cookie.js轻量级的JavaScript API,用于处理浏览器cookie
0
cookie.js轻量级的JavaScript API,用于处理浏览器cookie
一个简单,轻量级的JavaScriptAPI,用于处理浏览器cookie,它易于使用,具有合理的占用空间(~3kb)(gzip:1.73kb),并且没有依赖关系。 cookieAPIscookie('
cookie.js轻量级的JavaScript API,用于处理浏览器cookie
0
API Notebook测试 API 的 Javascript 控制台
APINotebook一个用于测试API的Javascript控制台,它本身是和其他的API一起组合而成。它能生成用RAML描述的API用户客户端并可以开始使用它们。Via:InfoQ
API Notebook测试 API 的 Javascript 控制台
0
SwiftyTimer用于NSTimer的Swifty API
SwiftyTimer是一组扩展,可以使NSTimerAPI更加清晰易用,亲近Swift语法。使用示例:使用NSTimer.every和NSTimer.after,可轻松地安排重复和不重复计时器(重复
SwiftyTimer用于NSTimer的Swifty API
0