zoukankan      html  css  js  c++  java
  • angularjs移除不必要的$watch

        在我们的web page,特别是移动设备上,太多的angular $watch将可能导致性能问题。这篇文章将解释如何去移除额外的$watch提高你的应用程序性能。

         $watch如果不再使用,我们最好将其释放掉,在angular中我们可以自由的选择在什么时候将$watch$watch列表中移除。

    让我们来看个示例:

    app = angular.module('app', []);
    
    app.controller('MainCtrl', function($scope) {
    
    $scope.updated = 0;
    
    $scope.stop = function() {
    
    textWatch();
    
    };
    
    
    
    var textWatch = $scope.$watch('text', function(newVal, oldVal) {
    
    if (newVal === oldVal) { return; }
    
    $scope.updated++;
    
    });
    
    });
    <body ng-controller="MainCtrl">
    
    <input type="text" ng-model="text" /> {{updated}} times updated.
    
    <button ng-click="stop()">Stop count</button>
    
    </body>

         $watch函数会返回一个释放$watch绑定的unbind函数。所以当我们不再需要watch改变的时候,我们可以easy的调用这个函数释放$watch

    由静态数据构成的页面

       让我假想我们要创建一个会议session预约的页面,页面像如下结构:

    app.controller('MainCtrl', function($scope) {
    
    $scope.sessions = [...];
    
    $scope.likeSession = function(session) {
    
    // Like the session
    
    }
    
    });
    <ul>
    
    <li ng-repeat="session in sessions">
    
    <div class="info">
    
    {{session.name}} - {{session.room}} - {{session.hour}} - {{session.speaker}}
    
    </div>
    
    <div class="likes">
    
    {{session.likes}} likes! <button ng-click="likeSession(session)">Like it!</button>
    
    </div>
    
    </li>
    
    </ul>

         假想这是一个大型的预约,一天会有30sessions。这里会产生多少个$watch?这里每个session5个绑定,额外的ng-repeat一个.这将会产生151$watch。这有什么问题?每次用户“like”一个sessionangular将会去检查name是不是被改变(其他的属性也相同)

        问题在于除了例外的“like”外,所有的数据都是静态数据,这是不是有点浪费资源?我们能够100%保证我们的数据不会改变,既然这样为什么我们让angular要去检查是否改变呢?

       解决方案很简单。我们移除永远不会改变的$watch$watch在第一非常重要,它用静态信息生产更新了我们的DOM结构,但是在此之后,它监听了一个永远不会被改变的常量,这明显是很大的浪费资源。

    如果你相信我了的话,会我们能怎么去解决呢?幸运的是,这有个nice guy在我们之前也问了自己这个问题,并创建了一系列的指令实现这个:Bindonce.

    Bindonce

       Bindonce是一系列绑定但是不带watch的指令集,这很完美的符合了我们的需求。

    让我们用Bindonce重新实现我们的view

    <ul>
    
    <li bindonce ng-repeat="session in sessions">
    
    <div class="info">
    
    <span bo-text="session.name"></span> -
    
    <span bo-text="session.room"></span> -
    
    <span bo-text="session.hour"></span> -
    
    <span bo-text="session.speaker"></span>
    
    </div>
    
    <div class="likes">
    
    {{session.likes}} likes! <button ng-click="likeSession(session)">Like it!</button>
    
    </div>
    
    </li>
    
    </ul>

     

        为了让示例能够工作,我们必须引入bindonce到我们的应用程序。

    app = angular.module('app', ['pasvaz.bindonce']);

        在这里我们将angular表达式换位了bo-text指令。这指令将会绑定我们的model,知道更新DOM,然后去掉绑定。这样我就可以显示view但是移除不必要的饿绑定了。

       在此例中每个session只有一个$watch绑定,所以这里用31个绑定替代了151个绑定。我们正确的使用bingonce将会为我们的应用程序大量减少$watch绑定。 

    总结

       当我们的性能无法避免的需要优化的时候,bindonce能够帮助脱离$watch的性能瓶颈。在bindonce中还有很多的指令,我可以从这里搜索到:https://github.com/Pasvaz/bindonce#attribute-usage

  • 相关阅读:
    VS的ncb、pdb文件分析
    理解First Chance和Second Chance避免单步调试
    Visual Studio调试之符号文件
    Visual Studio调试之断点技巧篇补遗
    Visual Studio调试之断点技巧篇
    不能设置断点的检查步骤
    调试术语
    Visual Studio调试之断点基础篇
    Visual Studio调试之断点进阶篇
    复制
  • 原文地址:https://www.cnblogs.com/whitewolf/p/angularjs-remove-unused-watch.html
Copyright © 2011-2022 走看看