angular有哪些優缺點?

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

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

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

【angular有哪些優缺點?  】

目錄

1.背景介紹

2.知識剖析

3.常見問題

4.解決方案

5.編碼實戰

6.擴展思考

7.參考文獻

8.更多討論

 1.背景介紹

  1.1 AngularJS由來？

AngularJS是由Google建立的一種JS框架，使用它能夠擴展應用程序中的HTML詞彙， 從而在web應用程序中使用HTML聲明動態內容。 AngularJS可讓你擴展HTML的語法，以便清晰、簡潔地表示應用程序中的組件， 並容許將標準的HTML做爲你的模板語言，AngularJS能夠經過雙向數據綁定自動從擁有JavaScript對 象（模型）的UI（視圖）中同步數據。

 2.知識剖析

 

Angularjs-優勢

         1.雙向數據綁定,數據綁定多是AngularJS最酷最實用的特性。它可以幫助你避免書寫大量的初始代碼從而節約開發時間。一個典型的web應用可能包含了80%的代碼用來處理，查詢和監聽DOM。數據綁定是的代碼更少，你能夠專一於你的應用。

       2.代碼模塊化，每一個模塊的代碼獨立擁有本身的做用域，model，controller等。

       3.強大的directive能夠將不少功能封裝成HTML的tag,屬性或者註釋等，這大大美化了HTML的結構，加強了可閱讀性。

       4.依賴注入，將這種後端語言的設計模式賦予前端代碼，這意味着前端的代碼能夠提升重用性和靈活性，將來的模式可能將大量操做放在客戶端，服務端只提供數據來源和其餘客戶端沒法完成的操做

Angularjs-缺點

       1.驗證功能錯誤信息顯示比較薄弱，須要寫不少模板標籤

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

       3.ng提倡在控制器裏面不要有操做DOM的代碼，對於一些jQuery 插件的使用，若是想不破壞代碼的整潔性，須要寫一些directive去封裝插件，可是如今有不少插件的版本已經支持Angular了，如：jQuery File Upload Demo</p>

       4.AngularJS 太笨重了，沒有讓用戶選擇一個輕量級的版本，固然1.2.X後，Angular也在作一些更改，好比把route，animate等模塊獨立出去，讓用戶本身去選擇。

      

 3.常見問題

    Angularjs適用於作什麼樣的網站 

4.解決方案

1.Web應用頁面是很是適合AngularJS使用的，一樣不須要SEO，一樣能夠多方模塊化加載，並且常常須要頁面上的調整，這樣就可以發揮AngularJS的優點了。

2.AngularJS主要考慮的是構建CRUD（增刪改查）應用。幸運的是，大多數的WEB應用都是CRUD應用。

5.編碼實戰

6.擴展思考

  1.angularjs和vue的區別:

    一、vueJS簡單易學,而angularJS的上手較高；

    二、vue專一於View層，主打的是快速便捷，而angularJS功能則比較全面，固然體量也較大，相對沒有vue那麼便捷；

    三、angularJS的指令都是ng-xxx，而vueJS的指令都是v-xxx；

    四、angularJS的全部指令和方法都是綁定在$scope上的，而vueJS是new出來一個實例，

    全部的方法和指令都在這個實例上，一個頁面上能夠有多個vue實例，可是angularJS的對象只能有一個；

    五、angularJS是由google開發和維護的，vueJS是由我的維護的；

    六、vueJS通常用於移動端的開發，而angularJS通常應用於大型的項目

2.React的優勢

1.React偉大之處就在於，提出了Virtual Dom這種新穎的思路，而且這種思路衍生出了React Native，有可能會統一Web/Native開發。在性能方面，因爲運用了Virtual Dom技術，Reactjs只在調用setState的時候會更新dom，並且仍是先更新Virtual Dom，而後和實際Dom比較，最後再更新實際Dom。這個過程比起Angularjs的bind方式來講，一是更新dom的次數少，二是更新dom的內容少，速度確定快ReactJS更關注UI的組件化，和數據的單向更新，提出了FLUX架構的新概念，如今React能夠直接用Js ES6語法了，而後經過webpack編譯成瀏覽器兼容的ES5，開發效率上有些優點. 

2.React Native生成的App不是運行在WebView上，而是系統原生的UI，React經過jsx生成系統原生的UI，iOS和Android的React UI組件仍是比較類似的，大量代碼能夠複用維護UI的狀態,Angular 裏面使用的是 $scope，在 React 裏面使用的是 this.setState。 而 React 的好處在於，它更簡單直觀。全部的狀態改變都只有惟一一個入口 this.setState()，Angular 就比較複雜，不知道背後使用了哪些黑魔法。同構的JavaScript 

