總結(jié)十個Angular.js由淺入深的面試問題

一支示、ng-show/ng-hide 與 ng-if的區(qū)別?
我們都知道ng-show/ng-hide
實際上是通過display
來進行隱藏和顯示的。而ng-if
實際上控制dom
節(jié)點的增刪除來實現(xiàn)的主之。因此如果我們是根據(jù)不同的條件來進行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ù)解析所森,找到{{}}
表達式,并解析成變量夯接。
step3:接著會解析帶有ng-controller
的div然后指向到某個controller
函數(shù)焕济。這個時候在這個controller
函數(shù)變成一個$scope
對象實例。
三盔几、表達式 {{yourModel}}是如何工作的晴弃?
它依賴于 $interpolation
服務(wù),在初始化頁面html后问欠,它會找到這些表達式肝匆,并且進行標記,于是每遇見一個{{}}
顺献,則會設(shè)置一個$watch
。而$interpolation
會返回一個帶有上下文參數(shù)的函數(shù)枯怖,最后該函數(shù)執(zhí)行注整,則算是表達式$parse
到那個作用域上。
四度硝、Angular中的digest周期是什么肿轨?
每個digest
周期中,angular總會對比scope
上model
的值蕊程,一般digest
周期都是自動觸發(fā)的椒袍,我們也可以使用$apply
進行手動觸發(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匹配標簽
C匹配class
M 匹配注釋
當然你可以設(shè)置多個值比如AEC
,進行多個匹配优俘。
在scope
中,@,=,&在進行值綁定時分別表示
@獲取一個設(shè)置的字符串掀序,它可以自己設(shè)置的也可以使用{{yourModel}}
進行綁定的;
= 雙向綁定帆焕,綁定scope
上的一些屬性;
& 用于執(zhí)行父級scope
上的一些表達式不恭,常見我們設(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>
< 進行單向綁定叶雹。
七财饥、 列出至少三種實現(xiàn)不同模塊之間通信方式?
1折晦、Service
2佑力、events,指定綁定的事件
3、使用 $rootScope
4筋遭、controller之間直接使用$parent, $$childHead等
5打颤、directive 指定屬性進行數(shù)據(jù)綁定
八、有哪些措施可以改善Angular 性能
官方提倡的漓滔,關(guān)閉debug,$compileProvider

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

使用一次綁定表達式即{{::yourModel}}

減少watcher數(shù)量
在無限滾動加載中避免使用ng-repeat

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

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

九、你認為在Angular中使用jQuery好么响驴?
這是一個開放性的問題透且,盡管網(wǎng)上會有很多這樣的爭論,但是普遍還是認為這并不是一個特別好的嘗試豁鲤。其實當我們學習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可以讓它在解決問題嬉荆,比如使用插件上有更多的選擇,當然這是通過影響代碼組織來提高工作效率酷含,隨著對于angular理解的深入鄙早,在重構(gòu)時會逐漸摒棄掉當初引入jquery時的一些代碼。(??Po主就是這樣的人第美,希望不要被嘲笑蝶锋,業(yè)務(wù)卻是趕著走)
所以我覺得兩種框架說完全不能一起用肯定是錯的,但是我們還是應(yīng)該盡力去遵循angular的設(shè)計什往。
十扳缕、如何進行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);
});
});

});

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市躯舔,隨后出現(xiàn)的幾起案子驴剔,更是在濱河造成了極大的恐慌,老刑警劉巖粥庄,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件丧失,死亡現(xiàn)場離奇詭異,居然都是意外死亡惜互,警方通過查閱死者的電腦和手機布讹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來训堆,“玉大人描验,你說我怎么就攤上這事】佑悖” “怎么了膘流?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長鲁沥。 經(jīng)常有香客問我呼股,道長,這世上最難降的妖魔是什么画恰? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任彭谁,我火速辦了婚禮,結(jié)果婚禮上阐枣,老公的妹妹穿的比我還像新娘马靠。我一直安慰自己,他們只是感情好蔼两,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著逞度,像睡著了一般额划。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上档泽,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天俊戳,我揣著相機與錄音,去河邊找鬼馆匿。 笑死抑胎,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的渐北。 我是一名探鬼主播阿逃,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了恃锉?” 一聲冷哼從身側(cè)響起搀菩,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎破托,沒想到半個月后肪跋,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡土砂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年州既,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片萝映。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡吴叶,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锌俱,到底是詐尸還是另有隱情晤郑,我是刑警寧澤,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布贸宏,位于F島的核電站造寝,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏吭练。R本人自食惡果不足惜诫龙,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鲫咽。 院中可真熱鬧签赃,春花似錦、人聲如沸分尸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽箩绍。三九已至孔庭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間材蛛,已是汗流浹背圆到。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卑吭,地道東北人芽淡。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像豆赏,于是被迫代替她去往敵國和親挣菲。 傳聞我的和親對象是個殘疾皇子富稻,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容