zoukankan      html  css  js  c++  java
  • angular源码分析6-脏值检测实现

    scope树状结构

    angular内置一个 $rootScope服务,rootScope是angular作用范围的顶级作用域,也是作用域的源头。$rootScope可以产生子scope,子scope可以产生子scope,最终生成一个以rootScope为根节点的scope树。如下图所示:

     Scope是一个构造器函数,new Scope就创建了一个子作用域,并且这个子作用域是由其父作用域创建的。

    下面用代码模拟实现一个scope是如何工作的,是如何实现数据绑定和脏值检测的。

    脏值检测实现

    指令的作用域是构造函数Scope的实例,即作用域是一个Scope实例化的对象。

    $watch方法用来注册监听的作用于域的的值,当值发生变化时,执行相应的操作。

     

    $digest方法用来触发某个scope对象脏值检测。脏值检测触发开始后,如果在一轮检测过程中,存在newVaule与oldValue不同,这一轮脏值检测结束后,会进入下一轮脏值检测,直到所有的newValue和oldValue值限公或执行的轮数超过指定的脏值检测最大的轮数,结束脏值检测。

    $apply触发脏值检测,相比较$digest,(1)$apply先执行传入的参数(函数),$digest没有传参 (2)$apply然后从根节点触发脏值检测,使根作用域和其子作用域都进行脏值检测,$digest只是触发当前作用域的脏值检测 (3)最后,$apply返回传入的函数执行的结果。

    使用实例

    实例1

    实例2(ng-bind)

    ng-bind指令实现

    如下angular内置的指令ng-bind,在链接阶段,执行postLink即函数ngBindLink时,对ng-bind的值监听注册,当ng-bind的值改变时,就更新ng-bind所属的元素的节点显示值。

    ng-bind使用

    html模板

    自定myDirective指令,模板中使用了ng-bind指令。

    浏览器上显示结果,显示了绑定的scope.color的值。

    下面看一下scope.color第一次绑定到div的过程。

    html文档加载完以后,开始调用angularInit方法初始化angular。执行1489行到第1492行代码,编译链接所有指令后,调用$apply触发脏值检测,从根作用域到所有子作用域都进行脏值检测,这样绑定的数据显示在view上。在定义ng-bind指令时,监听注册了ng-bind的值。在脏值检测时,scope.color有undefind变为'red',值发生了改变,调用ngBindWatchAction监听函数,更新view的值,即ng-bind所属的div的值为red。

  • 相关阅读:
    k8s 基础 pod操作
    python 字典 get 小例子
    linux 日志
    python 基础 文件操作
    k8s 基础 k8s架构和组件
    k8s 基础 核心概念
    HDU1272--小希的迷宫(并查集)
    POJ1182--食物链(经典并查集)并查集看不出来系列2
    HDU 3038 How Many Answers Are Wrong (并查集)---并查集看不出来系列-1
    二分快速幂
  • 原文地址:https://www.cnblogs.com/fe-huahai/p/7102628.html
Copyright © 2011-2022 走看看