技術文章 » 18個常見angular面試題（附答案分析）

18個常見angular面試題（附答案分析）

2022-06-02 14:01:06
本篇文章給大家總結分享18個常見面試題（附答案分析）帶你梳理基礎知識，增強angular知識儲備，值得收藏，快來看看吧！

1、angular 的資料繫結採用什麼機制？詳述原理

答案：髒檢查機制。

解析：

雙向資料繫結是 AngularJS 的核心機制之一。當 view 中有任何資料變化時，會更新到 model ，當 model 中資料有變化時，view 也會同步更新，顯然，這需要一個監控。【相關教學推薦：《》】

原理就是，Angular 在 scope 模型上設定了一個監聽佇列，用來監聽資料變化並更新 view 。每次繫結一個東西到 view 上時 AngularJS 就會往 $watch 佇列裡插入一條 $watch ，用來檢測它監視的 model 裡是否有變化的東西。當瀏覽器接收到可以被 angular context 處理的事件時， $digest 迴圈就會觸發，遍歷所有的 $watch ，最後更新 dom。

2、AngularJS 的資料雙向繫結是怎麼實現的？

答案：

1、每個雙向繫結的元素都有一個 watcher

2、在某些事件發生的時候，呼叫 digest 髒資料檢測。

這些事件有：表單元素內容變化、Ajax 請求響應、點選按鈕執行的函數等。

3、髒資料檢測會檢測 rootscope 下所有被 watcher 的元素。

$digest 函數就是髒資料監測

3、在使用 angularjs 專案開發中 你使用過那些第三方的外掛

答案：AngularUi ui-router oclazyload 等等 附上一篇文章仔細去看看 https://segmentfault.com/a/1190000003858219

4、ng-show/ng-hide 與 ng-if 的區別？

答案：我們都知道 ng-show/ng-hide 實際上是通過 display 來進行隱藏和顯示的。而 ng-if 實際上控制 dom 節點的增刪除來實現的。因此如果我們是根據不同的條件來進行 dom 節點的載入的話，那麼 ng-if 的效能好過 ng-show.

5、解釋下什麼是r o o t S c r o p e 以 及 和 rootScrope以及和rootScrope以及和scope 的區別？

答案：通俗的說r o o t S c r o p e 頁 面 所 有 rootScrope 頁面所有rootScrope頁面所有scope 的父親。

解析：

我們來看下如何產生r o o t S c o p e 和 rootScope和rootScope和scope 吧。

step1:Angular 解析 ng-app 然後在記憶體中建立$rootScope。

step2:angular 回繼續解析，找到{{}}表示式，並解析成變數。

step3:接著會解析帶有 ng-controller 的 div 然後指向到某個 controller 函數。 這個時候在這個 controller 函數變成一個$scope 物件範例。

6、列出至少三種實現不同模組之間通訊方式？

答案：

  • Service
  • events,指定繫結的事件
  • 使用 $rootScope
  • controller 之間直接使用$parent, $$childHead 等
  • directive 指定屬性進行資料繫結

7、表示式 {{yourModel}} 是如何工作的？

答案：

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

8、angular 中的$http

答案：$http 是 AngularJS 中的一個核心服務，用於讀取遠端伺服器的資料。

我們可以使用內建的h t t p 服 務 直 接 同 外 部 進 行 通 信 。 http服務直接同外部進行通訊。http服務直接同外部進行通訊。http 服務只是簡單的封裝了瀏覽器原生的 XMLHttpRequest 物件。

9、ng-repeat 迭代陣列的時候，如果陣列中有相同值，會有什麼問題，如何解決？

答案：會提示 Duplicates in a repeater are not allowed. 加 track by $index 可解決。當然，也可以 trace by 任何一個普通的值，只要能唯一性標識陣列中的每一項即可（建立 dom 和資料之間的關聯）

10、angularjs 是 mvc 還是 mvvm 框架

答案：mvvm

解析：

首先闡述下你對 mvc 和 mvvm 的理解:

首先為什麼我們會需要 MVC？因為隨著程式碼規模越來越大，切分職責是大勢所趨，還有為了後期維護方便，修改一塊功能不影響其他功能。還有為了複用，因為很多邏輯是一樣的。而 MVC 只是手段，終極目標是模組化和複用。

mvvm 的優點

