深入浅析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 相关文章推荐
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
Jul 10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 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
PHP添加文字水印或图片水印的水印类完整源代码与使用示例
2019/03/18 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
一个判断email合法性的函数[非正则]
2008/12/09 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
日历查询的算法 如何计算某一天是星期几
2012/12/12 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
深入理解javascript prototype的相关知识
2019/09/19 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python中list循环语句用法实例
2014/11/10 Python
Python实现感知机(PLA)算法
2017/12/20 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
彪马加拿大官网:PUMA加拿大
2018/10/04 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
ajax是什么及其工作原理
2012/02/08 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
文明餐桌活动方案
2014/02/11 职场文书
国际贸易实训总结
2015/08/03 职场文书
采购部年度工作总结
2015/08/13 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
2019学生会干事辞职信
2019/06/27 职场文书