AngularJS常見(jiàn)面試題及答案

2022-04-15 14:40 更新

Angular是當(dāng)下非常流行的前端框架,受到了廣大前端開發(fā)者的喜愛(ài)。下面,w3cschool將為大家列出一些經(jīng)典的Angular面試題以及答案,供大家參考。

timg (1)

Q1、ng-if跟ng-show/hide的區(qū)別有哪些?

A:區(qū)別主要有兩點(diǎn):

1、ng-if 在后面表達(dá)式為 true 的時(shí)候才創(chuàng)建dom 節(jié)點(diǎn),而ng-show 是在初始時(shí)就創(chuàng)建了,可以用 display:block 和 display:none 來(lái)控制顯示和不顯示。

2、ng-if 會(huì)(隱式地)產(chǎn)生新作用域,ng-switch 、ng-include 等會(huì)動(dòng)態(tài)創(chuàng)建一塊界面的也是如此。

這樣會(huì)導(dǎo)致,在 ng-if 中用基本變量綁定 ng-model,同事在外層的 div 中將 model 綁定給另一個(gè)顯示區(qū)域后,在內(nèi)層改變時(shí),外層并不會(huì)隨著內(nèi)層改變,因?yàn)檫@已經(jīng)兩個(gè)不同的變量了。

<p>{{name}}</p>
<div ng-if="true">
    <input type="text" ng-model="name">
</div>

而在 ng-show 中,卻不存在此問(wèn)題,因?yàn)樗蛔詭б患?jí)作用域。

為了避免這類問(wèn)題的出現(xiàn),我們可以始終將頁(yè)面中的元素綁定到對(duì)象的屬性(data.x),而不是直接綁定到基本變量(x)上。


Q2、ng-repeat迭代數(shù)組的時(shí)候,如果數(shù)組中有相同值,會(huì)有什么問(wèn)題,如何解決?

A:會(huì)提示 Duplicates in a repeater are not allowed. 出現(xiàn)這種情況的時(shí)候,我們可以通過(guò)加 track by $index 來(lái)解決。當(dāng)然,也可以 trace by 任何一個(gè)普通的值,只要能唯一性標(biāo)識(shí)數(shù)組中的每一項(xiàng)即可(建立 dom 和數(shù)據(jù)之間的關(guān)聯(lián))。


Q3、ng-click 中寫的表達(dá)式,能使用 JS 原生對(duì)象上的方法嗎?

A:不止是 ng-click 中,只要是在頁(yè)面中,都是無(wú)法直接調(diào)用原生的 JS 方法的,因?yàn)檫@些并不存在于與頁(yè)面對(duì)應(yīng)的 Controller 的 $scope 中。

舉個(gè)例子:

<p>{{parseInt(55.66)}}<p>

我們會(huì)發(fā)現(xiàn),什么也沒(méi)有顯示。

但如果在 $scope 中添加了下面這個(gè)函數(shù):

$scope.parseInt = function(x){
    return parseInt(x);
}

運(yùn)行就自然是沒(méi)什么問(wèn)題了。

對(duì)于這種需求,使用一個(gè) filter 或許是不錯(cuò)的選擇:

<p>{{13.14 | parseIntFilter}}</p>

app.filter('parseIntFilter', function(){
    return function(item){
        return parseInt(item);
    }
})


Q4、{{now | 'yyyy-MM-dd'}} 這種表達(dá)式里面,豎線和后面的參數(shù)通過(guò)什么方式可以自定義?

A:filter,格式化數(shù)據(jù),接收一個(gè)輸入,按某規(guī)則處理,返回處理結(jié)果。


ng 內(nèi)置的filter主要有九種:

1:date(日期)

2:currency(貨幣)

3:limitTo(限制數(shù)組或字符串長(zhǎng)度)

4:orderBy(排序)

5:lowercase(小寫)

6:uppercase(大寫)

7:number(格式化數(shù)字,加上千位分隔符,并接收參數(shù)限定小數(shù)點(diǎn)位數(shù))

8:filter(處理一個(gè)數(shù)組,過(guò)濾出含有某個(gè)子串的元素)

9:json(格式化 json 對(duì)象)


filter 有兩種使用方法:

一種是直接在頁(yè)面里:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

