资讯专栏INFORMATION COLUMN

angular的ViewModel设计

int64 / 2879人阅读

摘要:换言之,的对应的,此外它还有。它们共同构成的监控系统。和是相辅相成的。两者一起,构成了作用域的核心功能数据变化的响应。迭代的最大值称为。框架设计第三版,敬请期待

angular的ViewModel有一个专门的官方术语叫$scope, 它只是一个普通构造器(Scope)的实例。换言之,它是一个普通的JS对象。为了实现MVVM框架通常宣传的那种“改变数据即改变视图”的魔幻效果,它得装备上更多更强大的外挂。

名:
姓:

姓名: {{firstName + " " + lastName}}

app.controller会产生一个$scope对象, 这个$scope是传进去的。相当于:

var $scope = new Scope();
$scope.firstName = "Jane";
$scope.lastName = "Smith";

相对于avalon将所有vm扁平化地放到avalon.vmodels中,angular则倾向将$scope对象以树的形式组织起来。

function Scope() {
this.$id = nextUid();
      this.$$phase = this.$parent = this.$$watchers =
                     this.$$nextSibling = this.$$prevSibling =
                     this.$$childHead = this.$$childTail = null;
      this.$root = this;
      this.$$destroyed = false;
      this.$$listeners = {};
      this.$$listenerCount = {};
      this.$$watchersCount = 0;
      this.$$isolateBindings = null;
}

其中$parent$$nextSibling, $$prevSibling, $$childHead, $$childTail,$root是指向其他$scope对象。 $$watchers是绑定对象的订阅数组,$$watchersCount是其长度, $$listeners 是放手动触发的函数,$$listenerCount是其长度。

由于angular是一个普通的JS对象,当属性发生变化时,它本身不可能像avalon那么灵敏地跑去$fire。 于是它实现了一套复杂的$fire方法,但它不叫$fire, 叫做$digest

换言之,avalon的$watch对应angular的$watch,此外它还有$watchGroup, $watchCollection。avalon的$fire方法对应angular的$digest, 为了安全,它外面还有$applyAsync$apply, $evalAsync等几个壳函数。它们共同构成angular的监控系统。$watch$digest是相辅相成的。两者一起,构成了angular作用域的核心功能:数据变化的响应。

先看$watch方法, 传参比avalon复杂多,但结果都是返回一个移除监听的函数:

Scope.prototype.$watch: function(watchExp, listener, objectEquality, prettyPrintExpression) {
  //将表达式转换为求值函数
    var get = $parse(watchExp); 

    if (get.$$watchDelegate) {
      return get.$$watchDelegate(this, listener, objectEquality, get, watchExp);
    }
    
    var scope = this,
    //所有绑定对象都放在一个数组中,因此存在性能问题
        array = scope.$$watchers,
    //构建绑定对象
        watcher = {
          fn: listener,//刷新函数
          last: initWatchVal,//旧值
          get: get,//求值函数
          exp: prettyPrintExpression || watchExp,//表达式
          eq: !!objectEquality// 比较方法
        };

    lastDirtyWatch = null;

    if (!isFunction(listener)) {
      watcher.fn = noop;
    }

    if (!array) {
      array = scope.$$watchers = [];
    }
    array.unshift(watcher);
    incrementWatchersCount(this, 1);

    return function deregisterWatch() {//移除绑定对象
      if (arrayRemove(array, watcher) >= 0) {
        incrementWatchersCount(scope, -1);
      }
      lastDirtyWatch = null;
    };
},

而$digest则复杂多了,我们先实现它的一个简化版,遍历其所有绑定对象,执行其刷新函数。

Scope.prototype.$digest = function() {
  var list = this.$$watchers || []
  list.forEach(function(watch) {
    var newValue = watch.get()
    var oldValue = watch.last;
    if (newValue !== oldValue) {
      watch.fn(newValue, oldValue, self);
    }
    watch.last = newValue;
  })
}

到目前为止,它的逻辑与 avalon的一样,但要明白一点,avalon的监控是智能的,如果更新A属性,导致了B属性也发生变化,那么avalon也连忙更新B涉及的视图。而angular的$$watcher 里面都是一个个普通对象,假如里面有A,B两个对象。先执行A,A值没有变化,再执行B,B变化了,但B在变化时的同时,也修改了A值。但这时,循环已经完毕。B涉及的视图变动 ,A没有变动,这就不合理了。因此,我们需要在某个绑定对象发生了一次改动后,再重新检测这个数组。

我们把现在的$digest函数改名为$$digestOnce,它把所有的监听器运行一次,返回一个布尔值,表示是否还有变更了:

Scope.prototype.$$digestOnce = function() {
  var self  = this;
  var dirty;
  _.forEach(this.$$watchers, function(watch) {
    var newValue = watch.get();
    var oldValue = watch.last;
    if (newValue !== oldValue) {
      watch.fn(newValue, oldValue, self);
      dirty = true;
    }
    watch.last = newValue;
  });
  return dirty;
};

然后,我们重新定义$digest,它作为一个“外层循环”来运行,当有变更发生的时候,调用$$digestOnce

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

$digest现在至少运行每个监听器一次了。如果第一次运行完,有监控值发生变更了,标记为dirty,所有监听器再运行第二次。这会一直运行,直到所有监控的值都不再变化,整个局面稳定下来了。

但这里面有一个风险,比如A的求值函数里会修改B, B的求值函数又修改A,那么大家都无法稳定下来,不断死循环。因此我们得把digest的运行控制在一个可接受的迭代数量内。如果这么多次之后,作用域还在变更,就勇敢放手,宣布它永远不会稳定。在这个点上,我们会抛出一个异常,因为不管作用域的状态变成怎样,它都不太可能是用户想要的结果。

