1.MutationObserver是观察dom修改的新增API
<div id="app">
<p class="aaa">我</p>
</div>
<script>
//直接new传一个回调函数, observer.observe下面这行代码执行完,在dom被修改的时候,这个回调函数就会被调用
let observer = new MutationObserver(function (mutationsList) {
for (var mutation of mutationsList) {
let type = mutation.type;
switch (type) {
case "childList":
console.log("A child node has been added or removed.");
break;
case "attributes":
console.log(`The ${mutation.attributeName} attribute was modified.`);
break;
case "subtree":
console.log(`The subtree was modified.`);
break;
default:
break;
}
}
});
//调用observe方法,传入要观察的dom对象,后面是配置,要观察属性的变化,孩子的增删,子节点的修改
observer.observe(document.getElementById('app'), { attributes: true, childList: true, subtree: true });
</script>
复制代码
2.Worker是弥补js做耗时任务的新API
let worker = new Worker('./calc.js');
worker.postMessage(10000);
worker.onmessage = function (e) {
console.log(e.data);
}
复制代码
onmessage = function (e) {
let res = caculate(e.data)
postMessage(res);
}
复制代码
3.MessageChannel这个我也不知道有啥用,一般在页面与ifram之间通信
let channel = new MessageChannel();
let port1 = channel.port1;
let port2 = channel.port2;
port1.postMessage('hello');
port2.onmessage = function (e) {
console.log(e.data);
};
复制代码
所有评论(0)