大家好，我是IT修真院鄭州分院第一期的學(xué)員胡嘉杰，一枚正直純潔善良的WEB前端程序員。

今天給大家分享一下，修真院官網(wǎng)JS任務(wù)10，深度思考中的知識(shí)點(diǎn)——ANGULAR有哪些優(yōu)缺點(diǎn)?

1.背景介紹

Angular.js是google開發(fā)者設(shè)計(jì)和開發(fā)的一套前端開發(fā)框架，幫助你簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。

AngularJS 通過新的屬性和表達(dá)式擴(kuò)展了 HTML。

AngularJS 可以構(gòu)建一個(gè)單一頁面應(yīng)用程序

那么AngularJS有哪些優(yōu)點(diǎn)與缺點(diǎn)呢？

2.知識(shí)剖析

AngularJS的優(yōu)點(diǎn)與缺點(diǎn)：

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

1.良好的應(yīng)用程序結(jié)構(gòu)：

通常情況下，我們編寫 JavaScript 沒有明確的結(jié)構(gòu)。雖然在編寫小應(yīng)用程序的時(shí)候沒有問題，但這顯然是不適合于大規(guī)模的應(yīng)用程序。

使用 AngularJS，您可以通過MVC（模型 - 視圖 - 控制器）或MVVM （模型 - 視圖 - 視圖模型）模式來組織源代碼。

AngularJS 是一個(gè) MVW 框架，其中W代表可以用于任何項(xiàng)目。你可以組織你的代碼模塊，它可顯著提高應(yīng)用程序的可測(cè)試性和可維護(hù)性。數(shù)據(jù)、業(yè)務(wù)邏輯、視圖的分離。

2.雙向數(shù)據(jù)綁定

數(shù)據(jù)綁定肯定是 AngularJS 最佳功能之一。

你可以聲明綁定的模型到 HTML 元素。當(dāng)模型發(fā)生變化時(shí)，視圖會(huì)自動(dòng)更新，反之亦然。

這可以減少大量的傳統(tǒng)樣板代碼，保持模型和視圖同步。

3.指令

自定義Directive，比jQuery插件還靈活，但是需要深入了解Directive的一些特性，簡(jiǎn)單的封裝容易，復(fù)雜一點(diǎn)官方?jīng)]有提供詳細(xì)的介紹文檔，我們可以通過閱讀源代碼來找到某些我們需要的東西，如：在directive使用 $parse；

4.HTML 模板

AngularJS 使用 HTML 模板，這使事情變得簡(jiǎn)單，并允許設(shè)計(jì)人員和開發(fā)人員同時(shí)工作。

設(shè)計(jì)人員可以按照通常的方式創(chuàng)建用戶界面，而開發(fā)人員可以使用聲明性綁定語法很容易配合不同的UI組件的數(shù)據(jù)模型。

5.依賴注入

ng模塊化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可復(fù)用的代碼，對(duì)于敏捷開發(fā)的團(tuán)隊(duì)來說非常有幫助，我們的項(xiàng)目從上線到目前，UI變化很大，在摸索中迭代產(chǎn)品，但是js的代碼基本上很少改動(dòng)。

AngularJS的缺點(diǎn):

1.性能

雙向數(shù)據(jù)綁定是一把雙刃劍。隨著組件增加，項(xiàng)目越來越復(fù)雜，雙向數(shù)據(jù)綁定帶來性能問題。

雙向數(shù)據(jù)綁定是如何影響性能的？在JavaScript（ES5）中，并沒有實(shí)現(xiàn)當(dāng)變量或?qū)ο蟾淖儠r(shí)發(fā)出通知的功能，Angular的實(shí)現(xiàn)方法被叫做“Dirty-checking（臟檢查機(jī)制）”，通過跟蹤數(shù)據(jù)的改變?cè)賱?dòng)態(tài)更新用戶界面（UI）。 在Angular的作用域中任何操作的執(zhí)行都會(huì)引發(fā)Dirty-checking，隨著綁定數(shù)量的增加性能就會(huì)越低。

2. Angular 2.0推翻重做使得目前不宜采用此框架

Angular 1.x版本其實(shí)是個(gè)比較舊的東西了，現(xiàn)在看來有些理念過時(shí)了，比如依賴注入、自己獨(dú)特的模塊化，這些東西其實(shí)在ES6下已經(jīng)很好地被解決了。 Angular的2.0幾乎是一個(gè)推翻重做的框架，估計(jì)不會(huì)有1.X的upgrade方案。所以如果現(xiàn)在新開始的項(xiàng)目采用Angular的話，會(huì)是一個(gè)很尷尬的時(shí)機(jī)。同樣，如此大的改動(dòng)似乎也反面印證了1.X并不是那么好。

3.學(xué)習(xí)成本高

使用Angular需要學(xué)習(xí)大量的概念，包括但不限于：?

○ 模塊

○ 控制器

○ 指令

○ 作用域

○ 模板

○ 鏈?zhǔn)胶瘮?shù)

○ 過濾器

○ 依賴注入

4.不適合類型開發(fā)：

