fgoll / fastdom Goto Github PK

fastdom.measure(function() {
	var top = ball.offsetTop;
	fastdom.mutate(function() {
            ball.style.left = ((Math.sin(ball.offsetTop + timestamp/1000) + 1) * 500) + 'px'
	});
});

var FastDom = function() {
  this.reads = [] // 记录读操作的队列
  this.writes = [] // 记录写操作的队列
}

Fastdom.prototype = {
  measure: function(func) {
    this.reads.push(func) // 读操作入队
  },
  mutate: function(func) {
    this.writes.push(func) // 写操作入队
  },
}

var FastDom = function() {
  this.reads = [] // 记录读操作的队列
  this.writes = [] // 记录写操作的队列
}

Fastdom.prototype = {
  measure: function(func) {
    this.reads.push(func) // 读操作入队
    this.schedule() // 调度
  },
  mutate: function(func) {
    this.writes.push(func) // 写操作入队
    this.schedule() // 调度
  },
  schedule() {  }
}

Fastdom.prototype = {
  ...,
  runTasks: function(tasks) {
    var task; while (task = tasks.shift()) task();
  },
}

Fastdom.prototype = {
  ...,
    flushTasks() {
      this.runTasks(this.reads)
      this.runTasks(this.writes)
  },

}

Fastdom.prototype = {
    flushTasks() {
      this.runTasks(this.reads)
      this.runTasks(this.writes)
      this.lock = false // 解锁
  },
  schedule() { 
      if (this.lock) return
      this.lock = true // 锁上
      this.flushTasks() // 执行读写操作,  <<<思考>>>
  }
}

Fastdom.prototype = {
    flushTasks() {
      this.runTasks(this.reads)
      this.runTasks(this.writes)
      this.lock = false // 解锁
  },
  schedule() { 
      if (this.lock) return
      this.lock = true // 锁上
      window.requestAnimationFrame(this.flushTasks.bind(this)) // RAF
  }
}

const update = () => {
  dom.style.width = dom.offsetTop + Math.random() * 500 + 'px' 
  window.requestAnimationFrame(update)
}