? ? ? ? ? ? ? ? ? ? ? ? ? ?【JS-10-angular有哪些優(yōu)缺點(diǎn)?】
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 分享人：聶義中
目錄
1.背景介紹
2.知識剖析
3.常見問題
4.解決方案
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
8.更多討論
1.背景介紹
angular有哪些優(yōu)缺點(diǎn)之前赞枕，簡單的介紹一下什么是angular稿茉。
記得在最開始學(xué)習(xí)前端知識的時候，了解到前端三個基礎(chǔ)html蘸际、CSS钉疫、JavaScript，他們可以簡單的? ? ? ? ? ? ? ? ? ? 表示為結(jié)構(gòu)、樣式和行為奄毡。
jQuery實(shí)質(zhì)上就是提供了一些前端常用的，針對元素的處理的簡便寫法贝或，可以把它看作一個JS的工具包吼过。
Angular則是一個MVVM框架锐秦。
要說清楚什么是MVVM框架，需要了解MVC框架那先，了解MVC框架农猬，需要了解一下前端開發(fā)的歷史。
前端開發(fā)的歷史和趨勢
什么是前端售淡？什么是后端斤葱？
前端：針對瀏覽器的開發(fā)，代碼在瀏覽器運(yùn)行
后端：針對服務(wù)器的開發(fā)揖闸，代碼在服務(wù)器運(yùn)行
互聯(lián)網(wǎng)發(fā)展的早期揍堕，前后端開發(fā)是一體的，前端代碼是后端代碼的一部分汤纸。
1衩茸、后端收到瀏覽器的請求
2、生成靜態(tài)頁面
3贮泞、發(fā)送到瀏覽器
所以最初的網(wǎng)站是沒有樣式楞慈，更沒有行為互動，只有結(jié)構(gòu)啃擦，光禿禿的html囊蓝。但在那個時候已經(jīng)是很偉大的很先進(jìn)的東西。
那時的網(wǎng)站開發(fā)令蛉，采用的是后端 MVC模式聚霜。
1、Model（模型層）：提供/保存數(shù)據(jù)
2珠叔、Controller（控制層）：數(shù)據(jù)處理蝎宇，實(shí)現(xiàn)業(yè)務(wù)邏輯
3、View（視圖層）：展示數(shù)據(jù)祷安，提供用戶界面
前端只是后端 MVC的 V姥芥。（切圖仔的由來？）
那時的前端工程師汇鞭，實(shí)際上是模板工程師撇眯，負(fù)責(zé)編寫頁面模板，比如我們現(xiàn)在寫的靜態(tài)頁面虱咧。
后端代碼讀取模板熊榛，替換變量，渲染出頁面腕巡。
Ajax技術(shù)誕生玄坦，改變了一切。
2004年：Gmail
2005年：Google地圖
前端不再是后端的模板，可以獨(dú)立得到各種數(shù)據(jù)煎楣。
因?yàn)锳jax是一種在無需重新加載整個網(wǎng)頁的情況下豺总，能夠更新部分網(wǎng)頁的技術(shù)。
Ajax技術(shù)促成了 Web2.0的誕生择懂。
Web1.0：靜態(tài)網(wǎng)頁喻喳，純內(nèi)容展示
Web2.0：動態(tài)網(wǎng)頁，富交互困曙，前端數(shù)據(jù)處理
從那時起表伦，前端變得復(fù)雜了，對前端工程師的要求越來越高慷丽。
前端 MVC框架
前端通過 Ajax得到數(shù)據(jù)蹦哼，因此也有了處理數(shù)據(jù)的需求。
前端代碼變得也需要保存數(shù)據(jù)要糊、處理數(shù)據(jù)纲熏、生成視圖，這導(dǎo)致了前端 MVC框架的誕生
2010年锄俄，Backbone.js
Backbone將前端代碼分成兩個基本部分局劲。
Model：管理數(shù)據(jù)
View：數(shù)據(jù)的展現(xiàn)
沒有 C。因?yàn)槟淘岸?Controller與后端不同鱼填。
不需要，也不應(yīng)該處理業(yè)務(wù)邏輯
只需要處理頁面邏輯车柠，響應(yīng)用戶的一舉一動,也就是和用戶的交互
所以剔氏，前端 Controller相對比較簡單塑猖。Backbone沒有 C竹祷，只用事件來處理頁面邏輯。
Router
前端還有一種天然的方法羊苟，可以切換視圖塑陵，那就是 URL。
通過 URL切換視圖蜡励，這就是 Router（路由）的作用令花。(html、js凉倚、angular）
前端 MVVM框架
另一些框架提出 MVVM模式兼都，用 ViewModel代替 Controller。
Model
View
View-Model：簡化的 Controller稽寒，唯一作用就是為 View提供處理好的數(shù)據(jù)扮碧，不含其他邏輯。
本質(zhì)：view綁定 view-model，視圖與數(shù)據(jù)模型強(qiáng)耦合慎王。數(shù)據(jù)的變化實(shí)時反映在 view上蚓土，不需要手動處理。
MVC赖淤、MVVM蜀漆、MVW，這里重點(diǎn)理解一下MVVM咱旱。
Mmodel模型
Vview視圖
VMviewmodel視圖的模型
Ppresenter展示器
Ccontroller控制器
Wwhatever隨意
View視圖 通俗易懂确丢。就是前端的 HTML， CSS和 與 HTMLCSS有關(guān)的JS代碼莽龟。 寫一個Form表格蠕嫁，由 HTML架起，CSS做美化毯盈，JS來進(jìn)行動畫控制剃毒。
Model模型。簡單說是起到連接服務(wù)器搂赋，和商業(yè)邏輯的形成赘阀。 這里面很多需要異步處理，并且有需求獨(dú)立更新脑奠。因此基公，必須和視圖分離。
而連接上面這兩者的就是 ViewModal試圖模型宋欺。 這里只做連接轰豆，并不起到控制。保證獨(dú)立性齿诞。在多個 View和多個 Modal之前做到很好的橋梁的作用酸休。
P起到的作用更多是展示,部分控制，換句話說 Angular里面那么多 ng-show后面的代碼都可以理解為 P祷杈。
C起到的主體控制斑司。比如讀取 M的數(shù)據(jù)，然后插入一個模塊到 V視圖里但汞。 如果用 Angular來解讀,Controller就是 C宿刮。
W則不分的那么具體。更為靈活私蕾。
前端可以做到：
讀寫數(shù)據(jù)
切換視
用戶交互
這意味著僵缺，網(wǎng)頁其實(shí)是一個應(yīng)用程序。
SPA=Single-pageapplication
2010年后踩叭，前端工程師從開發(fā)頁面磕潮，變成了開發(fā)“前端應(yīng)用”（跑在瀏覽器里面的應(yīng)用程序）。
Angular
Google公司推出的 Angular是最流行的 MVVM前端框架。
它的風(fēng)格屬于 HTML語言的增強(qiáng)揉抵，核心概念是雙向綁定亡容。
Vue
Vue.js是現(xiàn)在很熱門的一種前端 MVVM框架。
它的基本思想與 Angular類似冤今，但是用法更簡單闺兢，而且引入了響應(yīng)式編程的概念
React
React是從Facebook起源的最著名的庫。它使你的前端非常舒適戏罢，是一個非常獨(dú)特的客戶端庫屋谭。
React.JS的核心目標(biāo)是使前端能夠高效開發(fā)和重用聲明的插件。
? ? ? ? ? ? ? ? 回到angular
Angular目前有兩個比較大的版本龟糕，一個是 1.X桐磁，一個是 5.0，對于 2.0以下的版本統(tǒng)稱為 AngularJS讲岁，從 2.0版本開始稱為 Angular我擂。
那么AngularJS有哪些優(yōu)點(diǎn)與缺點(diǎn)呢？
2.知識剖析
? ? ? ? ? ? AngularJS的優(yōu)點(diǎn)
1.良好的應(yīng)用程序結(jié)構(gòu)：
通常情況下缓艳，我們編寫 JavaScript沒有明確的結(jié)構(gòu)校摩。雖然在編寫小應(yīng)用程序的時候沒有問題，但這顯然是不適合于大規(guī)模的應(yīng)用程序阶淘。
? ? ? ? ? ? ? ? ? ? 使用 AngularJS衙吩，您可以通過MVC（模型 -視圖 -控制器）或MVVM（模型 -視圖 -視圖模型）模式來組織源代碼。
? ? ? ? ? ? ? ? ? ? AngularJS是一個 MVW框架溪窒，其中W代表可以用于任何項(xiàng)目坤塞。你可以組織你的代碼模塊，它可顯著提高應(yīng)用程序的可測試性和可維護(hù)性澈蚌。數(shù)據(jù)摹芙、業(yè)務(wù)邏輯、視圖的分離惜浅。? ? ? ? ? ? ? ?
2.雙向數(shù)據(jù)綁定
數(shù)據(jù)綁定肯定是 AngularJS最佳功能之一瘫辩。
? ? 你可以聲明綁定的模型到 HTML元素伏嗜。當(dāng)模型發(fā)生變化時坛悉，視圖會自動更新，反之亦然承绸。? 這可以減少大量的傳統(tǒng)樣板代碼裸影，保持模型和視圖同步。? ? ? ? ? ? ? ?
3.指令
自定義Directive军熏，比jQuery插件還靈活轩猩，但是需要深入了解Directive的一些特性，簡單的封裝容易榨惠，復(fù)雜一點(diǎn)官方?jīng)]有提供詳細(xì)的介紹文檔夺蛇，? ? ? ? ? ? ? ? ? ? 我們可以通過閱讀源代碼來找到某些我們需要的東西掷漱，如：在directive使用 $parse熟空；
4.HTML模板
AngularJS使用 HTML模板姓建，這使事情變得簡單剂习，并允許設(shè)計(jì)人員和開發(fā)人員同時工作玫恳。
? ? ? ? ? ? ? ? ? ? 設(shè)計(jì)人員可以按照通常的方式創(chuàng)建用戶界面哆姻，而開發(fā)人員可以使用聲明性綁定語法很容易配合不同的UI組件的數(shù)據(jù)模型焦影。? ? ? ? ? ? ? ?
5.依賴注入
? ? ? ? ? ? ? ? ? ?ng模塊化比較大膽的引入了Java的一些東西（依賴注入）车遂，能夠很容易的寫出可復(fù)用的代碼，對于敏捷開發(fā)的團(tuán)隊(duì)來說非常有幫助斯辰，? ? ? ? ? ? ? ? ? ? 我們的項(xiàng)目從上線到目前舶担，UI變化很大，在摸索中迭代產(chǎn)品彬呻，但是js的代碼基本上很少改動衣陶。? ? ? ? ? ? ? ?
? ? ? ? ? ?AngularJS的缺點(diǎn)
1.性能
雙向數(shù)據(jù)綁定是一把雙刃劍。隨著組件增加闸氮，項(xiàng)目越來越復(fù)雜祖搓，雙向數(shù)據(jù)綁定帶來性能問題。
? ? ? ? ? ? ? ? ? ? 雙向數(shù)據(jù)綁定是如何影響性能的湖苞？在JavaScript（ES5）中拯欧，并沒有實(shí)現(xiàn)當(dāng)變量或?qū)ο蟾淖儠r發(fā)出通知的功能，Angular的實(shí)現(xiàn)方法被叫做“Dirty-checking（臟檢查機(jī)制）”财骨，通過跟蹤數(shù)據(jù)的改變再動態(tài)更新用戶界面（UI）镐作。? ? ? ? ? ? ? ? ? ? 在Angular的作用域中任何操作的執(zhí)行都會引發(fā)Dirty-checking，隨著綁定數(shù)量的增加性能就會越低隆箩。? ? ? ? ? ? ? ?
2.Angular2.0推翻重做使得目前不宜采用此框架
Angular1.x版本其實(shí)是個比較舊的東西了该贾，現(xiàn)在看來有些理念過時了，比如依賴注入捌臊、自己獨(dú)特的模塊化杨蛋，這些東西其實(shí)在ES6下已經(jīng)很好地被解決了。? ? ? ? ? ? ? ? ? ? Angular的2.0幾乎是一個推翻重做的框架理澎，估計(jì)不會有1.X的upgrade方案逞力。所以如果現(xiàn)在新開始的項(xiàng)目采用Angular的話，會是一個很尷尬的時機(jī)糠爬。? ? ? ? ? ? ? ? ? ? 同樣寇荧，如此大的改動似乎也反面印證了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蕊唐，太過于簡單的頁面。
Angular更適合于CRUD的管理系統(tǒng)開發(fā)烁设。
3.常見問題
Angular2相比 Vue有什么優(yōu)勢刃泌？
4.解決方案
Angular2相對于Vue的優(yōu)勢在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)大曹体。除了雙向綁定之類的基本功能俗扇，還能通過programaticAPI控制dom元素的表單行為。? ? ? ? ? ? ? ? 也有成型API提供自定義validator箕别。這一點(diǎn)Vue只有v-model和第三方庫铜幽。對于后臺之類的重表單應(yīng)用，還是Ng2有優(yōu)勢串稀。? ? ? ? ? ?
? ? ? ? ? ? ? ? 2.依賴注入:
? ? ? ? ? ? ? ? 無論你喜不喜歡DI除抛，這就是Angular2的強(qiáng)大功能之一。有DI可以在不改變代碼結(jié)構(gòu)的情況下完成功能替換母截。? ? ? ? ? ? ? ? Vue則需要程序員自己規(guī)劃代碼組織到忽，用來支持共享組件。DI也可以用于類似modulelocalstate的功能清寇。? ? ? ? ? ? ? ? 比如喘漏，一個視頻播放控件有幾個子組件完成，子組件需要分享一個狀態(tài)华烟。這一點(diǎn)Angular2有原生的serviceinjectionpattern翩迈。而Vue則沒有官方推薦。? ? ? ? ? ? ? ? ? ? ? ? ? ?3.對標(biāo)準(zhǔn)向后兼容:
? ? ? ? ? ? ? ? Angular2在一些細(xì)節(jié)上對標(biāo)準(zhǔn)有更好的支持盔夜。比如 listdiffer算法中 Angular2可以支持實(shí)現(xiàn)了Symbol.iterator的對象负饲，? ? ? ? ? ? ? ? 而Vue只能支持Array。對Observable和Promise喂链，Angular2在應(yīng)用的各個地方返十，? ? ? ? ? ? ? ? 甚至模板級別都有支持(asyncpipe)。而Vue需要vue-rx等第三方庫支持衩藤。Angular2的組件有shadowdom的實(shí)現(xiàn)可以選擇吧慢，而Vue目前還沒有涛漂。? ? ? ? ? ?
? ? ? ? ? ? ? ?4.測試:
? ? ? ? ? ? ? ? Angular2一開始就設(shè)計(jì)好了如何對組件進(jìn)行測試赏表，而Vue組件雖然也很好寫測試检诗，但是沒有官方推薦的唯一標(biāo)準(zhǔn)。? ? ? ? ? ? ? ? 除此以外瓢剿，Angular2還有一些小功能比如檢驗(yàn)?zāi)０宓念愋桶踩昊牛贿^AoT本身似乎還沒有穩(wěn)定，所以不能算優(yōu)勢间狂。對TS的支持也是Angular好攻泼，? ? ? ? ? ? ? ? 當(dāng)然前提是你喜歡TS〖螅總體而言忙菠，就是Angular框架的全面性是難以撼動的。? ? ? ? ? ?
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
7.參考文獻(xiàn)
參考一：參考鏈接
參考二：知乎
8.更多討論
【1】Angular1怎么操作DOM元素纺弊？
解答：angular11. 操作DOM元素太過于麻煩牛欢，還需要封裝在自定義指令里面。
【2】angular自帶的JQlitegai怎么使用淆游？
解答：它是jQuery的輕量級版本傍睹，用法跟jQuery基本一樣。
【3】angular2好用還是angular1好用犹菱？
解答：作為升級版拾稳，肯定功能得到了一定的優(yōu)化，angular2肯定是強(qiáng)大一些腊脱。
鳴謝
感謝大家觀看
?BY:聶義中
今天的分享就到這里啦访得，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)陕凹、留言震鹉、拍磚~
