分享更有价值
被信任是一种快乐

常见angular面试题实例分析

文章页正文上

本篇内容主要讲解“常见angular面试题实例分析”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“常见angular面试题实例分析”吧!1、angular 的数据绑定采用什么机制?详述原理答案:脏检查机制。解析:双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。原理就是,Angular 在 scope 模型上设置了一个监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时, $digest 循环就会触发,遍历所有的 $watch ,最后更新 dom。2、AngularJS 的数据双向绑定是怎么实现的?答案:1、每个双向绑定的元素都有一个 watcher2、在某些事件发生的时候,调用 digest 脏数据检测。这些事件有:表单元素内容变化、Ajax 请求响应、点击按钮执行的函数等。3、脏数据检测会检测 rootscope 下所有被 watcher 的元素。$digest 函数就是脏数据监测3、在使用 angularjs 项目开发中 你使用过那些第三方的插件答案:AngularUi ui-router oclazyload 等等4、ng-show/ng-hide 与 ng-if 的区别?答案:我们都知道 ng-show/ng-hide 实际上是通过 display 来进行隐藏和显示的。而 ng-if 实际上控制 dom 节点的增删除来实现的。因此如果我们是根据不同的条件来进行 dom 节点的加载的话,那么 ng-if 的性能好过 ng-show.5、解释下什么是r o o t S c r o p e 以 及 和 ro免费云主机、域名otScrope以及和rootScrope以及和scope 的区别?答案:通俗的说r o o t S c r o p e 页 面 所 有 rootScrope 页面所有rootScrope页面所有scope 的父亲。解析:我们来看下如何产生r o o t S c o p e 和 rootScope和rootScope和scope 吧。step1:Angular 解析 ng-app 然后在内存中创建$rootScope。step2:angular 回继续解析,找到{{}}表达式,并解析成变量。step3:接着会解析带有 ng-controller 的 div 然后指向到某个 controller 函数。 这个时候在这个 controller 函数变成一个$scope 对象实例。6、列出至少三种实现不同模块之间通信方式?答案:Serviceevents,指定绑定的事件使用 $rootScopecontroller 之间直接使用$parent, $$childHead 等directive 指定属性进行数据绑定7、表达式 {{yourModel}} 是如何工作的?答案:它依赖于 $interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个 {{}} ,则会设置一个 $watch 。而 $interpolation 会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式 $parse 到那个作用域上。8、angular 中的$http答案:$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。我们可以使用内置的h t t p 服 务 直 接 同 外 部 进 行 通 信 。 http服务直接同外部进行通信。http服务直接同外部进行通信。http 服务只是简单的封装了浏览器原生的 XMLHttpRequest 对象。9、ng-repeat 迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决?答案:会提示 Duplicates in a repeater are not allowed. 加 track by $index 可解决。当然,也可以 trace by 任何一个普通的值,只要能唯一性标识数组中的每一项即可(建立 dom 和数据之间的关联)10、angularjs 是 mvc 还是 mvvm 框架答案:mvvm解析:首先阐述下你对 mvc 和 mvvm 的理解:首先为什么我们会需要 MVC?因为随着代码规模越来越大,切分职责是大势所趋,还有为了后期维护方便,修改一块功能不影响其他功能。还有为了复用,因为很多逻辑是一样的。而 MVC 只是手段,终极目标是模块化和复用。mvvm 的优点低耦合:View 可以独立于 Model 变化和修改,同一个 ViewModel 可以被多个 View 复用;并且可以做到 View 和 Model 的变化互不影响;可重用性:可以把一些视图的逻辑放在 ViewModel,让多个 View 复用;独立开发:开发人员可以专注与业务逻辑和数据的开发(ViewModemvvmdi 计人员可以专注于 UI(View)的设计;可测试性:清晰的 View 分层,使得针对表现层业务逻辑的测试更容易,更简单。在 angular 中 MVVM 模式主要分为四部分:View:它专注于界面的显示和渲染,在 angular 中则是包含一堆声明式 Directive 的视图模板。ViewModel:它是 View 和 Model 的粘合体,负责 View 和 Model 的交互和协作,它负责给 View 提供显示的数据,以及提供了 View 中 Command 事件操作 Model 的途径;在 angular 中$scope 对象充当了这个 ViewModel 的角色;Model:它是与应用程序的业务逻辑相关的数据的封装载体,它是业务领域的对象,Model 并不关心会被如何显示或操作,所以模型也不会包含任何界面显示相关的逻辑。在 web 页面中,大部分 Model 都是来自 Ajax 的服务端返回数据或者是全局的配置对象;而 angular 中的 service 则是封装和处理这些与 Model 相关的业务逻辑的场所,这类的业务服务是可以被多个 Controller 或者其他 service 复用的领域服务。Controller:这并不是 MVVM 模式的核心元素,但它负责 ViewModel 对象的初始化,它将组合一个或者多个 service 来获取业务领域 Model 放在 ViewModel 对象上,使得应用界面在启动加载的时候达到一种可用的状态。mvc 的界面和逻辑关联紧密,数据直接从数据库读取。mvvm 的界面与 viewmode 是松耦合,界面数据从 viewmodel 中获取。所以 angularjs 更倾向于 mvvm11、angularjs 中$scope,controller,directive,sevice 在 mvvm 中充当什么角色答案:如果你不知道,第一题的分析以及很明确,仔细再仔细的看一遍12、在 angular 项目中你如何控制静态资源的合理加载答案:暂无13、在写 controlloer 逻辑的时候 你需要注意什么?答案:1.简化代码(这个是所有开发人员都要具备的)2.坚决不能操作 dom 节点 这个时候可能会问 为什么不能啊你的回答是:DOM 操作只能出现在指令(directive)中。最不应该出现的位置就是服务(service)中。Angular 倡导以测试驱动开发,在 service 或者 controller 中出现了 DOM 操作,那么也就意味着的测试是无法通过的。当然,这只是一点,重要的是使用 Angular 的其中一个好处是啥,那就是双向数据绑定,这样就能专注于处理业务逻辑,无需关系一堆堆的 DOM 操作。如果在 Angular 的代码中还到处充斥着各种 DOM 操作,那为什么不直接使用 jquery 去开发呢。测试驱动开发是什么呢?普及一下:测试驱动开发,英文全称 Test-Driven Development,简称 TDD,是一种不同于传统软件开发流程的新型的开发方法。它要求在编写某个功能的代码之前先编写测试代码,然后只编写使测试通过的功能代码,通过测试来推动整个开发的进行。这有助于编写简洁可用和高质量的代码,并加速开发过程。14、controller 之间怎么通讯答案:1、event这里可以有两种方式,一种是s c o p e . scope.scope.emit,然后通过监听r o o t S c o p e 的 事 件 获 取 参 数 ; 另 一 种 是 rootScope的事件获取参数;另一种是rootScope的事件获取参数;另一种是rootScope.b r o a d c a s t , 通 过 监 听 broadcast,通过监听broadcast,通过监听scope 的事件获取参数。这两种方法在最新版本的 Angular 中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。2、service可以创建一个专用的事件 Service,也可以按照业务逻辑切分,将数据存储在相应的 Service 中3、$rootScope这个方法可能会比较 dirty 一点,胜在方便,也就是把数据存在r o o t S c o p e 中 , 这 样 各 个 子 rootScope中,这样各个子rootScope中,这样各个子scope 都可以调用,不过需要注意一下生命周期4、直接使用s c o p e . scope.scope.$nextSibling 及类似的属性类似的还有s c o p e . scope.scope.parent。这个方法的缺点就更多了,官方不推荐使用任何$$开头的属性,既增加了耦合,又需要处理异步的问题,而且 scope 的顺序也不是固定的。不推荐另外就是通过本地存储、全局变量或者现代浏览器的 postMessage 来传递参数了,除非特殊情况,请避免这类方式。15.自定义指令的几个参数答案:说几个常用的如:restrict:指令在 dom 中的声明形式 E(元素)A(属性)C(类名)M(注释)template:两种形式,一种 HTML 文本;一个可以接受两个参数的函数,tElemetn 和 tAttrs,并返回一个代表模板的字符串。模板字符串必须存在一个根 DOM 元素templateUrl:两种形式,一种代表外部 HTML 文件路径的字符串;一个可以接受两个参数的函数,参数为 tElement 和 tAttrs,并返回一个外部 HTML 文件路径的字符串compile (对象或函数):compile 选项可以返回一个对象或函数。如果设置了 compile 函数,说明我们希望在指令和实时数据被放到 DOM 中之前进行 DOM 操作,在这个函数中进行诸如添加和删除节点等 DOM 操作是安全的。本质上,当我们设置了 link 选项,实际上是创建了一个 postLink() 链接函数,以便 compile() 函数可以定义链接函数。compile 和 link 的区别:编译的时候,compile 转换 dom,碰到绑定监听器的地方就先存着,有几个存几个,到最后汇总成一个 link 函数,一并执行,提升了性能。16.angular 和 jquery 的区别答案:angular 是基于数据驱动,所以 angular 适合做数据操作比较繁琐的项目jquery 是基于 dom 驱动,jquery 适合做 dom 操作多的项目17.对 angular 中的 form 表单了解多少答案:Angular 对 input 元素的 type 进行了扩展,一共提供了以下 10 种类型:textnumberurlemailradiocheckboxhiddenbuttonsubmitresetAngular 为表单内置了 4 中 CSS 样式。ng-valid 校验合法状态ng-invalid 校验非法状态ng-pristine 如果要使用原生的 form,需要设置这个值ng-dirty 表单处于脏数据状态Angular 在对表单进行自动校验的时候会校验 Model 上的属性,如果不设置 ng-model,则 Angular 无法知道 myForm.$invalid 这个值是否为真。校验的一下内容required 表示是否输入内容ng-maxlength 最大长度ng-minlength 最小长度18.fliter 是什么你了解的有多少?实现一个自定义 fliter答案:date(日期)currency(货币)limitTo(限制数组或字符串长度)orderBy(排序)lowercase(小写)uppercase(大写)number(格式化数字,加上千位分隔符,并接收参数限定小数点位数)filter(处理一个数组,过滤出含有某个子串的元素)json(格式化 json 对象)filter 有两种使用方法,一种是直接在页面里:{{now|date:‘yyyy-MM-dd’}}另一种是在 js 里面用:自定义一个去重数组的到此,相信大家对“常见angular面试题实例分析”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: jquery如何实现元素可编辑

本篇内容主要讲解“jquery如何实现元素可编辑”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何实现元素可编辑”吧! 两种方法:1、用prop()将disabled属性的值设置为false,语法“元素…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册