另一種是在 js 里面用:

// $filter('過(guò)濾器名稱')(需要過(guò)濾的對(duì)象, 參數(shù)1, 參數(shù)2,...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

自定義 filter

// 形式
app.filter('過(guò)濾器名稱',function(){
    return function(需要過(guò)濾的對(duì)象,過(guò)濾器參數(shù)1,過(guò)濾器參數(shù)2,...){
        //...做一些事情  
        return 處理后的對(duì)象;
    }
});  
// 栗子
app.filter('timesFilter', function(){
    return function(item, times){
        var result = '';
        for(var i = 0; i < times; i++){
            result += item;
        }
        return result;
    }
})


Q5、factory、service 和 provider 是什么關(guān)系?

factory

把 service 的方法和數(shù)據(jù)放在一個(gè)對(duì)象里,并返回這個(gè)對(duì)象。

app.factory('FooService', function(){
  return {
    target: 'factory',
    sayHello: function(){
      return 'hello ' + this.target;
    }
  }
});

service

通過(guò)構(gòu)造函數(shù)的方式創(chuàng)建 service,然后返回一個(gè)實(shí)例化對(duì)象。

app.service('FooService', function(){
  var self = this;
  this.target = 'service';
  this.sayHello = function(){
    return 'hello ' + self.target;
  }
});

provider

創(chuàng)建一個(gè)可通過(guò) config 配置的 service,$get 中返回的,就是用 factory 創(chuàng)建 service 的內(nèi)容。

app.provider('FooService', function(){
  this.configData = 'init data';
  this.setConfigData = function(data){
    if(data){
      this.configData = data;
    }
  }
  this.$get = function(){
    var self = this;
    return {
      target: 'provider',
      sayHello: function(){
        return self.configData + ' hello ' + this.target;
      }
    }
  }
});
 
// 此處注入的是 FooService 的 provider
app.config(function(FooServiceProvider){
  FooServiceProvider.setConfigData('config data');
});

從底層實(shí)現(xiàn)上來(lái)看,三者的關(guān)系是:service 調(diào)用了 factory,返回其實(shí)例;factory 調(diào)用了 provider,返回其 $get 中定義的內(nèi)容。factory 和 service 的功能類似,但是 factory 是普通 function,可以返回任何東西;service 是構(gòu)造器,可以不返回(綁定到 this 的都可以被訪問(wèn));provider 是加強(qiáng)版 factory,返回一個(gè)可配置的 factory。


Q6、angular 的數(shù)據(jù)綁定采用什么機(jī)制?詳述原理

A:采用了臟檢查機(jī)制。

雙向數(shù)據(jù)綁定是 AngularJS 的核心機(jī)制之一。當(dāng) view 中有任何一個(gè)數(shù)據(jù)變化時(shí),都會(huì)更新到 model 中。如果 model 中的數(shù)據(jù)有變化時(shí),view 也會(huì)同步更新,顯然,這需要一個(gè)監(jiān)控。

原理

Angular 在 scope 模型上設(shè)置了一個(gè)監(jiān)聽(tīng)隊(duì)列,這個(gè)監(jiān)聽(tīng)隊(duì)列可以用來(lái)監(jiān)聽(tīng)數(shù)據(jù)變化并更新 view 。每次綁定一個(gè)東西到 view 上時(shí), AngularJS 就會(huì)往 $watch 隊(duì)列里插入一條 $watch ,用來(lái)檢測(cè)它監(jiān)視的 model 里是否有變化的東西。當(dāng)瀏覽器接收到可以被 angular context 處理的事件時(shí), $digest 循環(huán)就會(huì)觸發(fā),遍歷所有的 $watch ,最后更新 dom。


Q7、兩個(gè)平級(jí)界面塊 a 和 b,如果 a 中觸發(fā)一個(gè)事件,有哪些方式能讓 b 知道?詳述原理

A:這個(gè)問(wèn)題換一種說(shuō)法就是,如何在平級(jí)界面模塊間進(jìn)行通信。有兩種方法,一種是共用服務(wù),一種是基于事件。

共用服務(wù)

在 Angular 中,通過(guò) factory 可以生成一個(gè)單例對(duì)象,在需要通信的模塊 a 和 b 中注入這個(gè)對(duì)象即可。

