2021-03-18

// nextick 实现原理
function update() {
  queueWatcher(this)
}

let queue = []
let hash = {}
let pending = false
// 通过flushScheduleQueue将更新队列的watcher执行
function flushScheduleQueue() {
  queue.forEach(watcher => {
    watcher.run()
    watcher.cb()
  })
  queue = []
  hash = {}
  pending = false
}
// 通过queueWatcher将需要批量更新的watcher存在一个队列之中,并做哈希去重操作
function queueWatcher(watcher) {  
  const id = watcher.id
  if(hash[id] ==  null) {
    queue.push(watcher)
    hash[id] = true
    if(!pending) {
      nextick(flushScheduleQueue)
      pending = true
    }
  }
}
// nextick
let cbList = []
function flushCallback() {
  while(cbList.length) {
    let cb = cbList.shift()
    cb()
  }
  pending = false
}

// vue和用户都可以使用nextick
function nextick(cb) {
  cbList.push(cb)
  if(!pending) {
    timerFunc()
    pending = true
  }
}
// nextick兼容处理
let timerFunc
if(Promise) {
  timerFunc = () => {
    Promise.resolve().then(flushCallback)
  }
} else if(MutationObserver) { // 监视dom变化
  let observer = new MutationObserver(flushCallback)
  let textNode = document.createTextNode(1)
  observer.observe(textNode, { characterData: true })
  timerFunc = () => {
    textNode.textContent = 2
  }
} else if(setImmediate) {
  timerFunc = () => {
    setImmediate(flushCallback)
  }
} else {
  timerFunc = () => {
    setTimeout(flushCallback)
  }
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值