Angular面試從喜劇到悲劇的十個問題

時間 2019-11-05

原文原文鏈接

雖然只有10個問題，可是覆蓋了angular開發中的各個方面，有基本的知識點，也有在開發過程當中碰見的問題，同時也有較爲開放性的問題去辨別面試者的基礎水準和項目經驗若是本身一年前面試確定是喜劇到悲劇的轉變?。（PS:答案僅供參考～）。javascript

1. `ng-show/ng-hide` 與 `ng-if`的區別？

咱們都知道ng-show/ng-hide其實是經過display來進行隱藏和顯示的。而ng-if實際上控制dom節點的增刪除來實現的。所以若是咱們是根據不一樣的條件來進行dom節點的加載的話，那麼ng-if的性能好過ng-show.html

2.解釋下什麼是`$rootScrope`以及和`$scope`的區別？

通俗的說$rootScrope 頁面全部$scope的父親。vue

咱們來看下如何產生$rootScope和$scope吧。java

step1:Angular解析ng-app而後在內存中建立$rootScope。jquery

step2:angular回繼續解析，找到{{}}表達式，並解析成變量。git

step3:接着會解析帶有ng-controller的div而後指向到某個controller函數。這個時候在這個controller函數變成一個$scope對象實例。angularjs

3. 表達式 `{{yourModel}}`是如何工做的？

它依賴於 $interpolation服務，在初始化頁面html後，它會找到這些表達式，而且進行標記，因而每碰見一個{{}}，則會設置一個$watch。而$interpolation會返回一個帶有上下文參數的函數，最後該函數執行，則算是表達式$parse到那個做用域上。github

4. Angular中的digest週期是什麼？

每一個digest週期中，angular總會對比scope上model的值，通常digest週期都是自動觸發的，咱們也可使用$apply進行手動觸發。更深層次的研究，能夠移步The Digest Loop and apply。web

5. 如何取消 `$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();
    ...
  }
});

6. 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>

Codepen Demo

< 進行單向綁定。

7. 列出至少三種實現不一樣模塊之間通訊方式？

Service
events,指定綁定的事件
使用 $rootScope
controller之間直接使用$parent, $$childHead等
directive 指定屬性進行數據綁定

8. 有哪些措施能夠改善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");

9. 你認爲在Angular中使用jQuery好麼？

這是一個開放性的問題，儘管網上會有不少這樣的爭論，可是廣泛仍是認爲這並非一個特別好的嘗試。其實當咱們學習Angular的時候，咱們應該作到從0去接受angular的思想，數據綁定，使用angular自帶的一些api，合理的路由組織和，寫相關指令和服務等等。angular自帶了不少api能夠徹底替代掉jquery中經常使用的api，咱們可使用angular.element，$http,$timeout,ng-init等。

咱們不妨再換個角度，若是業務需求，而對於一個新人（比較熟悉jQuery）的話，或許你引入jQuery可讓它在解決問題，好比使用插件上有更多的選擇，固然這是經過影響代碼組織來提升工做效率，隨着對於angular理解的深刻，在重構時會逐漸摒棄掉當初引入jquery時的一些代碼。(?Po主就是這樣的人，但願不要被嘲笑，業務倒是趕着走)

因此我以爲兩種框架說徹底不能一塊兒用確定是錯的，可是咱們仍是應該盡力去遵循angular的設計。

10. 如何進行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);
        });    
    });

});

關於測試，你們能夠看下使用karma進行angular測試

除了Karam , Angular.js團隊推出了一款e2e(end-to-end)的測試框架protractor