ANGULAR有哪些優缺點?

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【ANGULAR有哪些優缺點?】

 

你們好，我是IT修真院武漢分院學員曾健，一枚正直純潔善良的WEB前端程序員。

今天給你們分享一下，修真院官網JS任務10，深度思考中的知識點——ANGULAR有哪些優缺點?

1.背景介紹

Angular.js是google開發者設計和開發的一套前端開發框架，幫助你簡化前端開發的負擔。

AngularJS 經過新的屬性和表達式擴展了 HTML。

AngularJS 能夠構建一個單一頁面應用程序

那麼AngularJS有哪些優勢與缺點呢？

2.知識剖析

AngularJS的優勢與缺點：

AngularJS的優勢：

1.良好的應用程序結構：

一般狀況下，咱們編寫 JavaScript 沒有明確的結構。雖然在編寫小應用程序的時候沒有問題，但這顯然是不適合於大規模的應用程序。

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

AngularJS 是一個 MVW 框架，其中W表明能夠用於任何項目。你能夠組織你的代碼模塊，它可顯著提升應用程序的可測試性和可維護性。數據、業務邏輯、視圖的分離。

2.雙向數據綁定

數據綁定確定是 AngularJS 最佳功能之一。

你能夠聲明綁定的模型到 HTML 元素。當模型發生變化時，視圖會自動更新，反之亦然。

這能夠減小大量的傳統樣板代碼，保持模型和視圖同步。

3.指令

自定義Directive，比jQuery插件還靈活，可是須要深刻了解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，咱們能夠經過閱讀源代碼來找到某些咱們須要的東西，如：在directive使用 $parse；

4.HTML 模板

AngularJS 使用 HTML 模板，這使事情變得簡單，並容許設計人員和開發人員同時工做。

設計人員能夠按照一般的方式建立用戶界面，而開發人員可使用聲明性綁定語法很容易配合不一樣的UI組件的數據模型。

5.依賴注入

ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助，咱們的項目從上線到目前，UI變化很大，在摸索中迭代產品，可是js的代碼基本上不多改動。

AngularJS的缺點:

1.性能

雙向數據綁定是一把雙刃劍。隨着組件增長，項目愈來愈複雜，雙向數據綁定帶來性能問題。

雙向數據綁定是如何影響性能的？在JavaScript（ES5）中，並無實現當變量或對象改變時發出通知的功能，Angular的實現方法被叫作「Dirty-checking（髒檢查機制）」，經過跟蹤數據的改變再動態更新用戶界面（UI）。 在Angular的做用域中任何操做的執行都會引起Dirty-checking，隨着綁定數量的增長性能就會越低。

1. Angular 2.0推翻重作使得目前不宜採用此框架

Angular 1.x版本實際上是個比較舊的東西了，如今看來有些理念過期了，好比依賴注入、本身獨特的模塊化，這些東西其實在ES6下已經很好地被解決了。 Angular的2.0幾乎是一個推翻重作的框架，估計不會有1.X的upgrade方案。因此若是如今新開始的項目採用Angular的話，會是一個很尷尬的時機。一樣，如此大的改動彷佛也反面印證了1.X並非那麼好。

3.學習成本高

使用Angular須要學習大量的概念，包括但不限於： 

○ 模塊

○ 控制器

○ 指令

○ 做用域

○ 模板

○ 鏈式函數

○ 過濾器

○ 依賴注入

4.不適合類型開發：

