游客

标题:AngularJS1.3中的单向绑定、一次性数据绑定(one-time bindings)提高性能
正文:
继上一篇的angular性能优化一文中说道：有些项目场景是只需要单次绑定，减少性能开销的。不久之前，AngularJS 1.3版本正式发布，其中添加了很多的性特性，同时也对之前的一些bug做了修复，最重要的是其中包含一些突破性的变化。其中最重要的一项就是添加了一次性数据绑定。等等，一次性数据绑定？这听起来似乎和AngularJS一直宣扬的双向数据绑定思想完全背离了吗？当然，AngularJS的双向数据绑定一直是AngularJS最重要的特性之一。然而，为了实现双向数据绑定，AngularJS需要为每一个绑定的值都设置一个监听器(watcher)。当需要绑定的数据越来越多时，成堆的监听器会对应用的性能造成很坏的影响。在具体了解一次性数据绑定之前，先让我们来简单的回顾一下AngularJS中双向数据绑定究竟是怎么一回事。理解双向数据绑定和监听器为了实现双向数据绑定，AngularJS使用了$watch API来观察期作用域中的模型变化。具体的作用域取决于你的代码如何编写。如果你没有创建一个自作用域，就是说没有使用ngController指令在你的DOM和你的控制器代码之间创建一个关联，你可能处理的是跟作用域$rootScope，这个作用域由ngApp自动创建，并且是应用中所有作用域的父作用域，当然，如果你选择手动启动AngularJS，那情况就另当别论了。每当你创建了一个数据绑定时，AngularJS就会自动创建一个监听器来监听这个数据的变化。比如说下面这个简单的例子:<p>Hello {{name}}!</p>在这个例子中，我们使用了插值指令，这个指令会注册一个监听器来监听相应作用域中属性name的变化，并在该属性发生变化时将它实时反应到DOM中。添加下面的代码，你的name属性将会自动的被赋值为Pascal：angular.module('myApp', []) .run(function ($rootScope) { $rootScope.name = "Pascal";}]);通过上面的代码，我们就成功的使用了插值指令创建了在试图上创建了一个数据绑定。现在，如果name属性发生变化，视图将会自动发生更新。比如说我们添加下面的代码，在按钮点击是修改name的值
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页