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 相关文章推荐
jQuery Autocomplete自动完成插件
Jul 17 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
javascript this详细介绍
Sep 19 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
微信小程序自定义toast的实现代码
Nov 16 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
Dec 07 Vue.js
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 遍历文件实现代码
2011/05/04 PHP
php学习之流程控制实现代码
2011/06/09 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php获取百度收录、百度热词及百度快照的方法
2015/04/02 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
JS实现IE状态栏文字缩放效果代码
2015/10/24 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
Python中使用PIPE操作Linux管道
2015/02/04 Python
python 求定积分和不定积分示例
2019/11/20 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
Structs界面控制层技术
2013/10/11 面试题
最新个人职业生涯规划书
2014/01/22 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
党风廉设责任书
2014/04/16 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
通报表扬范文
2015/01/17 职场文书
客房领班岗位职责
2015/02/11 职场文书
亮剑观后感300字
2015/06/05 职场文书
监护人证明
2015/06/19 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
解除合同协议书范本
2016/03/21 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
python pyhs2 的安装操作
2021/04/07 Python
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
tomcat默认最大连接数及相关调整方法
2022/05/06 Servers