迭代的最大值称为TTL(short for Time To Live)。这个值默认是10,可能有点小(我们刚运行了这个digest 成千上万次),但是记住这是一个性能敏感的地方,因为digest经常被执行,而且每个digest运行了所有的监听器。

Scope.prototype.$digest = function() {
  var ttl = 10;
  var dirty;
  do {
    dirty = this.$$digestOnce();
    if (dirty && !(ttl--)) {
      throw "10 digest iterations reached";
    }
  } while (dirty);
};

但这只是模拟了angular的$digest的冰山一角,可见没有访问器属性这高阶魔法,想实现MVVM是非常麻烦与复杂,并且用户使用起来也别扭。

有关$digest的源码与解决可见这里

https://github.com/angular/an...

http://www.cnblogs.com/xuezhi...

我们再看$digest 是怎么与angular的ng-model 关联在一起。

ng-model指令有一个$post方法,它在里面进行绑定事件,如果用户提供了updateOn这个选项,选项是一些事件名,那么它就为元素绑定对应的事件,否则就绑定blur方法

post: function ngModelPostLink(scope, element, attr, ctrls) {
  var modelCtrl = ctrls[0];
  if (modelCtrl.$options.getOption("updateOn")) {
    element.on(modelCtrl.$options.getOption("updateOn"), function(ev) {
      modelCtrl.$$debounceViewValueCommit(ev && ev.type);
    });
  }
  function setTouched() {
    modelCtrl.$setTouched();
  }
  element.on("blur", function() {
    if (modelCtrl.$touched) return;

    if ($rootScope.$$phase) {
      scope.$evalAsync(setTouched);
    } else {
      scope.$apply(setTouched);
    }
  });
}

我们先看blur的回调,里面$evalAsync$apply方法,它们里面就会调用$digest,进行脏检测。

$evalAsync: function(expr, locals) {
  if (!$rootScope.$$phase && !asyncQueue.length) {
    $browser.defer(function() {
      if (asyncQueue.length) {
        $rootScope.$digest();
      }
    });
  }

 //...略
},
$apply: function(expr) {
  try {
    beginPhase("$apply");
    //...略
  } finally {
    try {
      $rootScope.$digest();
    } catch (e) {
      $exceptionHandler(e);
      throw e;
    }
  }
},

再看$$debounceViewValueCommit方法,里面也有一个$apply方法。换言之,殊途同归,全部汇在$digest里面处理。

但如果许多地方同时发生改变,会不会将它搞死呢?不会,我们留意一下$digest的源码最上方有一句 beginPhase("$digest"),临结束时也有一句clearPhase()$apply 里面也是 beginPhase("$apply")clearPhase(),它们标识这个$scope对象进行脏检测,直接抛错。

function beginPhase(phase) {
     if ($rootScope.$$phase) {
       throw $rootScopeMinErr("inprog", "{0} already in progress", $rootScope.$$phase);
     }

     $rootScope.$$phase = phase;
}

 function clearPhase() {
   $rootScope.$$phase = null;
 }

$apply会将错误catch住,不让它影响程序继续运行。这就是官方推我们使用$apply驱动程序运行,而不直接用$digest的缘故。

通过上面的分析,avalon与angular的设计重点是不同的,avalon是忙于发掘语言特征,通过访问器中的setter与getter将其那个简单的观察者模式放进去。angular则忙于构建其复杂无比的观察者模式(本节没有展现其全貌,它除了$$watchers队列,还有asyncQueue队列,postDigestQueue队列,applyAsyncQueue队列), 并且为了diff新旧值的不同,发展出一套名叫脏检测的机制。

from 《javascript框架设计》第三版,敬请期待

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87933.html

相关文章

  • 【教学向】150行代码教你实现一个低配版MVVM库(2)- 代码篇

    摘要:也放出地址,上面有完整工程以及在线演示地址相关阅读教学向行代码教你实现一个低配版的库原理篇教学向行代码教你实现一个低配版的库代码篇教学向再加行代码教你实现一个低配版的库设计篇教学向再加行代码教你实现一个低配版的库原理篇 书接上一篇: 150行代码教你实现一个低配版的MVVM库(1)- 原理篇 写在前面 为了便于分模块,和阅读,我使用了Typescript来进行coding,总行数是正好...

    loonggg 评论0 收藏0
  • MVC MVP MVVM

    摘要:,的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为,调用过程基本一致,最大的改良是间的双向绑定。和间,有一个对象,可以操作修改,使用。 参考:MVC,MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下:还原真实的MV...

    wushuiyong 评论0 收藏0
  • MVC MVP MVVM

    摘要:,的事件回调函数中调用的操作方法。以为例调用关系模式实际就是将中的改名为,调用过程基本一致,最大的改良是间的双向绑定。和间,有一个对象,可以操作修改,使用。 参考:MVC,MVP 和 MVVM 的图示 - 阮一峰http://www.ruanyifeng.com/blo...Web开发的MVVM模式http://www.cnblogs.com/dxy198...界面之下:还原真实的MV...

    Tangpj 评论0 收藏0
  • vue简单入门(一)vue是什么,为什么我们要学vue?

    摘要:是什么为什么我们要使用说到了,我们就不得不先聊一下是什么以及为什么我们要使用,他能给我们的开发带来什么样的便利呢首先,我们来看一下的自我介绍读音,类似于是一套用于构建用户界面的渐进式框架。 作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法,刚好今天没事就给自己挖一个坑,分享一下我对vue的见解和一些领悟,整个专栏应该会包括vue,vue-cli,vue-route...

    Lucky_Boy 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<