低耦合：View 可以獨立於 Model 變化和修改，同一個 ViewModel 可以被多個 View 複用；並且可以做到 View 和 Model 的變化互不影響；

可重用性：可以把一些檢視的邏輯放在 ViewModel，讓多個 View 複用；

獨立開發：開發人員可以專注與業務邏輯和資料的開發（ViewModemvvmdi 計人員可以專注於 UI(View)的設計；

可測試性：清晰的 View 分層，使得針對表現層業務邏輯的測試更容易，更簡單。

在 angular 中 MVVM 模式主要分為四部分：

View：它專注於介面的顯示和渲染，在 angular 中則是包含一堆宣告式 Directive 的檢視模板。

ViewModel：它是 View 和 Model 的粘合體，負責 View 和 Model 的互動和共同作業，它負責給 View 提供顯示的資料，以及提供了 View 中 Command 事件操作 Model 的途徑；在 angular 中$scope 物件充當了這個 ViewModel 的角色；

Model：它是與應用程式的業務邏輯相關的資料的封裝載體，它是業務領域的物件，Model 並不關心會被如何顯示或操作，所以模型也不會包含任何介面顯示相關的邏輯。在 web 頁面中，大部分 Model 都是來自 Ajax 的伺服器端返回資料或者是全域性的設定物件；而 angular 中的 service 則是封裝和處理這些與 Model 相關的業務邏輯的場所，這類的業務服務是可以被多個 Controller 或者其他 service 複用的領域服務。

Controller：這並不是 MVVM 模式的核心元素，但它負責 ViewModel 物件的初始化，它將組合一個或者多個 service 來獲取業務領域 Model 放在 ViewModel 物件上，使得應用介面在啟動載入的時候達到一種可用的狀態。

mvc 的介面和邏輯關聯緊密，資料直接從資料庫讀取。mvvm 的介面與 viewmode 是鬆耦合，介面資料從 viewmodel 中獲取。所以 angularjs 更傾向於 mvvm

11、angularjs 中$scope，controller，directive，sevice 在 mvvm 中充當什麼角色

答案：如果你不知道，第一題的分析以及很明確，仔細再仔細的看一遍

12、在 angular 專案中你如何控制靜態資源的合理載入

答案：暫無

13、在寫 controlloer 邏輯的時候 你需要注意什麼？

答案：

1.簡化程式碼（這個是所有開發人員都要具備的）

2.堅決不能操作 dom 節點 這個時候可能會問 為什麼不能啊

你的回答是：DOM 操作只能出現在指令（directive）中。最不應該出現的位置就是服務（service）中。Angular 倡導以測試驅動開發，在 service 或者 controller 中出現了 DOM 操作，那麼也就意味著的測試是無法通過的。當然，這只是一點，重要的是使用 Angular 的其中一個好處是啥，那就是雙向資料繫結，這樣就能專注於處理業務邏輯，無需關係一堆堆的 DOM 操作。如果在 Angular 的程式碼中還到處充斥著各種 DOM 操作，那為什麼不直接使用 jquery 去開發呢。

測試驅動開發是什麼呢？普及一下：

測試驅動開發，英文全稱 Test-Driven Development，簡稱 TDD，是一種不同於傳統軟體開發流程的新型的開發方法。它要求在編寫某個功能的程式碼之前先編寫測試程式碼，然後只編寫使測試通過的功能程式碼，通過測試來推動整個開發的進行。這有助於編寫簡潔可用和高品質的程式碼，並加速開發過程。

14、controller 之間怎麼通訊

答案：

1、event

這裡可以有兩種方式，一種是s c o p e . scope.scope.emit，然後通過監聽r o o t S c o p e 的 事 件 獲 取 參 數 ； 另 一 種 是 rootScope的事件獲取引數；另一種是rootScope的事件獲取引數；另一種是rootScope.b r o a d c a s t ， 通 過 監 聽 broadcast，通過監聽broadcast，通過監聽scope 的事件獲取引數。

這兩種方法在最新版本的 Angular 中已經沒有效能區別了，主要就是事件傳送的方向不同，可以按實際情況選擇。

2、service

可以建立一個專用的事件 Service，也可以按照業務邏輯切分，將資料儲存在相應的 Service 中

3、$rootScope

