写在前面

之前写博客是为了记录自己的开发过程，没指望有人看，所以写的非常凌乱。没想到的是在这些日子里，竟然会有其他人看我的博客并给我评论留言，我感到受宠若惊。所以我要求自己写博客要写的更容易让别人看懂，把自己的所想所得分享出去，如果有人看了我的博客，我希望的文字能对得起别人花费的时间。

前端框架是什么

其实前端框架做的事情都一样，无非是解决了如何用数据来渲染页面的问题：在我看来，无论react还是vue还是angular，其实都是controller+view。
拿我最熟悉的angular来说，数据与页面的绑定就是scope与compile的绑定。
之前写表达式解析部分写的头晕，决定换换脑子，写写scope。

scope的本质

scope其实就是一个普通对象，只不过上面封装了很多方法而已。

scope的数据监测机制

在angular的scope中，有两个部分是数据监测的关键，$watch和$digest。我目前不清楚vue的数据变化监测是什么机制，但是angular的是脏值监测，本质是给scope对象上增加watcher。

watcher是什么

watcher监控scope的某一个属性，并且当属性变化的时候执行回调函数。

$digest()是什么

digest负责把每一个watcher都检查并且运行一次。

今天先决定写这个部分。

在scope的对象上有很多watcher，所以要有一个地方存放这些watcher。

function Scope(){
    this.$$watchers=[]
}

scope有$watch函数，这个函数接受两个参数，第一个参数用于指定该watcher监听的属性，第二个是属性变化的时候执行的回调函数。

Scope.prototype.$watch=function(watchFn,listenFn){
    var watcher = {
        watchFn:watchFn,
        listenFn:listenFn
    }
    this.$$watchers.push(watcher);
}

$digest是用来执行所有watcher的listen方法，也很简单，遍历一下，执行就可以

Scope.prototype.$digest=function(){
    for(var i=0;i<this.$$watchers.length;i++){
        this.$$watchers[i].listenFn();
    }
}

写一个测试案例试试看：

describe('scope', function() {
    var scope;
    beforeEach(function(){
        scope=new Scope()
    })
    it('scope可以赋值', function() {
        scope.name='wangji'
        expect(scope.name).toBe('wangji');
    });
     it('scope的watch和digest方法执行正常', function() {
        var watchFn=function(){
            return 'name'
        }
        var listenFn=jasmine.createSpy();
        scope.$watch(watchFn,listenFn);
        scope.$digest();
        expect(listenFn).toHaveBeenCalled();
    });
});

顺利执行

watcher的实现就是典型的一种观察者模式

watcher有两个方法，一个是watchFn，一个是listenFn。watchFn用于获取scope上某一个属性的值：

watchFn=function(scope){
    return scope.id//这个watcher用于监听scope.id的值
}

listenFn是一个回调函数，这样一来就是很典型的观察者模式：一个方法用来监听某个对象的值，另一个方法是当监听到相应动作时候执行。

脏值检测的实现

每一个watcher既然能获取scope上的一个属性值，那么应该也可以保存上次的值。然后运行一次digest，把每一个watcher跑一次，如果这次拿到的值和上次保存的值不同，说明值是脏的，就可以运行listenFn回调函数，典型的观察者模式。

function Scope(){
    this.$$watchers=[]
}
Scope.prototype.$watch=function(watchFn,listenFn){
    var watcher = {
        watchFn:watchFn,
        listenFn:listenFn,
        last:''
    }
    this.$$watchers.push(watcher);
}
Scope.prototype.$digest=function(){
    var self = this;
    var oldValue,newValue;
    for(var i=0;i<this.$$watchers.length;i++){
        oldValue = this.$$watchers[i].last;
        newValue = this.$$watchers[i].watchFn(self)
        if(oldValue!=newValue){
            this.$$watchers[i].last = newValue;
            this.$$watchers[i].listenFn();
        }
    }
}

执行以下案例看看效果

    it('脏值检测',function() {
        scope.id=2;
        var watchFn=function(scope){
            return scope.id;
        }
        var listenFn=function(){
              console.log('listen!')
        }
        scope.$watch(watchFn,listenFn);
        scope.$digest();
    })

运行$digest方法时，期望中是这样的：
watcher的last值最初是空的，调用watchFn后拿到id属性的值，是2，进行对比，不相等，然后执行了listenFn，打印出listen！这句话。同时，watcher的last被设置为新值，也就是2.
来运行一下试试：