依赖收集是 Vue.js 和 Mobx.js 核心的之一。本段代码实现调用多个new Queue().task()进行依赖收集,在调用start()的时候再触发依赖
//依赖
function Dep(){
this.deps=[];
this.target=null
}
Dep.prototype.getDeps=function(){
if(!this.target) return
this.deps.push(this.target)
}
Dep.prototype.notify=async function(){
for(var index in this.deps){
var item =this.deps[index]
await item.fn(item.time,item.callback)
}
}
var dep = new Dep()
//队列函数
function Queue(){
this.time=''
}
Queue.prototype.task=function(time,callback){
dep.target={
time:time,
fn:this.fn,
callback:callback
}
dep.getDeps()//收集依赖
dep.target=null
}
Queue.prototype.fn=function(time,callback){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(time)
callback()
},time)
})
}
Queue.prototype.start=function(){
console.log('start')
dep.notify()//触发依赖
}
var queue=new Queue()
queue.task(3000, () => {console.log(3000)})
queue.task(2000, () => {console.log(2000)})
queue.start()