基于事件

這個(gè)又分兩種方式

第一種是借助父 controller。在子 controller 中向父 controller 觸發(fā)( $emit )一個(gè)事件,然后在父 controller 中監(jiān)聽(tīng)( $on )事件,再?gòu)V播( $broadcast )給子 controller ,這樣通過(guò)事件攜帶的參數(shù),實(shí)現(xiàn)了數(shù)據(jù)經(jīng)過(guò)父 controller,在同級(jí) controller 之間傳播。

第二種是借助 $rootScope 。每個(gè) Angular 應(yīng)用默認(rèn)有一個(gè)根作用域 $rootScope , 根作用域位于最頂層,從它往下掛著各級(jí)作用域。所以,如果子控制器直接使用 $rootScope 廣播和接收事件,那么就可實(shí)現(xiàn)同級(jí)之間的通信。


Q8、一個(gè) angular 應(yīng)用應(yīng)當(dāng)如何良好地分層?

目錄結(jié)構(gòu)的劃分

對(duì)于小型項(xiàng)目,可以按照文件類型組織,比如:

css
js
 controllers
 models
 services
 filters
templates 

但是對(duì)于規(guī)模較大的項(xiàng)目,最好按業(yè)務(wù)模塊劃分,比如:

css
modules
 account
  controllers
  models
  services
  filters
  templates
 disk
  controllers
  models
  services
  filters
  templates

modules 下最好再有一個(gè) common 目錄來(lái)存放公共的東西。

邏輯代碼的拆分

作為一個(gè) MVVM 框架,Angular 應(yīng)用本身就應(yīng)該按照 模型,視圖模型(控制器),視圖來(lái)劃分。

這里邏輯代碼的拆分,主要是指盡量讓 controller 這一層很薄。提取共用的邏輯到 service 中 (比如后臺(tái)數(shù)據(jù)的請(qǐng)求,數(shù)據(jù)的共享和緩存,基于事件的模塊間通信等),提取共用的界面操作到 directive 中(比如將日期選擇、分頁(yè)等封裝成組件等),提取共用的格式化操作到 filter 中等等。

在復(fù)雜的應(yīng)用中,也可以為實(shí)體建立對(duì)應(yīng)的構(gòu)造函數(shù),比如硬盤(Disk)模塊,可能有列表、新建、詳情這樣幾個(gè)視圖,并分別對(duì)應(yīng)的有 controller,那么可以建一個(gè) Disk 構(gòu)造函數(shù),里面完成數(shù)據(jù)的增刪改查和驗(yàn)證操作,有跟 Disk 相關(guān)的 controller,就注入 Disk 構(gòu)造器并生成一個(gè)實(shí)例,這個(gè)實(shí)例就具備了增刪改查和驗(yàn)證方法。這樣既層次分明,又實(shí)現(xiàn)了復(fù)用(讓 controller 層更薄了)。


Q9、angular 應(yīng)用常用哪些路由庫(kù),各自的區(qū)別是什么?

A:Angular1.x 中常用 ngRoute 和 ui.router。

區(qū)別

ngRoute 模塊是 Angular 自帶的路由模塊,而 ui.router 模塊是基于 ngRoute模塊開發(fā)的第三方模塊。

ui.router 是基于 state (狀態(tài))的, ngRoute 是基于 url 的,ui.router模塊具有更強(qiáng)大的功能,主要體現(xiàn)在視圖的嵌套方面。

使用 ui.router 能夠定義有明確父子關(guān)系的路由,并通過(guò) ui-view 指令將子路由模版插入到父路由模板的 <div ui-view></div> 中去,從而實(shí)現(xiàn)視圖嵌套。而在 ngRoute 中不能這樣定義,如果同時(shí)在父子視圖中 使用了 <div ng-view></div> 會(huì)陷入死循環(huán)。

示例

ngRoute