(1：內容網站，須要SEO的。(SEO目前也有了prerender解決方案) https//prerender.io

(2：交互頻繁的，如遊戲之類交互體驗網站。

(3，太過於簡單的頁面。

Angular更適合於CRUD的管理系統開發。

3.常見問題

Angular2 相比 Vue 有什麼優點？

4.解決方案

Angular2相對於Vue的優點在Vue2.0以後已經削弱不少了。好比SSR（Vue2已經原生支持）和全棧式框架（官方推薦Vuex+Vue-Router），native端也有阿里巴巴的weex。可是Angular2在API設計的完整度和覆蓋度上仍是Vue所不能及的，主要有這麼幾點:

1. Angular2原生Form支持： Angular2原生的Form模塊功能至關強大。除了雙向綁定之類的基本功能，還能經過programatic API 控制dom元素的表單行爲。也有成型API提供自定義validator。這一點Vue只有v-model和第三方庫。對於後臺之類的重表單應用，仍是Ng2有優點。
2. 依賴注入不管你喜不喜歡DI，這就是Angular2的強大功能之一。有DI能夠在不改變代碼結構的狀況下完成功能替換。（如，在desktop和mobile有不一樣功能，能夠經過注入不一樣service實現，而共用相同的template和directive）。Vue則須要程序員本身規劃代碼組織，用來支持共享組件。DI也能夠用於相似module local state的功能。好比，一個視頻播放控件有幾個子組件完成，子組件須要分享一個狀態。這一點Angular2有原生的service injection pattern。而Vue則沒有官方推薦。
3. 對標準向後兼容Angular2在一些細節上對標準有更好的支持。好比 list differ 算法中 Angular2 能夠支持實現了Symbol.iterator的對象，而Vue只能支持Array。對Observable和Promise，Angular2在應用的各個地方，甚至模板級別都有支持(async pipe)。而Vue須要vue-rx等第三方庫支持。Angular2的組件有shadow dom的實現能夠選擇，而Vue目前尚未。
4. 測試Angular2一開始就設計好了如何對組件進行測試，而Vue組件雖然也很好寫測試，可是沒有官方推薦的惟一標準（固然，對視圖是否須要測試還有待探討）。除此之外，Angular2還有一些小功能好比檢驗模板的類型安全（即，模板裏能在編譯器保證沒有引用model未定義的變量），不過AoT自己彷佛尚未穩定，因此不能算優點。對TS的支持也是Angular好，固然前提是你喜歡TS。整體而言，就是Angular2裏你能想到的都有了，你沒想到的它也有了。框架的全面性是難以撼動的。（固然，爲此也付出了至關的代價）。

5.編碼實戰

6.擴展思考

面對衆多的框架，咱們該如何進行選擇？

遇到ng1的時候，我處處宣揚jQuery太落後了，咱們有jqLite就是爲了幹掉jQuery。

遇到React的時候，我處處宣揚ng1太落後了，狂黑ng1的性能和圍繞$scope的一些設計缺陷。

遇到Vue的時候，我處處宣揚React太死板了，不容許任何的魔法，而Vue有恰到好處，精心設計的魔法。

遇到Elm的時候，我處處宣揚React的Redux是抄襲者，Vue過於動態，狂黑由於沒有tagged union+pattern match，redux和vuex用起來都很醜。

直到有一天我一我的負責了一個巨型的項目，既有茫茫多的CURD，又有狀態複雜的特殊界面。

這個項目前端是用react + nuclear.js(那時尚未redux)寫的。

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

在寫狀態複雜的界面時讚歎React+Nuclear.js組合純函數+外置state簡直是神器，避免了無數個bug。

在代碼堆成山的時候會想若是我用的是強類型的Elm是否是能夠避免90%的低級錯誤？

完成這個項目以後，我不再會去捧或黑了。設計是優雅仍是愚蠢，其實取決於使用場景。 你用的每一個框架都有秒殺別人的地方，也都會有用起來很傻的情況。

不談具體項目講哪一個有優點純屬耍流氓。

7.參考文獻

http://blog.csdn.net/u0121255...

https://www.zhihu.com/questio...

https://www.zhihu.com/questio...

8.更多討論

1.Angular1存在哪些問題？

綁定， 一不當心， 綁太多了，能卡死的頁面半天出不來

2.angular1和angular2有什麼不一樣？

1.0.X升級到1.2.X，貌似有比較大的調整，沒有完美兼容低版本，升級以後可能會致使一個兼容性的BUG

3.angular對seo友好嗎？

對seo不是特別友好