美文网首页
MutationObserver

MutationObserver

作者: 绝尘kinoko | 来源:发表于2021-05-13 16:52 被阅读0次

今天在看vue源码nextTick实现部分发现如下代码

let counter = 1
const observer = new MutationObserver(flushCallbacks)
const textNode = document.createTextNode(String(counter))
observer.observe(textNode, {
  characterData: true
})
timerFunc = () => {
  counter = (counter + 1) % 2
  textNode.data = String(counter)
}

判断可用MutationObserver的情况下赋予timerFunc实体
看了MDN后大概知道是怎么异步执行的,但是其中config部分不是很明白,文档没有解释,只有三个枚举。
首先是自己测试

function fn (mutationsList, observer) {
  console.log(mutationsList, observer)
}
let ob = new MutationObserver(fn)
let text = document.createTextNode('1')
ob.observe(text, {
  characterData: true
})
// trigger
text.data = '2'

console结果

console.png
因为我没有对dom结构操作,所以关心的还是type,只知道修改TextNode.data属于characterData改动。
测试无果,百度如下:
MutationObserver Config
  • childList:
    添加、删除目标节点的子节点时会收到通知(子节点的后代节点添加或删除时不会收到通知)
  • attribute:
    修改目标节点属性时会收到通知
  • characterData:
    观察目标节点下所有文本类型节点(即子代或后代)的文字变化(注意:添加、删除文本节点不会被观察到,如果改变之前的类型不是文本节点也不会被观察到),该属性只能配合subtree使用。
  • subtree:
    目标节点或后代节点变更时都会触发,必须配合其他属性一起使用
  • attributeOldValue:
    如果属性为true或者省略,则相当于设置为true,表示需要记录改变前的目标属性值,设置了attributeOldValue可以省略attributes设置
  • characterDataOldValue:
    如果characterData为true或省略,则相当于设置为true,表示需要记录改变之前的目标数据,设置了characterDataOldValue可以省略characterData设置
  • attributeFilter:
    attributes设置为true或者被忽略时可以自定义需要观察的属性名称数组
    更详细内容可参考:
    https://www.cnblogs.com/94pm/p/11196423.html

相关文章

  • dom 修改 更新

    MutationObserver MutationObserver[https://developer.mozil...

  • MutationObserver是什么?

    目录 MutationObserver概览 MutationObserver构造器 MutationObserve...

  • 不“知名”API大集合

    MutationObserver MutationObserver 是一个可以监听DOM结构变化的接口。 Muta...

  • MutationObserver

    链接:https://www.jianshu.com/p/90f042c9e42f作者:凝黛色 MutationO...

  • MutationObserver

    MutationObserver 是一个可以监听DOM结构变化的接口。 官方使用方式示例 示例引用链接 https...

  • MutationObserver

    用于监视DOM树的变更,可兼容到IE11其监听回调属于微任务

  • MutationObserver

    今天在看vue源码nextTick实现部分发现如下代码 判断可用MutationObserver的情况下赋予tim...

  • js之MutationObserver

    百度搜索 mdn MutationObserver

  • MutationObserver、IntersectionObs

    MutationObserver用于监控DOM节点的变化,如 属性变化、子节点增删改、子树的变化等 Interse...

  • MutationObserver用法

    Mutation Observer API 用来监视 DOM 变动。比如节点的增减、属性的变动、文本内容的变动。 ...

网友评论

      本文标题:MutationObserver

      本文链接:https://www.haomeiwen.com/subject/wklxjltx.html