var app = angular.module('ngRouteApp', ['ngRoute']);
app.config(function($routeProvider){
  $routeProvider
    .when('/main', {
      templateUrl: "main.html",
      controller: 'MainCtrl'
    })
    .otherwise({ redirectTo: '/tabs' });

ui.router

var app = angular.module("uiRouteApp", ["ui.router"]);
app.config(function($urlRouterProvider, $stateProvider){
  $urlRouterProvider.otherwise("/index");
  $stateProvider
    .state("Main", {
      url: "/main",
      templateUrl: "main.html",
      controller: 'MainCtrl'
    })


Q10、分屬不同團(tuán)隊(duì)進(jìn)行開發(fā)的 angular 應(yīng)用,如果要做整合,可能會(huì)遇到哪些問(wèn)題,如何解決?

A:可能會(huì)遇到不同模塊之間的沖突。

比如一個(gè)團(tuán)隊(duì)所有的開發(fā)在 moduleA 下進(jìn)行,另一團(tuán)隊(duì)開發(fā)的代碼在 moduleB 下

angular.module('myApp.moduleA', [])
  .factory('serviceA', function(){
    ...
  })
   
angular.module('myApp.moduleB', [])
  .factory('serviceA', function(){
    ...
  })  
   
angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])  

會(huì)導(dǎo)致兩個(gè) module 下面的 serviceA 發(fā)生了覆蓋。

貌似在 Angular1.x 中并沒(méi)有很好的解決辦法,所以最好在前期進(jìn)行統(tǒng)一規(guī)劃,做好約定,嚴(yán)格按照約定開發(fā),每個(gè)開發(fā)人員只寫特定區(qū)塊代碼。


Q11、angular 的缺點(diǎn)有哪些?

強(qiáng)約束

導(dǎo)致學(xué)習(xí)成本較高,對(duì)前端不友好。

但遵守 AngularJS 的約定時(shí),生產(chǎn)力會(huì)很高,對(duì) Java 程序員友好。

不利于SEO

因?yàn)樗袃?nèi)容都是動(dòng)態(tài)獲取并渲染生成的,搜索引擎沒(méi)法爬取。

一種解決辦法是,對(duì)于正常用戶的訪問(wèn),服務(wù)器響應(yīng) AngularJS 應(yīng)用的內(nèi)容;對(duì)于搜索引擎的訪問(wèn),則響應(yīng)專門針對(duì) SEO 的HTML頁(yè)面。

性能問(wèn)題

作為 MVVM 框架,因?yàn)閷?shí)現(xiàn)了數(shù)據(jù)的雙向綁定,對(duì)于大數(shù)組、復(fù)雜對(duì)象會(huì)存在性能問(wèn)題。

可以用來(lái) 優(yōu)化 Angular 應(yīng)用的性能 的辦法:

減少監(jiān)控項(xiàng)(比如對(duì)不會(huì)變化的數(shù)據(jù)采用單向綁定)

主動(dòng)設(shè)置索引(指定 track by ,簡(jiǎn)單類型默認(rèn)用自身當(dāng)索引,對(duì)象默認(rèn)使用 $$hashKey ,比如改為 track by item.id )

降低渲染數(shù)據(jù)量(比如分頁(yè),或者每次取一小部分?jǐn)?shù)據(jù),根據(jù)需要再?。?

數(shù)據(jù)扁平化(比如對(duì)于樹狀結(jié)構(gòu),使用扁平化結(jié)構(gòu),構(gòu)建一個(gè) map 和樹狀數(shù)據(jù),對(duì)樹操作時(shí),由于跟扁平數(shù)據(jù)同一引用,樹狀數(shù)據(jù)變更會(huì)同步到原始的扁平數(shù)據(jù))

另外,對(duì)于Angular1.x ,存在 臟檢查 和 模塊機(jī)制 的問(wèn)題。


Q12、如何看待 angular 1.2 中引入的 controller as 語(yǔ)法?

A:在 angular 1.2 以前,在 view 上的任何綁定都是直接綁定在 $scope 上的

function myCtrl($scope){
  $scope.a = 'aaa';
  $scope.foo = function(){
    ...
  }
}

使用 controllerAs,不需要再注入 $scope ,controller 變成了一個(gè)很簡(jiǎn)單的 javascript 對(duì)象(POJO),一個(gè)更純粹的 ViewModel。

function myCtrl(){
  // 使用 vm 捕獲 this 可避免內(nèi)部的函數(shù)在使用 this 時(shí)導(dǎo)致上下文改變
  var vm = this;
  vm.a = 'aaa';
}


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)