码迷,mamicode.com
首页 > 其他好文 > 详细

Scope的$watch和$digest原理

时间:2016-01-27 00:50:59      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:

在看完这个文章前,先别看官方指南。看完文章再去看指南会更清晰。因为本文章是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

Scope的$watch和$digest原理

标签:

原文地址:http://www.cnblogs.com/oukichi/p/5161965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!