angularjs中脏检查的示例分析

AngularJs是mvvm框架,它的组件是vm组件,范围是vm组件的数据集合

AngularJs通过指令来声明vm的行为,它实现为一个观察者,监听范围的属性的变化,把最新的属性更新UI

AngularJs的双向绑定:如:一个是将美元范围属性值绑定到HTML结构中,当美元范围属性值发生变化的时候界面也发生变化;另一个是,当用户在界面上进行操作,例如点击,输入,选择时,自动触发美元范围属性的变化(界面也可能跟着变)

监听范围的属性变更:脏检查(脏检查)

<李>

角根本不监听数据的变动,而是在恰当的时机(看美元)从美元rootScope开始遍历所有美元范围,

<李>

检查它们上面的属性值是否有变化,如果有变化,就用一个变量脏记录为真,再次进行遍历(消化美元),

<李>

如此往复,直到某一个遍历完成时,这些美元范围的属性值都没有变化时,结束遍历。

<李>

由于使用了一个脏变量作为记录,因此被称为脏检查机制。

简而言之:当作用域创建时,角会去解析模板,将绑定值和事件调用找出来并用美元看绑定;

范围。看美元(字符串|函数,侦听器,,objectEquality,, prettyPrintExpression)//,字符串:验证值或者函数执行后返回的字符串 　　://,侦听器,如果验证值不同,则执行该监听函数//,objectEquality:执行深检查以前 <李>

完成绑定后,就会自动检测这些属性的变化,执行看美元,那么对应的信息被绑定到角内部的一个$ $观察人士中,

<李>

它是一个队列数(组),而当美元消化被触发时,角就会去遍历这个数组,

<李>

并且用一个脏变量记录$ $观察家里面记录的那些美元范围属性是否有变化

接下来的流程:

<李>

判断脏是否为真,如果为假,则不进行消化美元递归。(脏默认为true)

<李>

遍历$ $观察家,取出对应的属性值的老值和新值根据objectEquality进行新老值的对比。

<李>

如果两个值不同,则继续往下执行。如果两个值相同,则设置脏为假的。

<李>

检查完所有的观察家之后,如果脏还为真的,设置脏为真正的用新值代替老值;

<李>

这样,在下一轮递归的时候,老值就是这一轮的新值再次调用美元消化(简单说就是执行两次递归遍历检查新旧值变化)

<李>

将变化后的美元范围重新渲染到界面

<李>

一般不调用美元消化,调用美元,它内部会触发美元消化递归遍历

<李>

角的内部指令封装了美元,比如ng-click,所以一般不用手动调用适用

<李>

部分时候需要手动触发

函数(超时),{//才能,当我们通过在(& # 39;点击# 39;)的方式触发某些更新的时候,可以这样做 　　美元才能超时((),=祝辞,{,//内置语法糖,http,美元,美元超时已经包含了申请 　　,,,scope.name 美元;=,& # 39;莉莉# 39; 　　})才能//才能,也可以这样做 　　美元才能element.on(& # 39;点击# 39;,,(),=祝辞,{ 　　,,,scope.name 美元;=,& # 39;大卫# 39; 　　,,,的范围。应用()美元 　　})才能 　　} <编辑id="注意:在递归过程中,绝对不能手动调用申请,比如在ng-click的函数中,比如在手表的回调函数中。”>注意:在递归过程中,绝对不能手动调用美元,比如在ng-click的函数中,比如在看美元的回调函数中。

最后,实现一个简易脏检查机制

& lt; ! DOCTYPE  html> 　　& lt; html> 　　 　　& lt; head> 　　& lt;才能meta  charset=癠TF-8"比; 　　& lt;才能meta  name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比; 　　& lt;才能meta  http-equiv=癤-UA-Compatible",内容=癷e=edge"比; 　　& lt;才能title> angularjs脏检查实现& lt;/title> 　　& lt;/head> 　　& lt; style 类型=拔谋?css"比; 　　button {才能 　　,,,身高:,60 px; 　　,,,宽度:,100 px; 　　,,} 　　 　　p {才能 　　,,,margin-left:, 20 px; 　　,,} 　　& lt;/style> 　　 　　& lt; body> 　　& lt;才能div> 　　,,,& lt; button 类型=癰utton", ng-click=癷ncrease"在增加& lt;/button> 　　,,,& lt; button 类型=癰utton", ng-click=癲ecrease"在减少& lt;/button> 　　,,,数量:& lt; span  ng-bind=癲ata"在0 & lt;/span> 　　& lt;才能/div> 　　& lt;才能br> 　　& lt;/body> 　　& lt; script> 　　时间=window.onload 才能;function  (), { 　　,,,/* * 　　,,,,*,声明构造函数 　　,,,*/,,,function 范围(),{ 　　,,,,,这个。$ $ watchList =,[];,//,角内部会声明一个数组(包含监听的对象),在消化执行时去遍历 　　,,,} 　　 　　,,,/* * 　　,,,,*,属性赋值给美元范围 　　,,,,*,类似角解析控制器的模板,把模板中的属性解析出来,属性赋值给美元范围 　　,,,*/,,,Scope.prototype.getNewValue =, function  (), { 　　,,,,,return 美元范围(this.name); 　　,,,} 　　 　　,,,/* * 　　,,,,*,实现监听 　　,,,*/,,,Scope.prototype watch 美元;=,function (名称,侦听器),{ 　　,,,,,let  watch =, { 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

angularjs中脏检查的示例分析