Angular面试从喜剧到悲剧的十个问题

JavaScript · 公众号 · Javascript · 2016-12-30 11:06

正文

转自 https://segmentfault.com/a/1190000005817928

虽然只有10个问题，但是覆盖了angular开发中的各个方面，有基本的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题去辨别面试者的基础水准和项目经验如果自己一年前面试肯定是喜剧到悲剧的转变😂。（PS:答案仅供参考～）。

1. ng-show/ng-hide 与 ng-if的区别？

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

2.解释下什么是 $r o o t S c r o p e 以及和 " role="presentation" style=" display: inline; font-weight: normal; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; "> r o o t S c r o p e 以及和 scope的区别？$

interpolation服务，在初始化页面html后，它会找到这些表达式，并且进行标记，于是每遇见一个，则会设置一个watch。而 $i n t e r p o l a t i o n 会返回一个带有上下文参数的函数，最后该函数执行，则算是表达式 " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; ">$

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

// .$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.module('docsIsolationExample', [])
.controller('Controller', ['$scope', function($scope) {
  $scope.alertName = function() {
      alert('directive scope &');
  }
}])
.directive('myCustomer', function() {
  return {
    restrict: 'E',
    scope: {
      clickHandle: '&'
    },
    template: '',
    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>

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

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

这是一个开放性的问题，尽管网上会有很多这样的争论，但是普遍还是认为这并不是一个特别好的尝试。其实当我们学习Angular的时候，我们应该做到从0去接受angular的思想，数据绑定，使用angular自带的一些api，合理的路由组织和，写相关指令和服务等等。angular自带了很多api可以完全替代掉jquery中常用的api，我们可以使用angular.element， $h t t p, " role="presentation" style=" display: inline; line-height: normal; word-spacing: normal; word-wrap: normal; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; ">$

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

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

Angular面试从喜剧到悲剧的十个问题

正文

1. ng-show/ng-hide 与 ng-if的区别？

3. 表达式 {{yourModel}}是如何工作的？

4. Angular中的digest周期是什么？

6. Angular Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

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

8. 有哪些措施可以改善Angular 性能

9. 你认为在Angular中使用jQuery好么？

10. 如何进行angular的单元测试