AngularJS1.X版本双向绑定九问
前言
由于工作的原因,使用angular1.x版本已经有一段时间了,虽然angualr2升级后就完全重构了,但每个版本存在也有一定的道理。话不多说,进入正题。
1.双向绑定的原理是什么?
AngualrJS的双向绑定基于脏检查机制,$scope上有一个监听队列,每当向视图上绑定一个值,就会向watch list中插入一个watch,当遇到可以被Angular context处理的事件,就会触发$digest循环,遍历所有的watch,更新DOM。
2.什么操作会触发$digest循环?
UI发生变化,ajax请求,ng-click,$timeout...
3.如果一个watch中又包含一个watch,该watch中对应的scope model发生了变化,这种情况是怎么处理的呢?
$digest循环并不是只运行一次的,一旦angualar运行整个$watch列表,如果任何值发生改变,应用程序将回退到$watch循环,直到它检测到没有任何更改。
4.如上所述,如果有值发生变化就回退到watch循环,这样会造成死循环吗?
不会,如果循环运行超过十次,angular会抛出异常,应用程序就会死掉。
5.如下代码,ng-click事件什么都没有做,会有脏检查吗?
<button ng-click="">click</button>
会。
6.隐藏的元素,会检查绑定在它上面的表达式吗?
会。
7.重复的表达式会重复检查吗?
会。
关于以上三个问题的总结,一个绑定表达式只要放在当前 DOM 树里就会被监视,不管它是否可见,不管它是否被放在另一个 Tab 里,更不管它是否与用户操作相关。
8.$apply与$digest的区别
$apply会从rootScope上调用$digest
9.什么情况下手动调用$apply?
大致想到两种场景
- 自定义指令,绑定到$scope上的数据,更新DOM
- setTimeout的回调函数中涉及对$scope上的数据进行操作,要更新对应的视图。(将setTimeout改成$timeout的话,就不用手动调用$scope.$apply了)
后记
如有写的不正确的地方,欢迎留言讨论。参考文章The-Digest-Loop-and-apply
另外附上我的掘金地址https://juejin.im/user/5c0760bee51d451db767bd04,以后掘金上也会更新文章啦。
AngularJS1.X版本双向绑定九问的更多相关文章
- angularjs1.x版本,父子组件之间的双向绑定
今天遇到了一个angularjs的坑, ng-repeat和ng-if会改变他所包含的html中绑定变量的作用域. angularjs自定义指令,可以定义四种变量,通过 =,@,&双向绑定,单 ...
- 最近老是有兄弟问我,Vue双向绑定的原理,以及简单的原生js写出来实现,我就来一个最简单的双向绑定,原生十行代码让你看懂原理
废话不多说直接看效果图 代码很好理解,但是在看代码之前需要知道Vue双向绑定的原理其实就是基于Object.defineProperty 实现的双向绑定 官方传送门 这里我们用官方的话来说Object ...
- Vue之九数据劫持实现MVVM的数据双向绑定
vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的. 如果不熟悉defineProperty,猛 ...
- Angular数据双向绑定
Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...
- 撸一个vue的双向绑定
1.前言 说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更 ...
- 关于网上大量对Vue双向绑定的错误理解
对于Vue的双向绑定,现在基本是个前端都听说过,面试官也喜欢问这个问题.但对于Vue双向绑定的原理,掘金.博客园和segmentfault等技术社区充斥着大量的错误文章.这些文章的题目基本样子如下 “ ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- 数据的双向绑定 Angular JS
接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 ...
- Backbone.Events—纯净MVC框架的双向绑定基石
Backbone.Events-纯净MVC框架的双向绑定基石 为什么Backbone是纯净MVC? 在这个大前端时代,各路MV*框架如雨后春笋搬涌现出来,在infoQ上有一篇 12种JavaScrip ...
随机推荐
- 使用Collectd + InfluxDB + Grafana进行JMX监控
我们已经看到使用Collectd监控CPU /内存利用率(本文).但它没有提供所有信息来确定性能问题的瓶颈.在本文中,我们将使用Collectd Java插件来使用其JMX技术来监视和管理Java虚拟 ...
- 根据从redis缓存的数据查询出来,在从数据库中取出所有的数据,俩个数据进行比较,去掉重复,剩下库中新插入的数据,取出新数据,然后把redis中的缓存数据清空把从数据库中查出来的所有数据放到redis缓存中
参考代码: public String getNewCenter(HttpServletRequest request,HttpServletResponse resonse){ JSONObject ...
- webpack配置Jquery全局包及全局包插件
一:在配置文件配置: plugins: [ //将来以template为模版,生成一个index.html并且发布到webpack-dev-server开启的node服务器上面去 new HtmlWe ...
- CSS(一)清除浮动
问题1:关于清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Murano Weekly Meeting 2015.07.14
会议时间: 2015.07.14 主持人: Kirill Zaitsev, core from Mirantis 会议摘要: 1.periodic nightly builds,然后通过mailin ...
- windows 安装python
前言: Windows 中直接使用Python真的是心累 安装vs 2017(最好是最新版的, 因为python依赖于一些vs提供的包) 下载最新的python的安装程序 安装完毕之后, 不像Linu ...
- 排序算法对比,步骤,改进,java代码实现
前言 发现是时候总结一番算法,基本类型的增删改查的性能对比,集合的串并性能的特性,死记太傻了,所以还是写在代码里,NO BB,SHOW ME THE CODE! github地址:https://gi ...
- ORA-02298: 无法验证 (约束) - 未找到父项关键字 解决办法
--在用PL/SQL导入表数据的时候报错 ORA-02298: 无法验证 (PNET.POST_CLOB_FK) - 未找到父项关键字 --发现是启用外键约束时报的错alter table DM_VO ...
- Ajax跨域设置Access-Control-Allow-Origin
传统的跨域请求没有好的解决方案,无非就是jsonp和iframe,随着跨域请求的应用越来越多,W3C提供了跨域请求的标准方案(Cross-Origin Resource Sharing).IE8.Fi ...
- node官方docker镜像运行bower 提示 permission denied 解决方法
在使用node官方docker镜像部署node应用时,应用需要npm的scripts中运行bower install 来安装前端包,但是用docker 构建时失败,提示 permission dein ...