摘要：綜上所述兩者是出于不同的目的被創(chuàng)建的，解決的也是不同的問(wèn)題。檢測(cè)模型變化的過(guò)程稱為循環(huán)。由指令注冊(cè)的事件處理函數(shù)執(zhí)行。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的屬性。模塊主要關(guān)系腳本加載問(wèn)題。

AngularJS面試題

jQuery

js函數(shù)庫(kù)
封裝簡(jiǎn)化dom操作

使用jquery的思想是：我擁有一個(gè)DOM元素并且想讓它去做某件事。也就是命令式編程思想。
angular
JS結(jié)構(gòu)化框架
主體不再是DOM, 而是頁(yè)面中的動(dòng)態(tài)數(shù)據(jù)
使用angular的思想是：我需要完成什么任務(wù)，然后接著設(shè)計(jì)你的應(yīng)用，最后再去設(shè)計(jì)你的視圖view層。也就是聲明式編程思想。

jQuery是一個(gè)非常優(yōu)秀的JS框架。其宗旨是寫更少的代碼，做更多的事情。
它是輕量級(jí)的JS庫(kù)（壓縮后不到30kb），這是其他js庫(kù)所不能及的；它還有出色的兼容性，能兼容CSS3，能兼容各種瀏覽器；能使用戶更方便的操作dom，進(jìn)行事件處理，實(shí)現(xiàn)動(dòng)畫效果和Ajax交互；jQuery還有個(gè)很大的優(yōu)勢(shì)是開源，發(fā)展好，文檔很齊全，各種應(yīng)用說(shuō)的很詳細(xì)，并且還有很多成熟的插件可供選擇。最主要的是使得html頁(yè)面行為層和結(jié)構(gòu)層分離，便于維護(hù)和調(diào)試。

優(yōu)點(diǎn)：

模板功能強(qiáng)大豐富，并且是聲明式的，自帶了豐富的Ag指令；

是一個(gè)比較完善的MVC框架，包括模板，數(shù)據(jù)雙向綁定，路由，模塊化，服務(wù)，過(guò)濾器等

自定義指令，比jQuery插件還靈活，但需要深入了解指令的特性

Ng模塊化引入了依賴注入，能很容易寫出可服用的代碼，敏捷開發(fā)比較方便。
缺點(diǎn)

驗(yàn)證功能比較薄弱

Ng-view只能有一個(gè)，不能嵌套多個(gè)視圖，然有 angular-ui/ui-router · GitHub 解決，但是貌似ui-router 對(duì)于URL的控制不是很靈活，必須是嵌套式的；

對(duì)于特別復(fù)雜的應(yīng)用場(chǎng)景，貌似性能有點(diǎn)問(wèn)題

Angular 太笨重了，沒有讓用戶選擇一個(gè)輕量級(jí)的版本

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

1、DOM不是第一優(yōu)先級(jí)的時(shí)候。
2、考慮到效率的問(wèn)題，在框架內(nèi)它就支持單元測(cè)試，簡(jiǎn)化了測(cè)試上的麻煩。另外，降低模塊間的耦合度也有利于程序員梳理項(xiàng)目邏輯，便于維護(hù)和調(diào)試。
3、考慮到聲明式語(yǔ)言的優(yōu)勢(shì)。
4、高度復(fù)雜對(duì)象模型的單頁(yè)面。適合CURD類型的應(yīng)用。

兩者是出于不同的目的被創(chuàng)建的，解決的也是不同的問(wèn)題。當(dāng)一個(gè)項(xiàng)目的重點(diǎn)是數(shù)據(jù)展示和執(zhí)行，而不是分析，此時(shí)可能AngularJS就會(huì)更勝一籌。對(duì)于框架的選擇，你要考慮到很多因素，需要整體的構(gòu)思。AngularJS總體上還是一個(gè)不錯(cuò)的選擇，可以提高程序員的效率，相對(duì)減少Web開發(fā)中的維護(hù)成本。

jQuery的一個(gè)常見問(wèn)題就是它是命令式編程，就意味著你要告訴計(jì)算機(jī)如何達(dá)成某項(xiàng)目的，其實(shí)你想要的就是程序運(yùn)行的結(jié)果。而聲明式編程則轉(zhuǎn)移了重點(diǎn)，它只是告訴機(jī)器你想要的結(jié)果，讓機(jī)器自己實(shí)現(xiàn)這個(gè)結(jié)果。javascript就是一種命令式語(yǔ)言，但HTML，和它指導(dǎo)的AngularJS就是聲明式的，只需要告訴計(jì)算機(jī)你需要的展現(xiàn)形式，至于細(xì)節(jié)就由機(jī)器處理了。這樣，完成一個(gè)任務(wù)的代碼就大幅縮減了，代碼質(zhì)量也更高了。

