前端面试之angular JS

   2023-02-08 学习力0
核心提示:1. angular的数据绑定采用什么机制?详述原理angularjs的双向数据绑定,采用脏检查(dirty-checking)机制。ng只有在指定事件触发后,才进入 $digest cycle : - DOM事件,譬如用户输入文本,点击按钮等。( ng-click ) - XHR响应事件 ( $http ) - 浏览器L

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.

 

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Angular.js的作用域和数据绑定
    初识Angular.js通过初识Angular.js可以做一个简单的入门,下面开始做深入的了解吧。作用域作用域($scope)和应用的数据模型相关联的,同时作用域也是表达式执行的上下文。$scope对象是定义应用业务逻辑、控制器方法和视图属性的地方。 作用域是视图和控制器
    03-16
  • Angular 4 设置组件样式的几种方式
    Angular 4 设置组件样式的几种方式
      你用Angular吗?一.介绍  如何只改动最简单的css代码,呈现完全不一样的视图效果。第一种:最基本的设置:  图1 代码 图2 界面运行效果图平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的。现在,如果我想要将字体换
    03-16
  • angularJSapi学习-angular.copy使用
    angular.copy使用效果:初始状态:输入信息后未保存状态:点击save后状态:当输入框内容和master内容不一致时:点击reset使得user的信息被重置为master中信息: 具体代码: 1 !DOCTYPE HTML 2 html ng-app="app" 3 headscript src="./angular.min.js"/script
    03-16
  • Ionic启动时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0
    Ionic启动时提示:The Angular CLI requires a m
    在新建ionic项目后通过ionic serve 启动ionic项目时提示:The Angular CLI requires a minimum Node.js version of eithor v10.13 or v12.0  注:博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号霸道的程序猿获取编程相关电子书、教程推送与
    03-16
  • Angular.js之内置过滤器学习笔记 javascript过
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titleangularFilter/titlescript src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"/script/head  body ng-app="angularJS" ng-controller="ctrl"    div{{
    03-08
  • Angular 隨記
    Windows下更新Node 和NPM方法管理員模式打開powershell執行以下命令:Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Forcenpm install -g npm-windows-upgradenpm-windows-upgrade
    03-08
  • 双向数据绑定(angular,vue) 双向数据绑定指令
    最近github上插件项目更新了关于双向数据绑定的实现方式,关于angular和vue.angular众所周知是使用的脏检查($dirty)。一开始大家会认为angular开启了类似setInterval去不停的循环检查,性能极差,但其实并不是,$dirty是在一定条件下才会去执行,比如输入框
    03-08
  • 六、angular 生成二维码
    六、angular 生成二维码
    首先需要安装angular-qrcode :bower install monospaced/angular-qrcodenpm install angular-qrcode如何使用?在相应的需要使用二维码的页面增加如下代码:注意:这里的“version”和"size"可以根据github上面找出自己想要的结果:生成含有图片的二维码:这里
    03-08
  • angular.js简单入门。 angular入门教程
    angular.js简单入门。 angular入门教程
    小弟刚接触angular js  就写了一个简单的入门。后续慢慢补。。。首先看 html 页面。htmlmeta charset="UTF-8"headtitleangularJS/title/headscript type="text/javascript" src="./js/angular.min.js"/script      //引入 angularJSscript type="text/
    03-08
点击排行