摘要:雖然只有個問題,但是覆蓋了開發中的各個方面,有基本的知識點,也有在開發過程中遇見的問題,同時也有較為開放性的問題去辨別面試者的基礎水準和項目經驗如果自己一年前面試肯定是喜劇到悲劇的轉變。
雖然只有10個問題,但是覆蓋了angular開發中的各個方面,有基本的知識點,也有在開發過程中遇見的問題,同時也有較為開放性的問題去辨別面試者的基礎水準和項目經驗如果自己一年前面試肯定是喜劇到悲劇的轉變?。(PS:答案僅供參考~)。
1. ng-show/ng-hide 與 ng-if的區別?我們都知道ng-show/ng-hide實際上是通過display來進行隱藏和顯示的。而ng-if實際上控制dom節點的增刪除來實現的。因此如果我們是根據不同的條件來進行dom節點的加載的話,那么ng-if的性能好過ng-show.
2.解釋下什么是$rootScrope以及和$scope的區別?通俗的說$rootScrope 頁面所有$scope的父親。
我們來看下如何產生$rootScope和$scope吧。
step1:Angular解析ng-app然后在內存中創建$rootScope。
step2:angular回繼續解析,找到{{}}表達式,并解析成變量。
step3:接著會解析帶有ng-controller的div然后指向到某個controller函數。這個時候在這個controller函數變成一個$scope對象實例。
3. 表達式 {{yourModel}}是如何工作的?它依賴于 $interpolation服務,在初始化頁面html后,它會找到這些表達式,并且進行標記,于是每遇見一個{{}},則會設置一個$watch。而$interpolation會返回一個帶有上下文參數的函數,最后該函數執行,則算是表達式$parse到那個作用域上。
4. Angular中的digest周期是什么?每個digest周期中,angular總會對比scope上model的值,一般digest周期都是自動觸發的,我們也可以使用$apply進行手動觸發。更深層次的研究,可以移步The Digest Loop and apply。
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: "", controller: function($scope) { $scope.testClick = function() { $scope.clickHandle(); } } }; });
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
參考11 Essential AngularJS Interview Questions
11 Tips to Improve AngularJS Performance
AngularJS: My solution to the ng-repeat performance problem
29 AngularJS Interview Questions – Can You Answer Them All?
The Digest Loop and $apply
What is the difference between "@" and "=" in directive scope
Angular compile
本文同步博客:http://www.jackpu.com/shi-ge-jing-chang-yu-jian-de-angular-jsmian-shi-wen-ti/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79786.html
摘要:是指可能導致程序終止的非常嚴重的時間。具有最高的級別,旨在關閉中的日志功能。因此為每一個消息選擇一個合適的日志級別是非常重要的。日志的個小建議將日志訪日代碼塊它能顯著的減少因為字符串拼接而帶來的性能的影響。 前言 首先,這篇文章沒有進行任何的日志功能的詳細介紹,而是對日志提出了幾種最佳實踐。適合對日志記錄有所了解的同學閱讀。下面是正文: JAVA日志管理既是一門科學,又是一門藝術。科學...
摘要:春招結果五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品會電商前端研發部大數據與威脅分析事業部京東精銳暑假實習生的騰訊的是早上打過來的。 春招結果 五月份了,春招已經接近尾聲,因為到了周五晚上剛好有空,所以簡單地記錄一下自己的春招過程。我的春招從二月初一直持續到四月底,截止今天,已經斬獲唯品...
摘要:對于程序員來說,更意味著代碼的組織,工作成員之間的協作方式。我常犯的一個錯誤是直接在或分支上直接,而團隊是不允許這樣做的。 先介紹下背景,博主由運營轉行前端,入職一個月,完成了一個相對較大的模塊。由于基礎相對薄弱,犯下了不少錯誤,故想記錄下來警醒自己和分享各位。 前端技術棧是 ES6 + backbone + react + antdUI,后端使用的 Ruby on Rails。 1....
摘要:對于程序員來說,更意味著代碼的組織,工作成員之間的協作方式。我常犯的一個錯誤是直接在或分支上直接,而團隊是不允許這樣做的。 先介紹下背景,博主由運營轉行前端,入職一個月,完成了一個相對較大的模塊。由于基礎相對薄弱,犯下了不少錯誤,故想記錄下來警醒自己和分享各位。 前端技術棧是 ES6 + backbone + react + antdUI,后端使用的 Ruby on Rails。 1....
閱讀 3619·2021-09-27 14:02
閱讀 1770·2019-08-30 15:56
閱讀 1737·2019-08-29 18:44
閱讀 3269·2019-08-29 17:21
閱讀 477·2019-08-26 17:15
閱讀 1169·2019-08-26 13:57
閱讀 1234·2019-08-26 13:56
閱讀 2874·2019-08-26 11:30