在我们的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>

假想这是一个大型的预约，一天会有30个sessions。这里会产生多少个$watch？这里每个session有5个绑定，额外的ng-repeat一个.这将会产生151个$watch。这有什么问题？每次用户“like”一个session，angular将会去检查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

angularjs移除不必要的$watch的更多相关文章

  1. Angularjs中文版本开发指南发布

    从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天.想知道为什么Angularjs会这么火,请移步angularjs ...

  2. 玩转spring boot——结合AngularJs和JDBC

    参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...

  3. (转)构建自己的AngularJS，第一部分：Scope和Digest

    原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blo ...

  4. angularJS实用的开发技巧

    一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...

  5. AngularJS 动画

    AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...

  6. AngularJs学习

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. 什么是Angularjs

    AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为 ...

  8. AngularJS 源码分析2

    上一篇地址 本文主要分析RootScopeProvider和ParseProvider RootScopeProvider简介 今天这个rootscope可是angularjs里面比较活跃的一个pro ...

  9. AngularJS移动开发中的各种坑

    捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...

随机推荐

  1. VBA学习之关于数据透视表的应用

    工作中很多地方需要同时处理多个数据表,而且用数据透视表进行排版,排序,计算字段,一个一个的做非常累,这里给出批量处理的方法. 学习VBA之前最好懂一点点VB的基础知识,因为里面的很多语法问题都是由VB ...

  2. 如何在一个div标签里显示出另一个网页？ <iframe src=" http://www.baidu.com " width="800px" height="200px" scrolling="no" frameborder="0"> </iframe>

    如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...

  3. [转]SQL Server表锁定原理以及如何解除锁定

    2010年10月13日 12:46 来源:部松昌的博客 作者:部松昌 编辑:胡铭娅 一: 下面以AdventureWorks2008为示例数据库做简要的说明,过滤掉一般的数据库的共享锁, 作为示例必须 ...

  4. 验证radio 是否被选中

    var radioType=document.getElementsByName("radioType");    var isCheckRadio=false;    for(v ...

  5. 三大基础排序算法BubbleSort、SelectSort、InsertSort

    public class Strategy { public static void main(String[] args) { int [] array=new int[]{26,25,15,42, ...

  6. AVL-tree

    //avl.h#ifndef __AVL_H__#define __AVL_H__ typedef int KEY_TYPE; /* struct */typedef struct AVL{ KEY_ ...

  7. openjudge2985(数字组合)

    描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3,4,5,t=5:那么可能的组合有5=1+4和5=2+3和5=5三种组合方式.输入输入的第一行是两 ...

  8. px4flow通过iic读取具体寄存器数据程序

    底层通信用了昨天写好的iic,今天结合官方资料成功读出所有指定寄存器的数据附上源码 include.h主要包括了一些stm32 IO控制的宏定义,具体参考正点原子所有例程中都有的sys.h头文件 in ...

  9. css3简单的图片轮播

    <style> @-webkit-keyframes move{ %{left:0px;} %{left:-500px;} } #wrap{ width:500px; height:100 ...

  10. 1、在MAC上搭建React Native开发环境

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...