這個方法可能會比較 dirty 一點，勝在方便，也就是把資料存在r o o t S c o p e 中 ， 這 樣 各 個 子 rootScope中，這樣各個子rootScope中，這樣各個子scope 都可以呼叫，不過需要注意一下生命週期

4、直接使用s c o p e . scope.scope.$nextSibling 及類似的屬性

類似的還有s c o p e . scope.scope.parent。這個方法的缺點就更多了，官方不推薦使用任何$$開頭的屬性，既增加了耦合，又需要處理非同步的問題，而且 scope 的順序也不是固定的。不推薦

另外就是通過本地儲存、全域性變數或者現代瀏覽器的 postMessage 來傳遞引數了，除非特殊情況，請避免這類方式。

15.自定義指令的幾個引數

答案：

說幾個常用的如：

restrict:指令在 dom 中的宣告形式 E（元素）A（屬性）C（類名）M（註釋）

template：兩種形式，一種 HTML 文字；一個可以接受兩個引數的函數，tElemetn 和 tAttrs，並返回一個代表模板的字串。模板字串必須存在一個根 DOM 元素

templateUrl:兩種形式，一種代表外部 HTML 檔案路徑的字串；一個可以接受兩個引數的函數，引數為 tElement 和 tAttrs，並返回一個外部 HTML 檔案路徑的字串

compile (物件或函數)：compile 選項可以返回一個物件或函數。如果設定了 compile 函數,說明我們希望在指令和實時資料被放到 DOM 中之前進行 DOM 操作,在這個函數中進行諸如新增和刪除節點等 DOM 操作是安全的。本質上,當我們設定了 link 選項,實際上是建立了一個 postLink() 連結函數,以便 compile() 函數可以定義連結函數。

然後又是傳送門：http://www.cnblogs.com/mliudong/p/4180680.html

compile 和 link 的區別：

編譯的時候，compile 轉換 dom，碰到繫結監聽器的地方就先存著，有幾個存幾個，到最後彙總成一個 link 函數，一併執行，提升了效能。

16.angular 和 jquery 的區別

答案：

angular 是基於資料驅動，所以 angular 適合做資料操作比較繁瑣的專案（這裡可以再提一下單頁面應用，如果你不會福利又來了 http://www.zhihu.com/question/20792064）

jquery 是基於 dom 驅動，jquery 適合做 dom 操作多的專案

17.對 angular 中的 form 表單瞭解多少

答案：

Angular 對 input 元素的 type 進行了擴充套件，一共提供了以下 10 種型別：

  • text

  • number

  • url

  • email

  • radio

  • checkbox

  • hidden

  • button

  • submit

  • reset

Angular 為表單內建了 4 中 CSS 樣式。

  • ng-valid 校驗合法狀態

  • ng-invalid 校驗非法狀態

  • ng-pristine 如果要使用原生的 form，需要設定這個值

  • ng-dirty 表單處於髒資料狀態

Angular 在對錶單進行自動校驗的時候會校驗 Model 上的屬性，如果不設定 ng-model，則 Angular 無法知道 myForm.$invalid 這個值是否為真。

校驗的一下內容

  • required 表示是否輸入內容

  • ng-maxlength 最大長度

  • ng-minlength 最小長度

例子：傳送門https://github.com/18500047564/clutter

18.fliter 是什麼你瞭解的有多少？實現一個自定義 fliter

答案：

  • date（日期）

  • currency（貨幣）

  • limitTo（限制陣列或字串長度）

  • orderBy（排序）

  • lowercase（小寫）

  • uppercase（大寫）

  • number（格式化數位，加上千位分隔符，並接收引數限定小數點位數）

  • filter（處理一個陣列，過濾出含有某個子串的元素）

  • json（格式化 json 物件）

filter 有兩種使用方法，

一種是直接在頁面裡：

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

另一種是在 js 裡面用：

$filter(‘過濾器名稱’)(需要過濾的物件, 引數 1, 引數 2,…)
$filter(‘date’)(now, 'yyyy-MM-dd hh:mm:ss’);

自定義一個去重陣列的

app.filter("unique", function() {
  return function(arr) {
    var n = [];
    var obj = {};

    for (var i = 0; i < arr.length; i++) {
      if (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    return n;
  };
});

更多程式設計相關知識，請存取：！！

以上就是18個常見angular面試題（附答案分析）的詳細內容，更多請關注TW511.COM其它相關文章！