自制前端框架Day16.循环检测脏值

完善一下watcher的listenFn函数

目前的scope代码很简单，watch方法用来注册一个watcher，digest方法用来执行所有的watcher，将执行后的值和上一次的值进行比对，如果不一样，就执行watcher的listen方法：

问题是，如果我想在listen这个回调函数里面拿到新值和旧值进行操作，目前是不行的，看看下面的代码。

Scope.prototype.$digest=function(){
    var self = this;
    var oldValue,newValue;
    for(var i=0;i

完善一下吧，在调用listenFn的时候把数据传进去，改成这样：

this.$$watchers[i].listenFn(newValue,oldValue,self);

其实从这个角度来看，回调函数几乎就是JAVA中的接口：我们定义了watcher对象，我们规定了watcher对象要有watchFn和listenFn，我们规定了listenFn在符合条件的时候执行，我们规定了listenFn函数需要的参数，用户只需要写一个和我们规定的listenFn函数一模一样的函数就可以使用。

还有一个问题，如果我有两个watcher，第一个watcher执行完以后，数据是干净的，可是第二个watcher又改变了属性值，把数据变脏了，这时候第一个watcher并不知道，所以它的listenFn也不会执行。
解决这个问题的思路是：为了防止某个listenFn在其他watcher不知情的时候操作其他的数据，我可以设置一个标志位，只要listenFn被执行过一次，那么这个标志位就是脏的，当digest结束后，如果这个标志位是脏的，那么就说明在digest的时候执行过listenFn，也许这个listenFn操作了不该操作的数据，于是就要再执行一次digest。
这样看来，先把$digest方法改名为$digestOnce比较好。

Scope.prototype.$digestOnce=function(){
    var self = this;
    var oldValue,newValue,dirty;
    for(var i=0;i

然后外面再写一个循环，来不断检测$digestOnce方法是否返回了dirty。

Scope.prototype.$digest=function(){
    var dirty;
    do {
        dirty = this.$digestOnce();
    } while (dirty);
}

写一个测试案例跑一下试试：

it('digest循环', function() {
        var i=0;
        var j=0;
        scope.name='wangji';
        scope.age=22;
        var watchFn1 = function(scope){
            return scope.name
        };
        var listenFn1 = function(newvalue,oldvalue,scope){
            console.log('第'+i+'次执行watchFn1');
            console.log('oldvalue:'+oldvalue);
            console.log('newvalue:'+newvalue);
            i++;
        }
        var watchFn2 = function(scope){
            return scope.age
        };
        var listenFn2 = function(newvalue,oldvalue,scope){
            console.log('第'+j+'次执行watchFn2');
            console.log('oldvalue:'+oldvalue);
            console.log('newvalue:'+newvalue);
            scope.name='hahaha';
            j++;
        }
        scope.$watch(watchFn1,listenFn1);
        scope.$watch(watchFn2,listenFn2);

        scope.$digest();

    });

能够如期执行：

image.png