前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >AngularJS面试常见问题汇总

AngularJS面试常见问题汇总

作者头像
生南星
发布2019-07-22 14:28:08
2.1K0
发布2019-07-22 14:28:08
举报
文章被收录于专栏:生南星

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

脏检查机制。 双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时,会更新到 model ,当 model 中数据有变化时,view 也会同步更新,显然,这需要一个监控。 原理就是,Angular 在 scope 模型上设置了一个监听队列,用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch ,用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时, $digest 循环就会触发,遍历所有的 $watch ,最后更新 dom。

2 AngularJS的数据双向绑定是怎么实现的?

1、每个双向绑定的元素都有一个watcher 2、在某些事件发生的时候,调用digest脏数据检测。 这些事件有:表单元素内容变化、Ajax请求响应、点击按钮执行的函数等。 3、脏数据检测会检测rootscope下所有被watcher的元素。 $digest函数就是脏数据监测

3.Angular中的digest周期是什么?

每个digest周期中,angular总会对比scope上model的值,一般digest周期都是自动触发的,我们也可以使用$apply进行手动触发。

4.ng-show/ng-hide 与 ng-if的区别? 我们都知道ng-show/ng-hide实际上是通过display来进行隐藏和显示的。而ng-if实际上控制dom节点的增删除来实现的。因此如果我们是根据不同的条件来进行dom节点的加载的话,那么ng-if的性能好过ng-show.

5. 列出至少三种实现不同模块之间通信方式?

  1. Service
  2. events,指定绑定的事件
  3. 使用 $rootScope
  4. controller之间直接使用$parent, $$childHead等
  5. directive 指定属性进行数据绑定

6.什么是MVC、MVVM? MVC:Model-View-Controller MVC是一种表现模式,是一种软件架构模式。其中有几个重要的概念: M,Model, 引用系统数据,管理系统功能并通知View更改用户操作。 V,View,就是用户接口,用于显示数据。 C,Controller ,将用户操作映射到Model,并操作视图。 对MVC而言,分离是最大的优点,尤其是Model将不依赖于Controller和View,对于隔离应用、进行UI测试打下很好的架构级支持。 MVVM:Model-View-ViewModel Model就是我们常说的数据模型,用于数据的构造,数据驱动, 主要提供基础实体的属性以及每个属性的验证逻辑. View主要用于界面呈现,与用户输入设备进行交互 ViewModel是MVVM架构中最重要的部分,ViewModel中包含属性,命令,方法,事件,属性验证等逻辑,用于逻辑实现,负责View与Model之间的通信。

7.接口访问的代码放在哪里?

放在service里。

8.如何进行angular的单元测试?

使用karam+jasmine 进行单元测试,我们通过ngMock引入angular app然后自行添加我们的测试用例。 一段简单的测试代码:

代码语言:javascript
复制
describe('calculator', function () {

 beforeEach(module('calculatorApp'));

 var $controller;

 beforeEach(inject(function(_$controller_){
   $controller = _$controller_;
 }));

 describe('sum', function () {
       it('1 + 1 should equal 2', function () {
           var $scope = {};
           var controller = $controller('CalculatorController', { $scope: $scope });
           $scope.x = 1;
           $scope.y = 2;
           $scope.sum();
           expect($scope.z).toBe(3);
       });    
   });

});
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-04-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 生南星 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.angular的数据绑定采用什么机制?详述原理
    • 7.接口访问的代码放在哪里?
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档