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>
假想这是一个大型的预约，一天会有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的更多相关文章
- Angularjs中文版本开发指南发布
从本人开始在写关于Angularjs的文章开始,也算是见证了Angularjs在国内慢慢的火起来,如今的Angularjs正式如日中天.想知道为什么Angularjs会这么火,请移步angularjs ...
- 玩转spring boot——结合AngularJs和JDBC
参考官方例子:http://spring.io/guides/gs/relational-data-access/ 一.项目准备 在建立mysql数据库后新建表“t_order” ; -- ----- ...
- (转)构建自己的AngularJS，第一部分：Scope和Digest
原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blo ...
- angularJS实用的开发技巧
一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...
- AngularJS 动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...
- AngularJs学习
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 什么是Angularjs
AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为 ...
- AngularJS 源码分析2
上一篇地址 本文主要分析RootScopeProvider和ParseProvider RootScopeProvider简介 今天这个rootscope可是angularjs里面比较活跃的一个pro ...
- AngularJS移动开发中的各种坑
捂脸,辛酸泪ing...... 本文主要涉及部分在移动设备上特有的问题. 相对来说,Jquery侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. DOM操作的问题 避免使用 jQue ...
随机推荐
- 利用windows服务+timer或者windows任务计划程序+控制台进行进行每日邮件推送
1.邮件发送代码 using System.Text; using System.Net; using System.Net.Mail; using System.Reflection; using ...
- ibatis 批量插入oracle总结
1. 使用批量插入最先想到如下的插入语句 insert into a (id,name) values('','') ,('','') 但是 oracle 并不支持这种写法 然后查询得知可以使用如下写 ...
- make: Nothing to be done for `first'
在qt目录下make后出现以下错误: make: Nothing to be done for `first' 解决:将你当前目录下的,删除你程序主要的 *.cpp 和 *.h文件以外的所有文件. 接 ...
- (重要)使用廉价的VPN隐私会被窥探
使用廉价的VPN可以节省一部分的支出,但是损失的却是我们的网上隐私,很多部门都很关心我们在网上干些什么,本来使用VPN是为了保护自己的隐私不被窥探,很显然这是事与愿违的,一些小公司或者大公司,通过提供 ...
- [ MySql学习心得 ] --Two
五.MySql 中常用子句 1.where子句 我们都知道在查询数据时,未必会查整个表中的数据,当有条件查询时,就会用到where子句.其结构: select * from [表名] where ...
- js 有用的代码
1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“s ...
- Robot Framework安装教程
第一步:安装Python,安装的版本是python-2.7.9.amd64.msi 安装教程详见地址:http://jingyan.baidu.com/article/c910274be14d64cd ...
- python中文编码
前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题 ...
- 用SYS_CONNECT_BY_PATH进行层级查询时的排序问题
用SYS_CONNECT_BY_PATH进行层级查询时, 对同一级别的节点进行排序,可以加order SIBLINGS by 子句实现 WITH N2 AS( SELECT n.ID, org.&qu ...
- Android adb命令 一
adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.adb的工作方式比 ...