angularjs 的数据绑定实现原理


Posted in Javascript onJuly 02, 2018

在angularjs1.X 中存在了三种数据绑定的方式,用于数据的同步、展示。在 angularjs 1.3 之前,angularjs 只存在两种方式: two-way-binding 和 one-way-bindng , 而后则引入了称为one-time-binding 的绑定机制。

目前angularjs 中存在以下三种数据绑定方式:

  1. two-way-binding
  2. one-way-binding
  3. one-time-binding

two-way-binding

angularjs 中的 Two-way-binding 的作用是将 Model 和 View 关联起来,任何一侧的数据变更都会更新另一侧的数据。

常见场景是页面中的输入区域。双向绑定可以很容易的将输入控件的值关联到数据模型中。

<input type="text" id="text" ng-model="name"/>

通过 ng-model 我们可以很容易的将输入框(view)的值和 name (Model) 关联起来。在双向数据流的作用下,无论是我们修改输入框的值还是修改 name,另外一侧都将及时更新到新数据。

ng-model 是 angularjs 内置的一个指令用来实现双向绑定。ng-model 在不同生命周期中,有不同的逻辑处理。

1、compilation phase:

  • ng-model 指令和 input 指令会被合并处理给 input 标签 注册 keydown事件(DOM Event);
  • interpolation 则注册一个 $watch 用来订阅 change 事件(angularjs Event)。

2、Runtime Phase

  • 用户输入触发 keydown
  • input 指令捕获 keydown 事件,调用 $apply 来请求更新动作。
  • angularjs 更新值到 Model
  • 进入 $digest 上下文
  • $watch 表达式检测到 Model 发生了 change,通知interpolation ,请求 更新 DOM。
  • angularjs 托管结束,退出托管,交还控制权到 JavaScript 执行上下文。
  • 最后浏览器重新渲染文本。

One-way-binding

不同于 Two-way-binding的双向流动, one-way-binding 的数据流向是单向,即只会从 model 流向 view ,而不会从 view 流向 model。 因此, one-way-binding 用来展示数据,而不是获取输入。

在 angularjs 中, one-way-binding 则有两种语法: ng-bind 和 {{expression}}。

<span ng-bind="name"> </span>
<span>{{name}}</span>

对于 one-way-binding来说,内部机制和 two-way-binding 有部分相同的机制。

1、compilation phase:

  1. interpolation 注册一个 $watch 用来订阅 change 事件(angularjs Event)。

2、runtime phase:

  1. angularjs 进入 $digest 。
  2. expression 的 $watch 检测到数据发生变更,通知interpolation ,请求 更新 DOM。
  3. angularjs 托管结束,退出托管,交还控制权到 JavaScript 执行上下文。
  4. 最后浏览器重新渲染文本。

one-time-binding

1.3 之后,angularjs 实现了一个叫 one-time-binding 的机制。本质上它的机制和其他两种方式没太多差异,但在数据更新时候表现的不太一样。

one-time-binding 同样会注册 $watch 来监听数据变化,但它会在第一次检测到数据 非 Undefined 时候取消监听。

<span>{{::name}}</span>

对于上面的代码,假设 name 从 undefined -> angularjs -> angular ,最终渲染的结果是 angularjs ,而不是 angular 。 这就是 one-time-binding 的特殊之处,当 name 从 undefined 变化为 angularjs之后,被认定为 name 的状态已经是 stable ,因此将取消 $watch , 即不再监听数据变化。

那么,假设 name 从 '' -> angularjs-> angular, 则渲染结果是 '' ,即空字符串(第一次的值)。因为 one-time-binding 在计算 stable 时候使用的 严格相等,即 newVal === undefined, 如果是,则继续保留 $watch 等待下一次的比较;否则,状态变更为 stable,取消 $watch, 数据转化为最终态。

结束

在我看来,angularjs 核心在于 angularjs context 和 $digest 。

angularjs context 保证 angularjs 可以捕获到各种事件,用户输入、鼠标事件、键盘事件、甚至 $settimeout和 $http 等异步行为的状态流转。

而 $digest 则保证 angularjs 可以确认是否要更新数据。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jsonp原理及使用
Oct 28 Javascript
JS的get和set使用示例
Feb 20 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
js取模(求余数)隔行变色
May 15 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
Vue数字输入框组件的使用方法
Oct 19 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 #Javascript
vue中的数据绑定原理的实现
Jul 02 #Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 #Javascript
jsonp跨域获取数据的基础教程
Jul 01 #Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 #Javascript
关于Vue组件库开发详析
Jul 01 #Javascript
D3.js实现拓扑图的示例代码
Jun 30 #Javascript
You might like
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
理解Javascript_09_Function与Object
2010/10/16 Javascript
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
Bootstrap框架实现广告轮播效果
2016/11/28 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
如何用JS/HTML将时间戳转换为“xx天前”的形式
2017/02/06 Javascript
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
python基础教程之序列详解
2014/08/29 Python
Python连接mssql数据库编码问题解决方法
2015/01/01 Python
详解Python验证码识别
2016/01/25 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
自荐信的五个重要部分
2013/10/29 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
在校实习生求职信
2014/06/18 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
高中同学会致辞
2015/08/01 职场文书
CAD实训总结范文
2015/08/03 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Python实现学生管理系统(面向对象版)
2021/06/24 Python
vue项目支付功能代码详解
2022/02/18 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js