LeeeeeeM / blog

daily blog
0 stars 0 forks source link

最后的整合,Vue与快应用发送指令策略。 #21

Open LeeeeeeM opened 5 years ago

LeeeeeeM commented 5 years ago

技术背景: 在web浏览器中,浏览器对ua暴露了DOM接口,所以开发者只需要调用最底层的appendChild、insertBefore、removeChild三个最基本的api就可以完成大部分的开发(setAttribute也是很常见的)。 但是在其他实现DOM的平台上,渲染引擎并没有对外直接暴露API。所以这个时候需要实现一个专门向渲染引擎发送指令的通道,这些指令包括insert/append/remove/update等。 在浏览器中,这些发送这些指令(append/insert等)是同步的,在浏览器底层却是使用其他线程异步操作的。 这个在快应用的xvm框架里面使用的是同步发送指令。为了提升性能,这里决定使用异步发送。 所以这里我在发送指令的实例streamer内增加了异步发送策略。开发者可以传入Promise.reslove().then或者setTimeout,但是我比较懒,直接把Vue的Vue.nextTick传入strategy。以下是部分代码

sendAsync (id, actions) {
    if (actions) {
      this.list = this.list.concat(actions)
    }
    if (this._sendTick) return
    const fn = () => {
      const list = this.list.splice(0)
      list.length && this.call(id, list)
      this._sendTick = null
    }
    this._sendTick = this._stragegy(fn)
  }