Scope的$watch和$digest原理

Posted 2020-06-09

在看完这个文章前，先别看官方指南。看完文章再去看指南会更清晰。因为本文章是angular的简易实现。

为了了解Scope的原理，可以先试着实现一个Scope。

最初的想法是：我们需要监测Scope对象的一个属性，当这个属性发生变化的时候我们做点什么。

所以按照angular的实现原理是这样的：

 

1. scope对象里面有一个数组：$$watcheres
2. $$watcheres数组里存放着对象watcher
3. watcher对象里面有两个方法：一个方法是用于获取Scope对象中某个属性的值，另一个方法是用来监测这个值是否变化。
4. watcher对象里还有一个属性，用于记录某属性最后一次的值。
5. 换句话说，如果你想监听Scope对象里的两个属性，$watcheres就该有两个watcher对象。
6. scope对象里有两个方法$watch,$digest。
7. $watch用于往$$watcheres里面放对象。
8. $digest用于去执行每一个watcher里面的监听方法。（这么说有点绕，可以结合着代码去看。）

 

所以现在可以根据以上想法写代码了。

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

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

Scope.prototype.$digest=function(){
  var self=this;
  _.forEach(self.$$watcheres,function(watcher){
    if(watcher.watchFn(self)!=watcher.last){
      watcher.listenFn(self);
    }
    else{
      console.log("没检测到有变化");
    }
    watcher.last=watcher.watchFn(self);
  });
};





scope1=new Scope();
scope1.name="王吉";
scope1.$watch(function(scope){
  return scope.name;
},function(scope){
  console.log(‘原来的值检测到有改变,现在是：‘+scope.name);
});

scope1.$digest();//第一次运行，会检测到有改变，因为last初始化的时候是空的。
scope1.$digest();//第二次运行，不会有改变，所以什么都不做。
scope1.name="帅哥";
scope1.$digest();//第三次运行，会有改变，当然会有改变。

 

在线代码在这里：http://jsbin.com/barikutuni/edit?js,console