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

AngularJS面試題

jQuery

js函數(shù)庫
封裝簡化dom操作

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

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

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

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

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

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

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

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

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

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

Angular 太笨重了，沒有讓用戶選擇一個輕量級的版本

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

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

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

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

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

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

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

以input元素如何將模型變化傳播給DOM的例子說明：
1.DOM中的input事件被觸發(fā)。瀏覽器進(jìn)入JS執(zhí)行環(huán)境。
2.由input指令注冊的DOM事件處理函數(shù)執(zhí)行。該處理函數(shù)會更新模型值，然后在作用域?qū)嵗险{(diào)用scope.$apply方法。
3.js執(zhí)行進(jìn)入ag世界，$digest循環(huán)啟動。第一次$digest循環(huán)中發(fā)現(xiàn)有個監(jiān)視表達(dá)式是“臟”的，此時需要再來一次循環(huán)。
4.一旦檢查出一個模型變化，就會觸發(fā)一個$watch的回調(diào)函數(shù)。該回調(diào)函數(shù)會更新插值表達(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)境，瀏覽器重繪那個text屬性發(fā)生變化的DOM節(jié)點(diǎn)。
8.在重繪完成之后，瀏覽器回到守株待兔的狀態(tài)。

DOM事件

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

瀏覽器的地址變化

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

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

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

...

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

...

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

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

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

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

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

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

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

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

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

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

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

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