美文网首页自制前端框架Web前端之路让前端飞
自制前端前端框架 Day17. 完善digest

自制前端前端框架 Day17. 完善digest

作者: 蚊子爸爸 | 来源:发表于2017-06-17 22:26 被阅读43次

如果digest遇到了死循环该如何处理

假设有两个watcher,在digest的时候互相更改对方的值,这会导致digest遇到死循环。于是应该给digest循环增加一个上限,达到上限却依然有脏值的时候,抛出异常:

Scope.prototype.$digest=function(){
    var dirty;
    var ttl = 10;
    do {
        dirty = this.$$digestOnce();
        if(dirty&&!(ttl--)){
            throw "digest次数到达上限依然不稳定"
        }
    } while (dirty);
}

如果有1000个watcher,每次digest都会把所有watcher跑一遍,效率太差了,怎么办

这个问题的解决思路是这样的:首先,我先记住上一次digest的最后一个脏watcher,比如有100个watcher,每次检测到脏watcher的时候,我都把这个watcher记录到一个变量里,这个变量叫做$$lastDirtyWatch 这个变量只记录一个watcher,就是最后遇到的那个脏watcher:

Scope.prototype.$$digestOnce=function(){
    var self = this;
    var oldValue,newValue,dirty;
    for(var i=0;i<this.$$watchers.length;i++){
        oldValue = this.$$watchers[i].last;
        newValue = this.$$watchers[i].watchFn(self)
        if(oldValue!=newValue){
            this.$$lastDirtyWatch=this.$$watchers[i];//新加的一句话
            this.$$watchers[i].last = newValue;
            this.$$watchers[i].listenFn(newValue,oldValue,self);
            dirty=true;
        }
    }
    return dirty;
}

这样一来会有这样的效果,如果第49个watcher是脏的,那么this.$$lastDirtyWatch就指向第49个watcher,然后第55个是脏的,this.$$lastDirtyWatch就不再指向第49个watcher,而指向第55个watcher。
那么很显然:如果我们发现this.$$lastDirtyWatch这个指向第N个watcher,就说明N以后的watcher是干净的。
所以在digest循环的时候,每次检测watcher是否脏的时候,都去做一下对比,看看当前的watcher是不是this.$$lastDirtyWatch指向的那个watcher,如果是的话,就可以处理以后直接跳出循环了,因为后面的watcher都是干净的,没必要再循环一次了。

Scope.prototype.$$digestOnce=function(){
    var self = this;
    var oldValue,newValue,dirty;
    for(var i=0;i<this.$$watchers.length;i++){
        oldValue = this.$$watchers[i].last;
        newValue = this.$$watchers[i].watchFn(self)
        if(oldValue!=newValue){
            this.$$lastDirtyWatch=this.$$watchers[i];
            this.$$watchers[i].last = newValue;
            this.$$watchers[i].listenFn(newValue,oldValue,self);
            dirty=true;
        }else{
            if(this.$$watchers[i]===this.$$lastDirtyWatch){
                return false;
            }
        }
    }
    return dirty;
}

相关文章

  • 自制前端前端框架 Day17. 完善digest

    如果digest遇到了死循环该如何处理 假设有两个watcher,在digest的时候互相更改对方的值,这会导致d...

  • 自制前端前端框架 Day19. 完善脏值检测

    现在脏值检测还有什么问题? 目前的脏值检测只能检测基本的值,比如string和Number。看一个测试案例: 这个...

  • 自制前端框架Day22.完善evalAsync

    目前的evalAsync机制 就是在每次$digestOnce以后执行一下async队列内的eval函数。可是目前...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • Bootstrap - 全局样式

    学习Bootstrap之前,传统前端开发过程中的问题: Bootstrap作为一套完善的前端样式框架:为我们提供了...

  • 前端UI框架的定义

    在聊前端UI框架的定义之前,我们聊聊前端框架的用处,为什么使用前端框架?开发什么项目才会使用到前端框架?其实这些都...

  • 自制简易前端MVC框架

    周末花了大概7小时写了一个简易的响应式blog,原意是练习css的,写着写着却去实现了一套前端路由并渲染的东西,这...

  • Vue 2.0 从初始化到编译打包发布

    说明前端 vue 框架不知不觉就这样火起来了,生态圈也是逐渐在完善,后台也是彻底分离了数据给前端,就类似ios 和...

  • NodeJS--01

    前端框架的发展历史 一篇文章了解前端框架演变前端框架的发展现状与趋势The best of JavaScript,...

  • 迅雷前端实习生招聘

    岗位介绍 1.负责迅雷(PC端/移动端)前端业务开发和优化 2.负责前端业务框架、工具链的不断完善 在这里,你可以...

网友评论

    本文标题:自制前端前端框架 Day17. 完善digest

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