angularJs的一次性数据绑定:双冒号::

25人阅读 评论(0) 收藏 举报
分类:

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的值:

<button ng-click="name = 'Christoph'">Click me!</button>
此时,点击按钮,我们可以将name的值修改为Christoph,同时我们会触发一个$digest循环来更新DOM中相应的部分。在上面的例子中,你看的知识单向数据绑定。然而,你完全可以使用ngModel指令来将视图中发生的变化实时的反应到模型中。

上面的双向绑定魔法的实现完全依赖于digestdigest循环被触发时,AngularJS将会去处理遍历当前作用域和子作用域中的所有监听器,然后通过检查模型中发生的变化来更新DOM中的值,直到模型不再发生变化为止。一旦$digest循环执行完成,浏览器会重新渲染DOM来反应模型数据变化。

太多监听器存在的问题

现在,我们大概了解了AngularJS的数据绑定机制,你可能会问我们为何还需要一次性数据绑定。

由于AngularJS使用监听器来实现数据绑定。当监听器越来越多时,可能会出现一些性能上的问题。由于在注册监听器使,同时会注册一个回调函数,以便在$digest循环执行时能够相应的更新视图。也就是说,监听器越多,AngularJS需要处理的回调函数也就越多。

现在假设在视图中有很多值需要被AngularJS处理。比如说像上面使用插值指令来进行数据绑定,虽然我们可能并不想让这个值只绑定一次,比如说上面的Pascal,在应用代码执行的整个过程中这个属性都不会发生改变,但是AngularJS默认依然会在这个属性上绑定一个监听器和回调函数。因此,在$digest时,AngularJS依然会去特意的关注这个值,这实在是有些过头了。

一次性数据绑定(One-time bindings)

这就是我们需要一次性数据绑定的原因。在AngularJS的文档中,我们可以清楚的了解到这个新特性的作用:

一次性数据绑定表达式可以在数据稳定之后,不需要在$digest循环中重计算…

一次性数据绑定的出现解决了前面提到的由监听器太多带来的性能问题。那么我们应该如何使用一次性数据绑定呢?

使用一次性数据绑定非常的简单,我们只需要在表达式之前加上双冒号::即可。比如,前面我们使用了插值指令将name属性绑定到了视图中:

<p>Hello {{name}}!</p>
使用一次性数据绑定,我们这样写:

<p>Hello {{::name}}!</p>
在AngularJS 1.3版本中,你可以在任何AngularJS的表达式中使用一次性数据绑定。即使在诸如ng-repeat这样严重依赖于双向绑定的指令中,你依然可以使用它。在自定义的指令中,你可以在属性中这样使用:

<custom-directive two-way-attribute="::oneWayExpression"></custom-directive>

总结

一次性数据绑定的出现解决了AngularJS中饱受诟病的性能问题,官方版本原生支持也使我们不需要在使用bindonce这样的第三方模块。从一次性数据绑定出现在原生代码中,我们可以看到AngularJS在不断从社区中吸取好的想法,并及时作出改变。AngularJS 1.3只是一个AngularJS不断进化的一个小阶段,在官方承诺的AngularJS 2.0中,我们可以期待到时它带给我们的惊喜。

查看评论

TypeScript和Angular新版

-
  • 1970年01月01日 08:00

谈谈AngularJS中的一次性数据绑定

AngularJS 1.3版本正式发布,其中添加了很多的性特性,同时也对之前的一些bug做了修复,最重要的是其中包含一些突破性的变化。其中最重要的一项就是添加了一次性数据绑定。等等,一次性数据绑定?这...
  • zxjiayou1314
  • zxjiayou1314
  • 2016-04-21 18:01:21
  • 2864

双冒号(::)用法

2.双冒号(::)用法   (1)表示“域操作符”   例:声明了一个类a,类a里声明了一个成员函数voidf(),但没有在类的声明里给出f的定义,那么在类外定义f时,   就要写成voida:...
  • Alexcrazy
  • Alexcrazy
  • 2011-12-06 08:37:43
  • 1783

双向数据绑定---AngularJS的基本原理学习

Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作。 AngularJS很...
  • icetime17
  • icetime17
  • 2014-12-17 13:53:00
  • 6703

解析angularjs中的三种数据绑定策略

导入:我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去。          一、首先回顾一下有哪些绑定策略?  看这个实在是有点抽象了,我们来看具体...
  • u010834071
  • u010834071
  • 2015-04-17 16:48:53
  • 3027

AngularJS中的一次性数据绑定 (bindonce)

一、理解双向数据绑定和监听器 为了实现双向数据绑定,AngularJS使用了$watch API来观察期作用域中的模型变化。具体的作用域取决于你的代码如何编写。如果你没有创建一个自作用域,就...
  • js_admin
  • js_admin
  • 2017-05-11 14:55:06
  • 220

es6 javascript 函数绑定

箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call、apply、bind)。但是,箭头函数并不适用于所有场合,所以 ES7 提出了 “ 函数绑定 ” ( function b...
  • qq_30100043
  • qq_30100043
  • 2016-11-30 11:26:27
  • 1114

【AngularJs】Angular双向数据绑定

1、什么是双向数据绑定双向数据绑定: Angular实现了双向绑定机制。所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面。即数据模型(Module)和视图(View)...
  • tanglei6636
  • tanglei6636
  • 2016-08-11 16:18:54
  • 14455

C++中::双冒号的用法

C++中::的用法: 1、作用域符号 前面一般是该类名称,后面是该类的成员名称。C++为避免不同的类有相同的成员而采用作用域的方式进行区分,eg:A,B表示两个类,在A,B中都有成员m...
  • zm1110918
  • zm1110918
  • 2017-03-13 20:29:28
  • 1489

Java8中的[方法引用]“双冒号”——走进Java Lambda(四)

前面的章节我们提及到过双冒号运算符,双冒号运算就是Java中的[方法引用],[方法引用]的格式是 类名::方法名 注意是方法名哦,后面没有括号“()”哒。为啥不要括号,因为这样的是式子并不代表一定...
  • lsmsrc
  • lsmsrc
  • 2014-12-05 14:19:45
  • 23624
    个人资料
    持之以恒
    等级:
    访问量: 8950
    积分: 471
    排名: 10万+
    最新评论