3.單頁面JS應用程序的最大缺陷在於對搜索引擎的索引有很大限制。React對此有了解決方案。 

React能夠在服務器上預渲染應用再發送到客戶端。它能夠從預渲染的靜態內容中恢復同樣的記錄到動態應用程序中。 

由於搜索引擎的爬蟲程序依賴的是服務端響應而不是JavaScript的執行，預渲染你的應用有助於搜索引擎優化

3.vue優勢

Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

Vue.js的特性以下：1.輕量級的框架2.雙向數據綁定3.指令4.插件化

7.參考文獻

         參考一：

         

         參考二：

         

8.更多討論

 1.Vue和React共同點

vue,react 共性： 

 

虛擬dom實現快速渲染 

 

輕量級響應式組件 

 

服務端渲染易於集成路由工具，打包工具及狀態管理工具

 

    

 2.SPA vs. MPA

從字面上理解，SPA（單頁面應用程序）整個應用只有一個頁面，只加載一次Web靜態資源，包括HTML+CSS+javascript，在導航過程當中不須要從新加載渲染整個頁面。而MPA偏偏相反，也就是每一個頁面都須要獨立完整的從後端加載和渲染，早期的網站大多屬於MPA。

 

3.框架的模塊化和打包

一開始，Web應用尚未這麼複雜，JavaScript根本沒有模塊化的概念，算得上封裝的只是function和object，當即執行函數（IIFE）達到了封裝私有變量的目的，避免了全局變量受到文件內變量的污染。隨着前端應用的發展，命名衝突、依賴複雜致使的問題迫令人們開始考慮模塊化的問題。模塊系統將互相依賴的多個文件和目錄拆分，全部代碼均可以按需加載並彼此訪問。

最先，伴隨着node.js的興起，CommonJS成功解決了服務器端JS的模塊化。可是因爲其採用同步加載的方式，加載資源會形成瀏覽器的「假死」，因此並不適合Web應用的模塊化。後來，AMD（異步模塊定義）成爲瀏覽器端模塊加載的規範，比較流行的庫是RequireJS。RequireJS要求模塊定義使用define關鍵字，以下形式：define(['dep'], function(dep){})，模塊導入使用require關鍵字。可見，RequireJS會預先加載依賴，完成後觸發回調函數。與RequireJS相似的還有阿里大牛玉伯開發的SeaJS，但模塊定義規範不一樣於AMD，它延續CommonJS規範，稱爲CMD（公共模塊定義）。惋惜的是，玉伯認可「如今能夠給SeaJS立碑了」。

ES6以後，JavaScript語言自己終於支持模塊化了。不須要將全部代碼都放在一個IIFE或回調中，只須要在模塊中聲明須要的內容，全部的聲明都被限定在模塊的做用域中，對全部腳本和模塊全局不可見，而後將須要暴露的模塊資源使用export關鍵字導出，當其它模塊依賴此模塊時再經過import關鍵字導入。因爲出現較晚，ES6的模塊化還不太完善（好比按需加載），瀏覽器支持也有限，但能夠預見，在不遠的未來，ES內置的模塊化將取代第三方庫。

RequireJS/SeaJS能夠認爲是一種在線「編譯」模塊的方案，至關於在頁面上加載一個AMD/CMD規範解釋器。這樣瀏覽器就能解析define，require，exports，module這些關鍵字，也就實現了模塊化。而Browserify/Webpack是預編譯模塊打包的方案，不須要在瀏覽器中加載解釋器。你在本地直接寫JS，無論是AMD/CMD/ES6風格的模塊化，它都能編譯成瀏覽器認識的JS。

Webpack已經成爲最流行的打包工具，它爲全部的靜態資源提供單一的依賴樹，對JavaScript、CSS等資源進行靈活的操做，並將向瀏覽器發送內容的數量和次數最小化。其強大之處不只僅在於它統一了JS的各類模塊系統，取代了Browserify、RequireJS、SeaJS的工做，更重要的是它的萬能模塊加載理念，即全部的資源均可以且也應該模塊化。

Parcel是剛剛出世不久的打包或者說是構建工具，是Webpack強有力的對手。相對於配置複雜的Webpack，它號稱超級快（速度是Webpack的兩倍）、零配置，同時還提供了一個開箱即用的開發服務器，經過熱更新來支持快速開發。Parcel也有些不完善的地方，如不支持SourceMap，不能剔除無效代碼（TreeShaking)。