angularjs1.x和Angular的脏值检测有什么区别??

all2005
  • 3.4k

谁可以实现一个脏值检测的库?

回复
阅读 1.1k
2 个回答

在angularJS里面通过ng-**或者“{{}}”的标记,标记为ng的元素,目的是为了对特定元素进行监控,让被监控元素与数据模型做映射。当映射关系建立好之后,就需要实现一个效果,既数据模型修改后同步视图(页面),视图修改后同步controller里面的视图模型。

  1. 检查触发方式:http 请求 , 界面特定元素的点击或者输入框失去焦点事件等等(包括页面加载事件),路由改变事件。

图片描述
因此,

2、如何进行检查:当检查被触发后,总是会调用$scope.$apply(),再无改变时调用$scope.$apply()总是会报错,原因如下图:图片描述

所以,可以自己封装一个函数

function myDigist(fn){
    if (!$rootScope.$$phase){
        $scope.$apply(fn);
    }
}

在进行脏检查时,首先来说一下scope的结构,在构建一个AngularJS 应用时,根据应用实际情况,(比如说路由、模块等)。以rootScope为根节点,建立一棵树,为每个scope上的每个属性建一个watch,放进当前scope的watch队列里面。然后开始脏检查,脏检查使用三层循环,一层遍历异步队列与脏,一层遍历scope,一层遍历watch,如图:
图片描述

如何同步页面?每个watch中存储了旧值与值,直接比较,然后更新页面,通过element.nodeValue = value或其他的方式。

在Angular中,未完待续

楼上已经非常详细了,我补充个大体思路,
在angular.js中,脏检查是将当前控制器中所有$scope中的内容进行无差别遍历比较,之后渲染。注意这是在宏队列中执行,也就是每次都将进行一遍页面渲染。
在angular中,引入Zone.js,这个包就是专门针对脏检查的,策略大致理解为:筛选/订阅/延迟限定次数并行。
筛选:不再遍历所有变量,而是通过父组件筛选变动的子组件,尽量向下查找
订阅:绑定关系后只执行发布动作
延迟/限定次数:在每秒内最多执行10次微任务改动,之后结束微任务,利用浏览器GUI机制合并改动,一次渲染。

宣传栏