當(dāng)view中有數(shù)據(jù)變化時(shí)會(huì)更新到model，當(dāng)model中數(shù)據(jù)有變化時(shí)，view也會(huì)同步更新。

Ag通過(guò)不同指令注冊(cè)的DOM事件監(jiān)視器來(lái)將DOM樹的變化傳播給模型，事件監(jiān)視器的代碼通過(guò)修改$scope暴露的變量來(lái)更新模型。

Ag只會(huì)在被明確告知的情況下才會(huì)啟動(dòng)它的模型監(jiān)控機(jī)制。也就是執(zhí)行scope對(duì)象上的$apply方法。
檢測(cè)模型變化的過(guò)程稱為$digest循環(huán)。$digest從根作用域檢查，只有有一個(gè)監(jiān)視器的一個(gè)變化都能使$digest循環(huán)變臟，迫使Ag進(jìn)入又一輪循環(huán)。每一個(gè)被監(jiān)視的表達(dá)式在每個(gè)$digest循環(huán)中都會(huì)被運(yùn)算兩次。（因?yàn)閮蓚€(gè)模型值間可能存在一個(gè)依賴關(guān)系，一個(gè)模型變化時(shí)可能會(huì)讓另一個(gè)已被認(rèn)為穩(wěn)定的模型值也發(fā)生變化）

以input元素如何將模型變化傳播給DOM的例子說(shuō)明：
1.DOM中的input事件被觸發(fā)。瀏覽器進(jìn)入JS執(zhí)行環(huán)境。
2.由input指令注冊(cè)的DOM事件處理函數(shù)執(zhí)行。該處理函數(shù)會(huì)更新模型值，然后在作用域?qū)嵗险{(diào)用scope.$apply方法。
3.js執(zhí)行進(jìn)入ag世界，$digest循環(huán)啟動(dòng)。第一次$digest循環(huán)中發(fā)現(xiàn)有個(gè)監(jiān)視表達(dá)式是“臟”的，此時(shí)需要再來(lái)一次循環(huán)。
4.一旦檢查出一個(gè)模型變化，就會(huì)觸發(fā)一個(gè)$watch的回調(diào)函數(shù)。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的text屬性。
5.第二次$digest循環(huán)重新運(yùn)算了所有監(jiān)視表達(dá)式，但這次沒發(fā)現(xiàn)任何變化。Ag宣布該模型“穩(wěn)定”，然后退出$digest循環(huán)。
6.Js執(zhí)行上下文處理其他任何非Ag代碼。大多數(shù)沒有這類代碼，之后瀏覽器退出JS執(zhí)行環(huán)境。
7.UI線程切換到DOM渲染環(huán)境，瀏覽器重繪那個(gè)text屬性發(fā)生變化的DOM節(jié)點(diǎn)。
8.在重繪完成之后，瀏覽器回到守株待兔的狀態(tài)。

DOM事件

XHR相應(yīng)觸發(fā)回調(diào)

瀏覽器的地址變化

計(jì)時(shí)器觸發(fā)回調(diào)

AngularJS 是通過(guò)構(gòu)造函數(shù)的參數(shù)名字來(lái)推斷依賴服務(wù)名稱的。具體來(lái)說(shuō)：將函數(shù)體通過(guò) toString()轉(zhuǎn)換為一個(gè)字符串之后，通過(guò)正則表達(dá)式匹配來(lái)解析出參數(shù)的名稱，進(jìn)而找出依賴服務(wù)的名稱。
通過(guò)構(gòu)造函數(shù)的參數(shù)名字來(lái)推斷依賴服務(wù)名稱的，通過(guò) toString() 來(lái)找到這個(gè)定義的 function 對(duì)應(yīng)的字符串，然后用正則解析出其中的參數(shù)（依賴項(xiàng)），再去依賴映射中取到對(duì)應(yīng)的依賴，實(shí)例化之后傳入。
**

**
因?yàn)?AngularJS 的 injector 是假設(shè)函數(shù)的參數(shù)名就是依賴的名字，然后去查找依賴項(xiàng)，那如果按前面栗子中那樣注入依賴，代碼壓縮后（參數(shù)被重命名了），就無(wú)法查找到依賴項(xiàng)了。
所以，通常會(huì)使用下面兩種方式注入依賴（對(duì)依賴添加的順序有要求）。
數(shù)組風(fēng)格依賴注入
myApp.controller("myCtrl", ["$scope", "$http", function($scope, $http){

...

}])
缺點(diǎn)：重構(gòu)有點(diǎn)棘手。因?yàn)楹瘮?shù)參數(shù)，在函數(shù)定義時(shí)寫一遍，在數(shù)組中再寫一遍。把參數(shù)弄錯(cuò)了就是問(wèn)題。
顯式調(diào)用 $inject
myApp.controller("myCtrl", myCtrl);
function myCtrl = ($scope, $http){

...

}
myCtrl.$inject = ["$scope", "$http"];

