没有合适的资源?快使用搜索试试~ 我知道了~
写在开头 关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比较,所以非常损耗性能。 这是大错而特错的。我甚至在新浪前端面试的时候胡说一通,现在想来真是羞愧难当! 没有深入了解就信口开河实在难堪大任。 最后被拒也是理所当然。 误区纠正 首先纠正误区,Angular并不是周期性触发藏检查。 只有当UI事件,ajax请求或者 timeout 延迟事件,才会触发脏检查。 为什么叫脏检查? 对脏数据的检查就是脏检查,比较UI和后台的数据是否一致! 下面解释: $watch 对象。 Angular 每一个绑定到UI的数据,就会
资源推荐
资源详情
资源评论
AngularJS的脏检查深入分析的脏检查深入分析
写在开头写在开头
关于Angular脏检查,之前没有仔细学习,只是旁听道说,Angular 会定时的进行周期性数据检查,将前台和后台数据进行比
较,所以非常损耗性能。
这是大错而特错的。我甚至在新浪前端面试的时候胡说一通,现在想来真是羞愧难当! 没有深入了解就信口开河实在难堪大
任。
最后被拒也是理所当然。
误区纠正误区纠正
首先纠正误区,Angular并不是周期性触发藏检查。
只有当UI事件,ajax请求或者 timeout 延迟事件,才会触发脏检查。
为什么叫脏检查? 对脏数据的检查就是脏检查,比较UI和后台的数据是否一致!
下面解释:
$watch 对象。对象。
Angular 每一个绑定到UI的数据,就会有一个 $watch 对象。
这个对象包含三个参数
watch = {
name:'', //当前的watch 对象 观测的数据名
getNewValue:function($scope){ //得到新值
...
return newValue;
},
listener:function(newValue,oldValue){ // 当数据发生改变时需要执行的操作
...
}
}
getNewValue() 可以得到当前$scope 上的最新值,listener 函数得到新值和旧值并进行一些操作。
而常常我们在使用Angular的时候,listener 一般都为空,只有当我们需要监测更改事件的时候,才会显示地添加监听。
每当我们将数据绑定到 UI 上,angular 就会向你的 watchList 上插入一个 $watch。
比如:
<span>{{user}}</span>
<span>{{password}}</span>
这就会插入两个$watch 对象。
之后,开始脏检查。
好了,我们先把脏检查放一放,来看它之前的东西
双向数据绑定 ! 只有先理解了Angular的双向数据绑定,才能透彻理解脏检查 。
双向数据绑定双向数据绑定
Angular实现了双向数据绑定。无非就是界面的操作能实事反应到数据,数据的更改也能在界面呈现。
界面到数据的更改,是由 UI 事件,ajax请求,或者timeout 等回调操作,而数据到界面的呈现则是由脏检查来做.
这也是我开始纠正的误区
只有当触发UI事件,ajax请求或者 timeout 延迟,才会触发脏检查。
看下面的例子
<div ng-controller="CounterCtrl">
<span ng-bind="counter"></span>
<button ng-click="counter=counter+1">increase</button>
</div>
function CounterCtrl($scope) {
$scope.counter = 1;
}
毫无疑问,我每点击一次button,counter就会+1,因为点击事件,将couter+1,而后触发了脏检查,又将新值2 返回给了界面.
这就是一个简单的双向数据绑定的流程.
但是就只有这么简单吗??
看下面的代码
'use strict';
var app = angular.module('app', []);
app.directive('myclick', function() {
return function(scope, element, attr) {
element.on('click', function() {
scope.data++;
console.log(scope.data)
})
}
})
app.controller('appController', function($scope) {
$scope.data = 0;
});
<div ng-app="app">
<div ng-controller="appController">
<span>{{data}}</span>
<button myclick>click</button>
</div>
</div>
点击后,毫无反应.
试试在 console.log(scope.data) 后面添加 scope.$digest(); 试试?
很明显,数据增加了。如果使用$apply () 呢? 当然可以(后面会接受 $apply 和 $digest 的区别)
为什们呢?
假设没有AngularJS,要让我们自己实现这个类似的功能,该怎么做呢?
<body>
<button ng-click="increase">increase</button>
<button ng-click="decrease">decrease</button>
<span ng-bind="data"></span>
<script src="app.js"></script>
</body>
window.onload = function() {
'use strict';
var scope = {
increase: function() {
this.data++;
},
decrease: function decrease() {
this.data--;
},
data: 0
}
function bind() {
剩余8页未读,继续阅读
资源评论
weixin_38567873
- 粉丝: 5
- 资源: 887
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功