(1：內(nèi)容網(wǎng)站，需要SEO的。(SEO目前也有了prerender解決方案) https//prerender.io

(2：交互頻繁的，如游戲之類交互體驗(yàn)網(wǎng)站。

(3，太過于簡(jiǎn)單的頁面。

Angular更適合于CRUD的管理系統(tǒng)開發(fā)。

3.常見問題

Angular2 相比 Vue 有什么優(yōu)勢(shì)？

4.解決方案

Angular2相對(duì)于Vue的優(yōu)勢(shì)在Vue2.0之后已經(jīng)削弱很多了。比如SSR（Vue2已經(jīng)原生支持）和全棧式框架（官方推薦Vuex+Vue-Router），native端也有阿里巴巴的weex。但是Angular2在API設(shè)計(jì)的完整度和覆蓋度上還是Vue所不能及的，主要有這么幾點(diǎn):

1. Angular2原生Form支持： Angular2原生的Form模塊功能相當(dāng)強(qiáng)大。除了雙向綁定之類的基本功能，還能通過programatic API 控制dom元素的表單行為。也有成型API提供自定義validator。這一點(diǎn)Vue只有v-model和第三方庫。對(duì)于后臺(tái)之類的重表單應(yīng)用，還是Ng2有優(yōu)勢(shì)。

2. 依賴注入無論你喜不喜歡DI，這就是Angular2的強(qiáng)大功能之一。有DI可以在不改變代碼結(jié)構(gòu)的情況下完成功能替換。（如，在desktop和mobile有不同功能，可以通過注入不同service實(shí)現(xiàn)，而共用相同的template和directive）。Vue則需要程序員自己規(guī)劃代碼組織，用來支持共享組件。DI也可以用于類似module local state的功能。比如，一個(gè)視頻播放控件有幾個(gè)子組件完成，子組件需要分享一個(gè)狀態(tài)。這一點(diǎn)Angular2有原生的service injection pattern。而Vue則沒有官方推薦。

3. 對(duì)標(biāo)準(zhǔn)向后兼容Angular2在一些細(xì)節(jié)上對(duì)標(biāo)準(zhǔn)有更好的支持。比如 list differ 算法中 Angular2 可以支持實(shí)現(xiàn)了Symbol.iterator的對(duì)象，而Vue只能支持Array。對(duì)Observable和Promise，Angular2在應(yīng)用的各個(gè)地方，甚至模板級(jí)別都有支持(async pipe)。而Vue需要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實(shí)現(xiàn)可以選擇，而Vue目前還沒有。

4. 測(cè)試Angular2一開始就設(shè)計(jì)好了如何對(duì)組件進(jìn)行測(cè)試，而Vue組件雖然也很好寫測(cè)試，但是沒有官方推薦的唯一標(biāo)準(zhǔn)（當(dāng)然，對(duì)視圖是否需要測(cè)試還有待探討）。除此以外，Angular2還有一些小功能比如檢驗(yàn)?zāi)０宓念愋桶踩?，模板里能在編譯器保證沒有引用model未定義的變量），不過AoT本身似乎還沒有穩(wěn)定，所以不能算優(yōu)勢(shì)。對(duì)TS的支持也是Angular好，當(dāng)然前提是你喜歡TS?？傮w而言，就是Angular2里你能想到的都有了，你沒想到的它也有了。框架的全面性是難以撼動(dòng)的。（當(dāng)然，為此也付出了相當(dāng)?shù)拇鷥r(jià)）。

5.編碼實(shí)戰(zhàn)

6.擴(kuò)展思考

面對(duì)眾多的框架，我們?cè)撊绾芜M(jìn)行選擇？

遇到ng1的時(shí)候，我到處宣揚(yáng)jQuery太落后了，我們有jqLite就是為了干掉jQuery。

遇到React的時(shí)候，我到處宣揚(yáng)ng1太落后了，狂黑ng1的性能和圍繞$scope的一些設(shè)計(jì)缺陷。

遇到Vue的時(shí)候，我到處宣揚(yáng)React太死板了，不允許任何的魔法，而Vue有恰到好處，精心設(shè)計(jì)的魔法。

遇到Elm的時(shí)候，我到處宣揚(yáng)React的Redux是抄襲者，Vue過于動(dòng)態(tài)，狂黑因?yàn)闆]有tagged union+pattern match，redux和vuex用起來都很丑。

直到有一天我一個(gè)人負(fù)責(zé)了一個(gè)巨型的項(xiàng)目，既有茫茫多的CURD，又有狀態(tài)復(fù)雜的特殊界面。

這個(gè)項(xiàng)目前端是用react + nuclear.js(那時(shí)還沒有redux)寫的。

在寫CURD時(shí)懷念雙向綁定，寫onChange/value寫的想砸鍵盤。

在寫狀態(tài)復(fù)雜的界面時(shí)贊嘆React+Nuclear.js組合純函數(shù)+外置state簡(jiǎn)直是神器，避免了無數(shù)個(gè)bug。

在代碼堆成山的時(shí)候會(huì)想如果我用的是強(qiáng)類型的Elm是不是可以避免90%的低級(jí)錯(cuò)誤？

完成這個(gè)項(xiàng)目之后，我再也不會(huì)去捧或黑了。設(shè)計(jì)是優(yōu)雅還是愚蠢，其實(shí)取決于使用場(chǎng)景。 你用的每個(gè)框架都有秒殺別人的地方，也都會(huì)有用起來很傻的狀況。

不談具體項(xiàng)目講哪個(gè)有優(yōu)勢(shì)純屬耍流氓。

7.參考文獻(xiàn)

http://blog.csdn.net/u012125579/article/details/52744093

https://www.zhihu.com/question/40975678

https://www.zhihu.com/question/22284218

8.更多討論

Angular1存在哪些問題？

------------------------------------------------------------------------------------------------------------------------

技能樹.IT修真院

“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始，找個(gè)師兄，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷?！?。

這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學(xué)習(xí)路線，學(xué)習(xí)透明化，成長(zhǎng)可見化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵砼c我一起學(xué)習(xí)吧~

我的邀請(qǐng)碼：64290793，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/64290793