用typecho做的网站,拓客系统,中国轻工建设公司网站,同城信息小程序源码这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定#xff08;data-binding#xff09;是怎么工作的#xff0c; 如果你已经熟悉如何使用angularjs了#xff0c;我强烈建议你不用阅读了。 angularjs使用者想要知道data-binding是如何工作的#xff0c;就会遇到很…这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定data-binding是怎么工作的 如果你已经熟悉如何使用angularjs了我强烈建议你不用阅读了。   angularjs使用者想要知道data-binding是如何工作的就会遇到很多的关的术语 比如$wacth,$apply,$digest,dirty-checking(脏值检测)...等等这些又是做什么的呢 在这篇文章里我会解决所有的疑问通过结合这些术语在一起来学习。 但是我会尽量用简单的方式来说明。   现在开始 The browser events-loop and the Angular.js extension 我们的浏览器会检测等待事件发生比如用户的一些行为假如你点击了一个button或者在input写东西 事件的回调就会在内置的JavaScript跑起来然后你就能够做一些DOM操作了。 所以当回调发生的时候浏览器中的DOM会发生一些变化。   而Angularjs扩展了这个事件轮询创建了一个叫angular content的东西记住它非常重要的一个概念 为了解释这个context是什么以及它是怎么工作的我们需要先了解一下其他的一些概念。 The $watch list 每当你在ui上绑定了东西就会添加了一个$wacth到$watch list中 你可以把$watch想象成为一个能够察觉model的变化的检测器 比如你的html代码是 User: input typetext ng-modeluser / Password: input typepassword ng-modelpass / 在这里我们将$scope.user绑定到了第一个input上把$scope.pass绑定到了第二个input上 这样就意味着我们添加了两个$wacth到了$watch list中了。   再比如 app.controller(MainCtrl, function($scope) {$scope.foo Foo;$scope.world World; }); //页面htnl Hello, {{ World }} 这个例子中虽然我们在控制器中定义了foo和world但是只有一个绑定到了页面上 所以这个例子中我们只创建了一个$watch。   我们再来看看下面这种情况 app.controller(MainCtrl, function($scope) {$scope.people [...]; });//HTML代码 ulli ng-repeatperson in people{{person.name}} - {{person.age}}/li /ul 那这个例子有多少个$watch被创建呢 我们在这里假设peple数组中的每个元素都拥有name和age这2个属性。 由于我们实用ng-repeat遍历$scope.people 如果有10个人则我们一共创建了10*21 22 注意其中的1为ng-repeat所创建的。   所以要注意的是当我们在ui上使用绑定用directives 指令的时候就创建了一个$watch 对了那它是什么时候创建的呢 当我们的模板加载完成亦叫做linking phasecompiler就会找到所有的指令并创建对应的$watch。 $digest loop 还记得我们在上面讨论的event-loop吗 当浏览器发送一个事件我们就能通过angular context管理这个事件此时$digest就会被激活 这个事件轮询loop由两个小loop组成 一个是处理$evalAsync队列 一个是处理$watch list这就是本文的主题了。 那处理的过程是怎样的$digest会轮询我们有的$watch list,大概就想下面这样 ---》Hey$watch,你的value值是多少啊 ---》我的value值是9。 ---》好的有变化吗 ---》没有。 什么都没有变化就会跳到下个继续询问 ---》来你的value值是多少啊 ---》是foo。 ---》有变化吗 ---》有啊本来是bar的 很好那么现在我们有一个DOM要更新下了 流程就会这样继续下去知道$watch list中所有的$watch都被询问...   现在讲下脏值检测dirty-checking现在所有的$watch都被轮询过了 会再次询问是否所有的$watch都已经更新了 如果其中有一个改变了就会重新轮询直到所有的$wacth没有改变。这样做事为了确保所有的model都是“干净的” 注意如果轮询loop超过十次就会抛出异常来退出无限的轮询。   当$degest loop完成DOM就会发生改变 看下面的例子 app.controller(MainCtrl, function() {$scope.name Foo;$scope.changeFoo function() {$scope.name Bar;} }); {{ name }} button ng-clickchangeFoo()Change the name/button 这里我们只有一个$watch,因为ng-click不会创建任何的$watch函数function是不会发生改变的 1·当我们点击按钮的时候 2·浏览器发送事件进入angular context后面再解释这个context 3·然后执行$degest loop会轮询所有的$watch是否发生改变 4·新的一轮loop报告说没有新的改变了 5·然后浏览器就会拿回控制权然后更新DOM这里是更新新的值$scope.name 这里最重要的一点也是难点是所有的事件会进入angular context然后执行$digest loop 这意味着每当我们在input键入一个字符轮询loop会检查页面上所有的$watch。 Entering the angular context with $apply 那是怎么进入angular context的呢答案是$apply 当一个事件发生时吗你如果调用$apply就会进入angular context。 如果你没有调用就只会在外部这里指的是区别于angular context内部执行 那么你就可能会有疑问了 上面的那个例子我没有调用$apply它为什么会进入angular context呢答案是Angular帮我们做了。 所有当你调用ng-click时候这个事件就会被包含进了$apply调用了。 如果你在一个页面上有input并且标签上写着ng-modelfoo 然后输入“f”事件就像这样$apply(foo f;)被调用换句话说就是被$apply包含着调用了。 When angular doesn’t use $apply for us 这是很多Angular的新手共同的疑问我在页面上上使用了jQuery为什么JQuery没有更新我的绑定呢 因为jQuery没有调用$apply所有的事件并没有进入angular context中所以$digest loop没有执行   下面让我们看看一个有趣的例子 假如我们的代码中有下面的指令directive 和控制器controller app.directive(clickable, function() {return {restrict: E,scope: {foo: ,bar: },template: ul stylebackground-color: lightblueli{{foo}}/lili{{bar}}/li/ul,link: function(scope, element, attrs) {element.bind(click, function() {scope.foo;scope.bar;});} }});app.controller(MainCtrl, function($scope) {$scope.foo 0;$scope.bar 0; });例子中我们绑定了foo和bar到了ul上的li中我们想每当我们点击的时候foo和bar都会增加一 那实际情况中我们点击之后会发生什么呢我们能不能看到foo和bar按照我们预期的变化呢 答案是不会因为上面的click是没有被包含在$apply中调用的。 这样是否意味着我们不能这样控制我们想要的变化呢实际上不是的我们是可以的 实际上$scope上的foo和bar都是变化了的只是它没有执行$digest loop所以也就没有意识到$watch的变化 这样也意味着如果我在之后调用$apply这样所有的$watch都会知道变化然后就会更新相应的DOM !DOCTYPE html html ng-appapp head script srchttp:cdn.staticfile.org/angular.js/1.2.10/angular.min.js/script meta charsetutf-8 / titleDirective example/title /head body ng-controllerMainCtrlclickable foofoo barbar/clickablehr /{{ hello }} button ng-clicksetHello()Change hello/button /body /html app angular.module(app, []);app.controller(MainCtrl, function($scope) {$scope.foo 0;$scope.bar 0;$scope.hello Hello;$scope.setHello function() {$scope.hello World;}; });app.directive(clickable, function() {return {restrict: E,scope: {foo: ,bar: },template: ul stylebackground-color: lightblueli{{foo}}/lili{{bar}}/li/ul,link: function(scope, element, attrs) {element.bind(click, function() {scope.foo;scope.bar;});}}}); 如果你点击上面蓝色区域你是不会看到任何变化的但是之后再点击button的话 你就会突然看到0的数字变成一个数字这个数字就是刚刚你点击了蓝色区域多少下的数字 就像刚刚我上面说的那样指令里的click并没有触发$digest loop但是当你点击button按钮的时候 按钮button上的ng-click就会调用$apply然后就会执行$digest loop 所有的$watch就会检查有没有改变其中包含了foo和bar这两个$watch   这时你可能会想这样的结果不是你想要的你想要你点击那个指令块的时候马上就能看到变化。 其实这很简单只需要调用的时候包含$apply就可以了 element.bind(click, function() {scope.foo;scope.bar;scope.$apply(); }); $apply是$scope或者是指令link function上的scope上的一个函数function所以调用它会强制执行$digest loop 注意如果已经有一个轮询loop了在这种情况下调用它将抛出一个异常,这是一个迹象表明,我们不需要再调用$apply了。 其实上面的用法更好的是这样使用 element.bind(click, function() {scope.$apply(function() {scope.foo;scope.bar;}); }) 这两种用法有什么区别呢 区别是第一种用法中我们更新新的值是在angular context外部所以当有错误的时候Angular是不会知道的。 显然在上面的小例子中它不会产生多大影响但是想像下当我们在复杂项目使用多种库然后出错的时候Angular是不会知道自己的错误   所以如果你想在在项目中使用 jQuery plugin你要确保你有调用$apply来执行$degest loop来更新DOM的变化。 Conclusion 最后我希望你看完就明白了 Angular中data-binding的工作原理我猜你看完的第一印象会觉得dirty-checking是很慢的 实际上它是很快的实际上只有页面上达到2000-3000 个$watch的时候它才会出现性能上的延迟但是我觉得你应该用不到那么多个。   注本文基本取自于$watch How the $apply Runs a $digest 原文地址http://angular-tips.com/blog/2013/08/watch-how-the-apply-runs-a-digest/ 转载于:https://www.cnblogs.com/cunjieliu/p/4370441.html