異步模塊定義(AMD)，是由Require.js和類似的JS庫(kù)推行一種規(guī)范，其目標(biāo)是為異步加載的可復(fù)用JS模塊制定的一套通用規(guī)則。AMD模塊可以按需加載，并能實(shí)現(xiàn)各模塊之間的相互依賴。另外，AMD模塊定義還可以被離線構(gòu)建腳本用來(lái)合并特定應(yīng)用功能所需的所有模塊。
AMD模塊的功能：

異步加載腳本文件，這樣瀏覽器不會(huì)被阻塞，可以同時(shí)并行加載若干其他資源文件。

根據(jù)用戶使用應(yīng)用的場(chǎng)景，按需加載JS代碼。這點(diǎn)有效地消除了提前加載應(yīng)用程序代碼的需求。

用模塊定義來(lái)指定模塊之間的依賴關(guān)系，還可設(shè)定生產(chǎn)環(huán)境中打包所需的模塊。

Ag和AMD定義都使用了同一個(gè)單詞“module”，但是他們不一樣，具體如下：

ag模塊用于定義不同的JS類和對(duì)象在運(yùn)行時(shí)應(yīng)如何組合在一起。Ag模塊不會(huì)執(zhí)行任何腳本加載操作。相反，Ag期望在應(yīng)用啟動(dòng)之前所有的模塊已經(jīng)全部加載到瀏覽器中。

AMD模塊主要關(guān)系腳本加載問(wèn)題。AMD定義允許將應(yīng)用拆分成若干個(gè)更小的文件，然后在需要是僅一步加載你所需的那部分文件。

https://wenku.baidu.com/view/...
使用Ag2的原因

現(xiàn)在出到Ag4了
http://www.jb51.net/article/1...

主要分為編譯、鏈接、注冊(cè)監(jiān)視、模型變化、觀察、摧毀6個(gè)階段。
編譯：ag會(huì)遍歷瀏覽器提供的dom樹，嘗試參照已注冊(cè)的指令集來(lái)匹配每個(gè)元素、屬性、注釋和css類。每當(dāng)匹配一個(gè)指令時(shí)，ag就會(huì)調(diào)用該指令的編譯函數(shù)，該函數(shù)返回一個(gè)連接函數(shù)，ag會(huì)收集所有的連接函數(shù)。
鏈接：一旦所有指令被編譯完成，ag就會(huì)創(chuàng)建作用域，然后通過(guò)調(diào)用每個(gè)指令對(duì)應(yīng)的鏈接函數(shù)將指令和作用域連接起來(lái)。同時(shí)注冊(cè)監(jiān)視：作用域一旦生成，指令就會(huì)在它身上注冊(cè)一個(gè)監(jiān)視，就是我們平時(shí)用到的$scope.$watch()，顧名思義監(jiān)視數(shù)據(jù)有沒有變化
模型變化：這個(gè)時(shí)候一旦模型發(fā)生了變化，會(huì)執(zhí)行用戶自己定義的回調(diào)函數(shù)。其中關(guān)鍵的是，在模型發(fā)生變化時(shí)，如何從瀏覽器的js環(huán)境進(jìn)入到angular的環(huán)境中操作在ag模型上的數(shù)據(jù)，此時(shí)，ag會(huì)調(diào)用一個(gè)內(nèi)置指令$scope.$apply，這樣就能進(jìn)去ag的環(huán)境。
觀察：在這個(gè)階段會(huì)啟動(dòng)臟檢測(cè)機(jī)制，先檢測(cè)根scope，然后傳播到所有的子作用域上，這個(gè)時(shí)候檢測(cè)到變化就會(huì)執(zhí)行監(jiān)聽函數(shù)$watch的回調(diào)函數(shù)。
摧毀：當(dāng)我們不需要一個(gè)作用域，需要將它移除掉。原則是誰(shuí)創(chuàng)建的誰(shuí)摧毀，使用的方法是$scope.$destroy()。

---------持續(xù)更新中--------------