深入浅析AngularJS中的一次性数据绑定 (bindonce)


Posted in Javascript onMay 11, 2017

一、理解双向数据绑定和监听器

为了实现双向数据绑定,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循环被触发时,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这样严重依赖于双向绑定的指令中,你依然可以使用它。

以上所述是小编给大家介绍的AngularJS中的一次性数据绑定 (bindonce),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 3D球状导航的文章分类
Jul 06 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
Sep 05 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JavaScript数据类型的存储方法详解
Aug 25 Javascript
vue如何将v-for中的表格导出来
May 07 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 #Javascript
微信小程序 navbar实例详解
May 11 #Javascript
微信小程序 图片宽高自适应详解
May 11 #Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
May 11 #Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php实现点击可刷新验证码
2015/11/07 PHP
Zend Framework实现自定义过滤器的方法
2016/12/09 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JavaScript 创建运动框架的实现代码
2013/05/08 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python中self原理实例分析
2015/04/30 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
Python深度优先算法生成迷宫
2018/01/22 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
Boden美国官网:英伦原创时装品牌
2017/07/03 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
毕业生文员求职信
2013/11/03 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
亮剑精神演讲稿
2014/05/23 职场文书
数学系毕业生求职信
2014/05/29 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python中使用ipython的详细教程
2021/06/22 Python