前端面試之angular JS


1. angular的數據綁定采用什么機制?詳述原理

angularjs的雙向數據綁定,采用臟檢查(dirty-checking)機制。ng只有在指定事件觸發后,才進入 $digest cycle : 
- DOM事件,譬如用戶輸入文本,點擊按鈕等。( ng-click ) 
- XHR響應事件 ( $http ) 
- 瀏覽器Location變更事件 ( $location ) 
- Timer事件( $timeout , $interval ) 
- 執行 $digest() 或 $apply()

2. 依賴注入(DI)

讓我們可以不用自己實例化就能創建依賴對象的方法. 簡單的來說, 依賴是以注入的方式傳遞的。在Web應用中, Angular讓我們可以通過DI來創建像Controllers和Directives這樣的對象. 我們還可以創建自己的依賴對象, 當我們要實例化它們時, Angular能自動實現注入。

3. compile和link的區別:性能和能力

編譯的時候,compile轉換dom,碰到綁定監聽器的地方就先存着,有幾個存幾個,到最后匯總成一個link函數,一並執行,提升了性能。

function compile(tElement, tAttrs, transclude) { ... }tElement為編譯前的element function link(scope, iElement, iAttrs, controller) { ... } iElement為編譯后的element,已經與作用域關聯起來,所以可以數據綁定
 
        

如果指令只進行DOM的修改,不進行數據綁定,那么配置在compile函數中,如果指令要進行數據綁定,那么配置在link函數中。

4. $apply()和 $digest()的區別

安全性:$apply()可以接收一個參數作為function(),這個 function 會被包裝到一個 try … catch 塊中,所以一旦有異常發生,該異常會被 $exceptionHandler service 處理。

  • $apply會使ng進入 $digest cycle , 並從$rootScope開始遍歷(深度優先)檢查數據變更。
  • $digest僅會檢查該scope和它的子scope,當你確定當前操作僅影響它們時,用$digest可以稍微提升性能。

5.ng-if 跟 ng-show/hide 的區別有哪些?

第一點區別:ng-if 在后面表達式為 true 的時候才創建這個 dom 節點;ng-show 是初始時就創建了,用 display:block 和display:none 來控制顯示和不顯示。

第二點區別:ng-if 會(隱式地)產生新作用域,ng-switch 、 ng-include 等會動態創建一塊界面的也是如此。

這樣會導致,在 ng-if 中用基本變量綁定 ng-model,並在外層 div 中把此 model 綁定給另一個顯示區域,內層改變時,外層不會同步改變,因為此時已經是兩個變量了。

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

ng-show 不存在此問題,因為它不自帶一級作用域。

避免這類問題出現的辦法是,始終將頁面中的元素綁定到對象的屬性(data.x)而不是直接綁定到基本變量(x)上。

6.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM