总结十个Angular.js由浅入深的面试问题


Posted in Javascript onAugust 26, 2016

一、ng-show/ng-hide 与 ng-if的区别?

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

二、解释下什么是$rootScrope以及和$scope的区别?

通俗的说$rootScrope 页面所有$scope的父亲。

总结十个Angular.js由浅入深的面试问题

我们来看下如何产生$rootScope$scope吧。

step1:Angular解析ng-app然后在内存中创建$rootScope

step2:angular回继续解析,找到{{}}表达式,并解析成变量。

step3:接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。

三、表达式 {{yourModel}}是如何工作的?

它依赖于 $interpolation服务,在初始化页面html后,它会找到这些表达式,并且进行标记,于是每遇见一个{{}},则会设置一个$watch。而$interpolation会返回一个带有上下文参数的函数,最后该函数执行,则算是表达式$parse到那个作用域上。

四、Angular中的digest周期是什么?

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

五、 如何取消 $timeout, 以及停止一个$watch()?

停止 $timeout我们可以用cancel

var customTimeout = $timeout(function () { 
 // your code
}, 1000);

$timeout.cancel(customTimeout);

停掉一个$watch:

// .$watch() 会返回一个停止注册的函数
function that we store to a variable 
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty', function (newVal) { 
 if (newVal) {
  // we invoke that deregistration function, to disable the watch
  deregisterWatchFn();
  ...
 }
});

六、Angular Directive中restrict 中分别可以怎样设置?scope中@,=,&有什么区别?

restrict中可以分别设置:

     A匹配属性

     E匹配标签

     C匹配class

     M 匹配注释

当然你可以设置多个值比如AEC,进行多个匹配。

scope中,@,=,&在进行值绑定时分别表示

     @获取一个设置的字符串,它可以自己设置的也可以使用{{yourModel}}进行绑定的;

     = 双向绑定,绑定scope上的一些属性;

     & 用于执行父级scope上的一些表达式,常见我们设置一些需要执行的函数

angular.module('docsIsolationExample', []) 
.controller('Controller', ['$scope', function($scope) {
 $scope.alertName = function() {
   alert('directive scope &');
 }
}])
.directive('myCustomer', function() {
 return {
  restrict: 'E',
  scope: {
   clickHandle: '&'
  },
  template: '<button ng-click="testClick()">Click Me</button>',
  controller: function($scope) {

   $scope.testClick = function() {
    $scope.clickHandle();

   } 
  }
 };
});
<div ng-app="docsIsolationExample"> 
<div ng-controller="Controller"> 
 <my-customer click-handle="alertName()"></my-customer>
</div> 
 </div>

< 进行单向绑定。

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

     1、Service

     2、events,指定绑定的事件

     3、使用 $rootScope

     4、controller之间直接使用$parent, $$childHead等

     5、directive 指定属性进行数据绑定

八、有哪些措施可以改善Angular 性能

官方提倡的,关闭debug,$compileProvider

myApp.config(function ($compileProvider) { 
 $compileProvider.debugInfoEnabled(false);
});

使用一次绑定表达式即{{::yourModel}}

减少watcher数量

在无限滚动加载中避免使用ng-repeat

使用性能测试的小工具去挖掘你的angular性能问题,我们可以使用简单的console.time()也可以借助开发者工具以及Batarang

console.time("TimerName"); 
//your code
console.timeEnd("TimerName");

九、你认为在Angular中使用jQuery好么?

这是一个开放性的问题,尽管网上会有很多这样的争论,但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候,我们应该做到从0去接受angular的思想,数据绑定,使用angular自带的一些api,合理的路由组织和,写相关指令和服务等等。angular自带了很多api可以完全替代掉jquery中常用的api,我们可以使用angular.element,$http,$timeout,ng-init等。

我们不妨再换个角度,如果业务需求,而对于一个新人(比较熟悉jQuery)的话,或许你引入jQuery可以让它在解决问题,比如使用插件上有更多的选择,当然这是通过影响代码组织来提高工作效率,随着对于angular理解的深入,在重构时会逐渐摒弃掉当初引入jquery时的一些代码。(?Po主就是这样的人,希望不要被嘲笑,业务却是赶着走)

所以我觉得两种框架说完全不能一起用肯定是错的,但是我们还是应该尽力去遵循angular的设计。

十、如何进行angular的单元测试

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

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);
    });  
  });

});

十一、总结

以上就是这篇文章的全部内容了,希望对大家的学习和工作能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
jquery JSON的解析方式
Jul 25 Javascript
jquery.validate使用攻略 第一部
Jul 01 Javascript
js字符编码函数区别分析
Dec 28 Javascript
jquery取消选择select下拉框示例代码
Feb 22 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
你有必要知道的25个JavaScript面试题
Dec 29 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
Jquery遍历select option和添加移除option的实现方法
Aug 26 #Javascript
响应式表格之固定表头的简单实现
Aug 26 #Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 #Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 #Javascript
jquery 动态合并单元格的实现方法
Aug 26 #Javascript
轻松掌握JavaScript中介者模式
Aug 26 #Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 #Javascript
You might like
php文件缓存类用法实例分析
2015/04/22 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
原生js实现回复评论功能
2017/01/18 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
python实现多线程的两种方式
2016/05/22 Python
pytorch使用 to 进行类型转换方式
2020/01/08 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Priority Pass机场贵宾室会籍计划:全球超过1200间机场贵宾室
2018/08/26 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
安全月活动总结
2014/05/05 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers