一、ng-show/ng-hide 與 ng-if的區(qū)別？

我們都知道ng-show/ng-hide實際上是通過display來進(jìn)行隱藏和顯示的。而ng-if實際上控制dom節(jié)點的增刪除來實現(xiàn)的。因此如果我們是根據(jù)不同的條件來進(jìn)行dom節(jié)點的加載的話，那么ng-if的性能好過ng-show.

二、解釋下什么是$rootScrope以及和$scope的區(qū)別？

通俗的說$rootScrope 頁面所有$scope的父親。

我們來看下如何產(chǎn)生$rootScope和$scope吧。

step1:Angular解析ng-app然后在內(nèi)存中創(chuàng)建$rootScope。

step2:angular回繼續(xù)解析，找到{{}}表達(dá)式，并解析成變量。

step3:接著會解析帶有ng-controller的div然后指向到某個controller函數(shù)。這個時候在這個controller函數(shù)變成一個$scope對象實例。

三、表達(dá)式 {{yourModel}}是如何工作的？

它依賴于 $interpolation服務(wù)，在初始化頁面html后，它會找到這些表達(dá)式，并且進(jìn)行標(biāo)記，于是每遇見一個{{}}，則會設(shè)置一個$watch。而$interpolation會返回一個帶有上下文參數(shù)的函數(shù)，最后該函數(shù)執(zhí)行，則算是表達(dá)式$parse到那個作用域上。

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

每個digest周期中，angular總會對比scope上model的值，一般digest周期都是自動觸發(fā)的，我們也可以使用$apply進(jìn)行手動觸發(fā)。

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

停止 $timeout我們可以用cancel：

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

$timeout.cancel(customTimeout);

停掉一個$watch：

// .$watch() 會返回一個停止注冊的函數(shù)
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 中分別可以怎樣設(shè)置？scope中@,=,&有什么區(qū)別？

restrict中可以分別設(shè)置:

     A匹配屬性

     E匹配標(biāo)簽

     C匹配class

     M 匹配注釋

當(dāng)然你可以設(shè)置多個值比如AEC,進(jìn)行多個匹配。

在scope中，@,=,&在進(jìn)行值綁定時分別表示

     @獲取一個設(shè)置的字符串，它可以自己設(shè)置的也可以使用{{yourModel}}進(jìn)行綁定的;

     = 雙向綁定，綁定scope上的一些屬性；

     & 用于執(zhí)行父級scope上的一些表達(dá)式，常見我們設(shè)置一些需要執(zhí)行的函數(shù)

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>

< 進(jìn)行單向綁定。

七、 列出至少三種實現(xiàn)不同模塊之間通信方式？

     1、Service

     2、events,指定綁定的事件

     3、使用 $rootScope

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

     5、directive 指定屬性進(jìn)行數(shù)據(jù)綁定

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

官方提倡的，關(guān)閉debug,$compileProvider

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

使用一次綁定表達(dá)式即{{::yourModel}}

減少watcher數(shù)量

在無限滾動加載中避免使用ng-repeat

使用性能測試的小工具去挖掘你的angular性能問題，我們可以使用簡單的console.time()也可以借助開發(fā)者工具以及Batarang

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

九、你認(rèn)為在Angular中使用jQuery好么？

這是一個開放性的問題，盡管網(wǎng)上會有很多這樣的爭論，但是普遍還是認(rèn)為這并不是一個特別好的嘗試。其實當(dāng)我們學(xué)習(xí)Angular的時候，我們應(yīng)該做到從0去接受angular的思想，數(shù)據(jù)綁定，使用angular自帶的一些api，合理的路由組織和，寫相關(guān)指令和服務(wù)等等。angular自帶了很多api可以完全替代掉jquery中常用的api，我們可以使用angular.element，$http,$timeout,ng-init等。

我們不妨再換個角度，如果業(yè)務(wù)需求，而對于一個新人（比較熟悉jQuery）的話，或許你引入jQuery可以讓它在解決問題，比如使用插件上有更多的選擇，當(dāng)然這是通過影響代碼組織來提高工作效率，隨著對于angular理解的深入，在重構(gòu)時會逐漸摒棄掉當(dāng)初引入jquery時的一些代碼。(😂Po主就是這樣的人，希望不要被嘲笑，業(yè)務(wù)卻是趕著走)

所以我覺得兩種框架說完全不能一起用肯定是錯的，但是我們還是應(yīng)該盡力去遵循angular的設(shè)計。

十、如何進(jìn)行angular的單元測試

我們可以使用karam＋jasmine 進(jìn)行單元測試,我們通過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);
    });  
  });

});

十一、總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望對大家的學(xué)習(xí)和工作能有所幫助。如果有疑問可以留言討論。

最新評論