zoukankan      html  css  js  c++  java
  • 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,以后掘金上也会更新文章啦。

  • 相关阅读:
    php设计模式-工厂模式(一)
    php Pthread 线程 互斥锁
    php Pthread 多线程 Worker
    PHP多进程实例
    C# this 关键字
    .NET FileStream文件流,StreamReader文本流,MemoryStream内存流几种流的实例
    深入理解Static关键字修饰符
    SQL Server 视图
    .NET初识委托
    RSA加密
  • 原文地址:https://www.cnblogs.com/jingmi-coding/p/10142943.html
Copyright © 2011-2022 走看看