vb.net变量值变化触发事件

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知.与事件有本质的区别：事件是同步出发，DOM改变立即会出发相应事件，而Mutation Observe 是异步触发，DOM改变不会立即触发，而是会等到所有DOM操作都结束才触发。这样可以应付DOM频繁改变的特点。

• Mutation Observe是微任务，优先级低于process.nextTick>promise>Mutatuion Observe
• 它把 DOM 变动记录封装成一个数组进行处理，而不是一条条地个别处理 DOM 变动
• 它即可以观察发生在 DOM 节点的所有变动，也可以观察某一类变动

创建MutationObserve实例需要传入一个回调函数，每当有dom变化时，执行该函数。函数的第一个参数时变动数组，每个变化都会提供它的类型和已发生的变化

var mutationObserver = new MutationObserver(function(mutations) {
  mutations.forEach(mutation => console.log(mutation))
});

MutationObserve对象有三个方法：

• observe  — 启动监听
• disconnect — 用来停止观察
• takeRecords — 返用来清除变动记录，即不再处理未处理的变动。

observe方法用来启动监听，接受俩个参数：

• 所要观察的DOM节点
• 一个配置对象，指定所要观察的特定变

// 开始侦听页面的根 HTML 元素中的更改。
mutationObserver.observe(document.documentElement, {
  attributes: true,
  characterData: true,
  childList: true,
  subtree: true,
  attributeOldValue: true,
  characterDataOldValue: true
});

假设我们创建一个文本节点

var counter = 1
var textNode = document.createTextNode(String(counter))

然后我们改变文本节点的值

counter = (counter + 1) % 2
textNode.data = String(counter)

发生了什么呢？

这是文本节点data改变引起的，在这张图上我们可以观察到DOM的相关信息

MutationRecord 对象包含了DOM的相关信息，有如下属性：

type：观察的变动类型（attribute、characterData或者childList）
target：发生变动的 DOM 节点
addedNodes：新增的 DOM 节点
removedNodes：删除的 DOM 节点
previousSibling：前一个同级节点，如果没有则返回 null
nextSibling：下一个同级节点，如果没有则返回 null
attributeName：发生变动的属性。如果设置了attributeFilter，则只返回预先指定的属性。oldValue：变动前的值。这个属性只对 attribute 和 characterData 变动有效，如果发生 childList 变动，则返回 null

最后，为了在任务完成后停止观察 DOM，可以执行以下操作:

mutationObserver.disconnect();

根据can I use ..?来查看兼容性

在mutation Observe 出现之前，采用以下三种方案

• 轮询（Polling）：使用浏览器 setInterval 方法，可以设置一个任务，定期检查是否发生了任何更改，明显降低了网站应用性能
• MutationEvents ：有用，但在 DOM中 的每一次更改都会触发改变事件，这同样会导致性能问题，已被废弃
• CSS animations ： 是创建一个动画，一旦元素被添加到 DOM 中，动画就会被触发。动画开始的那一刻，animationstart 事件将被触发:如果已经将事件处理程序附加到该事件，那么你将确切地知道元素何时被添加到 DOM 中。动画的执行时间周期应该很小，用户几乎看不到它。

MutationObserver本质上，涵盖了 DOM 中可能发生的每一个更改，并且在批量触发更改时，它的优化程度更高。最重要的是，所有主要的现代浏览器都支持 MutationObserver。

~~完结~~