• 前端面试之angular JS


    1. angular的数据绑定采用什么机制?详述原理

    angularjs的双向数据绑定,采用脏检查(dirty-checking)机制。ng只有在指定事件触发后,才进入 $digest cycle : 
    - DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) 
    - XHR响应事件 ( $http ) 
    - 浏览器Location变更事件 ( $location ) 
    - Timer事件( $timeout , $interval ) 
    - 执行 $digest() 或 $apply()

    2. 依赖注入(DI)

    让我们可以不用自己实例化就能创建依赖对象的方法. 简单的来说, 依赖是以注入的方式传递的。在Web应用中, Angular让我们可以通过DI来创建像Controllers和Directives这样的对象. 我们还可以创建自己的依赖对象, 当我们要实例化它们时, Angular能自动实现注入。

    3. compile和link的区别:性能和能力

    编译的时候,compile转换dom,碰到绑定监听器的地方就先存着,有几个存几个,到最后汇总成一个link函数,一并执行,提升了性能。

    function compile(tElement, tAttrs, transclude) { ... }tElement为编译前的element
    
    function link(scope, iElement, iAttrs, controller) { ... }  iElement为编译后的element,已经与作用域关联起来,所以可以数据绑定
    
    

    如果指令只进行DOM的修改,不进行数据绑定,那么配置在compile函数中,如果指令要进行数据绑定,那么配置在link函数中。

    4. $apply()和 $digest()的区别

    安全性:$apply()可以接收一个参数作为function(),这个 function 会被包装到一个 try … catch 块中,所以一旦有异常发生,该异常会被 $exceptionHandler service 处理。

    • $apply会使ng进入 $digest cycle , 并从$rootScope开始遍历(深度优先)检查数据变更。
    • $digest仅会检查该scope和它的子scope,当你确定当前操作仅影响它们时,用$digest可以稍微提升性能。

    5.ng-if 跟 ng-show/hide 的区别有哪些?

    第一点区别:ng-if 在后面表达式为 true 的时候才创建这个 dom 节点;ng-show 是初始时就创建了,用 display:block 和display:none 来控制显示和不显示。

    第二点区别:ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

    这样会导致,在 ng-if 中用基本变量绑定 ng-model,并在外层 div 中把此 model 绑定给另一个显示区域,内层改变时,外层不会同步改变,因为此时已经是两个变量了。

    <p>{{name}}</p>
    <div ng-if="true">
        <input type="text" ng-model="name">
    </div>

    ng-show 不存在此问题,因为它不自带一级作用域。

    避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。

    6.

  • 相关阅读:
    NOIP初赛篇——02计算机系统的基本结构
    NOIP初赛篇——01计算机常识
    C++语言基础——02数据的存取
    加密时java.security.InvalidKeyException: Illegal key size or default parameters解决办法
    log4j.properties配置文件的内容
    Windows如何关闭占用某一端口的进程
    【JAVA】别特注意,POI中getLastRowNum() 和getLastCellNum()的区别
    【JAVA】POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写
    【JAVA】使用Aphache poi操作EXCEL 笔记
    Flex自定义组件、皮肤,并调用
  • 原文地址:https://www.cnblogs.com/fanyx/p/5775982.html
Copyright © 2020-2023  润新知