angularJs 中双冒号 ::来实现一次性数据绑定。

原文: https://blog.csdn.net/qianxing111/article/details/79971544

-------------------------------------------------------------------------------------

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指令来将视图中发生的变化实时的反应到模型中。

上面的双向绑定魔法的实现完全依赖于digest循环,当digest循环,当digest循环被触发时,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中,我们可以期待到时它带给我们的惊喜。

angularJs的一次性数据绑定:双冒号::的更多相关文章

  1. AngularJS 1.3中的一次性数据绑定(one-time bindings)

    点击查看AngularJS系列目录 谈谈AngularJS 1.3中的一次性数据绑定(one-time bindings) 不久之前,AngularJS 1.3版本正式发布,其中添加了很多的性特性,同 ...

  2. AngularJS入门之数据绑定

    本篇我们看一下AngularJS中的数据绑定.虽然我们直到这篇才提到数据绑定,但事实上在前面几篇中我们已经非常熟练的运用AngularJS的数据绑定功能了! ngBind(ng-bind)/ {{ e ...

  3. php中双冒号::的用法

    注:本篇博客系转载,出处不可考(至少对我来说不可考...) 双冒号操作符即作用域限定操作符Scope Resolution Operator可以访问静态.const和类中重写的属性与方法. 在类定义外 ...

  4. wind的R接口、况客RSDK学习,双冒号以及quantmod主题

    本文主要参考:来自segmentfault上的FinanceR的专栏 https://segmentfault.com/a/1190000004580610 并自己对生疏不解之处做了补充和注释. 当然 ...

  5. php中"::"双冒号有什么作用

    PHP代码 lazycms::$sysname 第一次见到这种表现方式,请问是双冒号什么意思 答:直接属类的方法或属性.也就是static 静态方法或属性的使用.域运算符,一般用于在B类对象中使用A类 ...

  6. C#中双问号、双冒号等几个特殊关键字

    1.@ 这个东东看似和邮件有关啊,但是在C#的世界里,可跟邮件没有一毛钱关系,它是string的女朋友(当然了string有N多女友),二者结合就可以发挥作用了.你可以给它起个名字,叫做“逐字字符串” ...

  7. C++ 箭头-> 双冒号:: 点号.操作符区别

    点 (.) 如果变量是一个对象或者对象引用,则用它来访问对象成员. 箭头( ->) 如果变量是一个对象指针,则用它来访问对象成员. 双冒号 (::) 如果操作目标是一个具有名空间的标识符,则用它 ...

  8. C++@冒号(:)和双冒号(::)的用法

    转自:http://blog.csdn.net/zimingjushi/article/details/6549390 1.冒号(:)用法 (1)表示机构内位域的定义(即该变量占几个bit空间) ty ...

  9. 关于css3中before与after用单冒号还是双冒号的疑虑

    在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后,建议按照标准双写.

随机推荐

  1. python学习笔记 - for循环: 遍历字典, 分别打印key, value, key:value

    #遍历字典, 分别打印key, value, key:value emp = {'name':'Tom', 'age':20, 'salary' : 8800.00} for k in emp.key ...

  2. Needed Learning(Updating)

    决定把掌握不熟练或是模型见的少的知识点在这里列一列 希望能在自己AFO前成功get技能点吧…… 优先级:动态规划-分治-字符串-图论-数据结构-数学-计算几何-其它 动态规划 1.四边形不等式优化 2 ...

  3. [CC-SUBWAY]Subway Ride

    [CC-SUBWAY]Subway Ride 题目大意: 一棵\(n(n\le5\times10^5)\)个点的含重边的树,总边数为\(m(m\le10^6)\),每条边有一个颜色.\(q(q\le5 ...

  4. Java-----jar反编译修改重新打包

    http://blog.csdn.net/hekewangzi/article/details/44676797 一.使用反编译工具JD-GUI(JD-GUI相关操作见Java-----反编译clas ...

  5. UVALive 4867 Maximum Square 贪心

    E - Maximum Square Time Limit:4500MS     Memory Limit:0KB     64bit IO Format:%lld & %llu Submit ...

  6. POJ 1470 Closest Common Ancestors (LCA,离线Tarjan算法)

    Closest Common Ancestors Time Limit: 2000MS   Memory Limit: 10000K Total Submissions: 13372   Accept ...

  7. Effective OC : 1-5

    1,了解Objective-C语言的起源: OC为C语言的超集,为C加入了面向对象的特性. 要理解C中的指针和内存模型. 2.在类文件里尽量少引入其它头文件: 引入过多头文件.将借口暴露,添加耦合度. ...

  8. Xilinx Platform Usb Cable

    Key Features High-performance FPGA configuration and PROM/CPLD programming Includes innovative FPGA- ...

  9. Docker 1.3 公布

    Docker 1.3 公布 Docker 1.3 已经正式公布.新的特性包含镜像签名.进程注入.新的创建和执行容器命令.安全选项和 Mac OS 上进行文件夹共享.特别是针对安全方面的改进,成为本地公 ...

  10. Python机器学习实战&lt;一&gt;:环境的配置

    详细要学习的书籍就是<机器学习实战>Machine Learning in Action,Peter Harrington Windows下要安装3个文件,各自是; 1.Python(因为 ...