沒錯，我就是要吹爆Angular

時間 2019-12-04

原文原文鏈接

距離新版Angular發佈已通過去了超過20個月，社區已經有了至關的規模。前端項目複雜性的加深以及對工程化的推動也讓你們愈來愈重視起這一「框架」。javascript

可是畢竟正如查理芒格所說：html

拿着錘子的人，看啥都像釘子前端

對與其它前端庫的使用者來講，接受起Angular很是困難，並且即使學習了Angular，也每每不得要領。java

科學家發現，在進行編程時，大腦主要活躍的區域是語言相關的區域。所以Angular的推廣不能直接靠宣傳Angular，而是應該從其它框架出發，引伸出Angular解決了什麼問題，這樣才能事半功倍（你不能爲了讓俄羅斯人學會中文就一直對他說中文吧）。node

所以我但願藉由其它框架，好比React，Vue出發，結合本身的使用經驗，告訴你們Angular的強大之處，以及選擇Angular帶來的裨益。linux

React曾經席捲前端 React曾經席捲整個前端界，甚至是當時MVVM的惟一選擇，Angular也借鑑了不少React的實現方式。ios

可是在使用React的時候，試着思考幾個問題：git

1.爲何必定要用setState更新狀態呢？程序員

合併屢次更新能夠避免資源的浪費，又或是避免視圖更新的反作用？github

大神Morgan對此有十分詳盡的描述：setState：這個API設計到底怎麼樣

更深刻思考一下，能夠避免這種額外的語法開銷麼？爲何不能只關注實現呢？

React是採用將一段JSX模板語法編譯成js對象的方式來實現數據映射的，所以必須觸發render函數的重複執行才能更新模板，setState頗有效地避免的屢次重複執行該函數。

細心的小朋友會發現，若是我將每一次的render拆分得足夠細，好比細到每個具體的tag，那麼當我更新其數據的時候，是否是能夠不用setState了呢（直接修改tag的屬性或者是文本）？

另一個問題就是，我怎麼在不主動調用setState的狀況下知道哪一個tag的哪一個屬性變動了呢？固然，即使是setState也須要知道狀態是否改變，不過只須要找出是否改變（防止重複渲染），而另外一種須要定位改變項的位置。

第一個問題，Angular採用的**模板解析HTML+**的方式，將元素節點直接解析爲elementRef，每個elementRef都有updateRenderer，在有變動的時候調用render2函數，而這一函數能夠由不一樣平臺定義（框架設計之初就想到了跨平臺）

而第二個問題，Angular借鑑了前輩AngularJS的方法——髒檢查！

什麼是髒檢查？就是遍歷整個組件找到變化的節點。可是問題依舊存在，我怎麼知道當前組件存在變動呢？AngularJs採用的方式是在setController和綁定ng-事件的時候促發髒檢查，必要的時候手動促發髒檢查。

這樣會出現循環髒檢查的狀況，而Angular借鑑了React單項數據流的概念，使得變動檢測只能自頂向下執行一次，避免手動促發髒檢查。

那麼問題來了，如何保證全部變動項都會被檢測到呢？

大殺器Zone！

新的角度思考，可以引起Dom變動的狀況有哪些？不外乎就是Dom事件，ajax，setTimeout等，Angular借鑑Linux的線程本地存儲機制，暴力代理全部可能引起變動的操做：angular/zone.js，一旦變動發生，即執行髒檢查。

固然，爲了提升髒檢查性能，Angular還能調整檢查策略：

onPush模式下一旦某個節點沒有變動，則不檢查其子節點。

好了，一切水到渠成——Zone代理全部可能引起變動的操做，引起髒檢查，定位到了變動以後使用render2更新模板。

setState消失了，你在進行編程的時候就只用關注當前組件的數據，至於模板展現，則徹底不在你的考慮範圍內。

優雅麼？等等，循環的複雜度是很難控制的，一旦使用了髒檢查，會不會出現AngularJs的卡頓狀況呢？

JS中的函數調用會消耗性能，尤爲是在循環次數很是多的時候。不少現代瀏覽器可以智能感知函數內聯，將函數中的運算內聯進其調用棧中運行。可是隻有當調用次數可預期的時候，JS引擎纔會進行這樣的過程。

首先考慮使用場景，大部分節點的屬性綁定都不會超過10個（畢竟你只會操做class，style，節點屬性和text），那麼當節點屬性少於10個的時候，使得JS引擎進行內聯操做：

github.com/angular/ang…

export function checkAndUpdateElementInline( view: ViewData, def: NodeDef, v0: any, v1: any, v2: any, v3: any, v4: any, v5: any, v6: any, v7: any, v8: any, v9: any): boolean {
  const bindLen = def.bindings.length;
  let changed = false;
  if (bindLen > 0 && checkAndUpdateElementValue(view, def, 0, v0)) changed = true;
  if (bindLen > 1 && checkAndUpdateElementValue(view, def, 1, v1)) changed = true;
  if (bindLen > 2 && checkAndUpdateElementValue(view, def, 2, v2)) changed = true;
  if (bindLen > 3 && checkAndUpdateElementValue(view, def, 3, v3)) changed = true;
  if (bindLen > 4 && checkAndUpdateElementValue(view, def, 4, v4)) changed = true;
  if (bindLen > 5 && checkAndUpdateElementValue(view, def, 5, v5)) changed = true;
  if (bindLen > 6 && checkAndUpdateElementValue(view, def, 6, v6)) changed = true;
  if (bindLen > 7 && checkAndUpdateElementValue(view, def, 7, v7)) changed = true;
  if (bindLen > 8 && checkAndUpdateElementValue(view, def, 8, v8)) changed = true;
  if (bindLen > 9 && checkAndUpdateElementValue(view, def, 9, v9)) changed = true;
  return changed;
}
複製代碼

而在多於10個的狀況下采用循環調用：

function checkNoChangesNodeDynamic(view: ViewData, nodeDef: NodeDef, values: any[]): void {
  for (let i = 0; i < values.length; i++) {
    checkBindingNoChanges(view, nodeDef, i, values[i]);
  }
}
複製代碼

另一個優化方向，即是webworker！

因而，你便獲得了性能差很少的（要是趕上不可控的菜鳥，React就會出現性能災難），設計上更爲優雅的Angular。

Vue便採用了相似Angular中Dom渲染中解析的方式，可是尤大神認爲髒檢查會增大性能開銷，所以採用set，get的proxy模式手動促發變動（既模板變量必須存儲在特定對象中）。

可是雖然髒檢查對性能有所消耗，可是相似React的diff算法仍是須要進行變動檢查，並且仍是在渲染過程當中動態進行，因此理論上相比Angular的髒檢查會消耗更多的性能。

可是React的渲染過程是手動觸發的，配合fibber能夠對渲染的次數進行控制，可是毫無疑問在變動檢測方面的性能潛力，髒檢查更甚。

能夠說Zone的存在讓髒檢查煥發了青春。

你是採用React的徹底手動處理變動？仍是採用Vue的手動觸發變動？抑或是Angular的徹底不用考慮變動呢？

當你項目複雜到必定程度時，你就知道哪種更好了~

2.狀態管理這麼更新會抓狂的？

咱們都知道React在進行跨組件傳遞數據的時候，會採用狀態管理機（例如redux），Vue也使用了Vuex的狀態管理機制，結合上一節中的Vue響應式模型，也能很優雅地管理狀態。

可是問題來了，首先，因爲React沒有響應式機制，致使一次狀態管理的變動簡直碎片化地使人抓狂：示例：Todo List · GitBook。這些難道不讓人感到痛苦麼？

Vue有相應的響應式機制，可是真正在寫的時候，一旦項目規模變大，相信不少人都寫出過this.$http://store.xxx.xxx.xxx.xxx的代碼，你在每個」.「的位置都會翻來覆去地查看定義。

而Angular呢？Rxjs和DI纔是最終解決方案。

舉例說明，假設我有一個需求：須要在用戶輸入的時候動態搜索，並將搜索結果顯示在搜索框下方。使用Vue的時候咱們這麼作：

// computed中處理變動
computed{
    test(){
        return this.$store.search.result
    }
}

// 輸入框觸發變動
onChange(value){
    this.$store.dispatch('searchFromRemote',value)
} 

// 在action中定義變動
actions:{
    async searchFromRemote(ctx,value){
        const result = await axios.get('xxxxxx',{value:value})
        ctx.commit('changeSearchResult',result)
    }
}

// commit中修改值...
複製代碼

這仍是用了async await的狀況，尚未考慮catch，而且因爲debounce的移除，致使用戶每敲一次鍵盤，就須要向後端請求一次，還必須配合lodash等函數庫才能實現延時請求的功能。

在這種狀況下，還須要你在超過3處區域切換編程上下文。

接下來，見證響應式編程的威力:

// 直接定義
searchFromRemote(value){
    this.searchResult$ = this.input$.pipe(
      debounce(100),
      switchMap(res=>
        this.http.get('xxxxx',{value:res.value})
      ),
      catch(err=>{
        this.handleError(err)
      })
  )
}
複製代碼

直接模板處

<test>result {{searchResult$ | async}}</test>
複製代碼

集成錯誤處理，集成瀏覽器併發，一個函數搞定！

接下來咱們再修改一下需求，延時處理請求，而且先請求服務器A，若是服務器A沒有結果，再請求服務器B，而且在用戶按下ctrl+z組合鍵時請求服務器C。

仍是一個函數：

searchFromRemote(value){
    this.searchResult$ = this.input$.pipe(
      combineLatest(this.inputKey$.pipe(pairwise()),(inputRes,inputKeyRes)=>{
        if(inputKeyRes[1][0]===17 && inputKeyRes[1][1]===90){
          return {input:inputRes,type:'c'}
        }else{
          return {input:inputRes,type:'a'}
        }
      }),
      debounce(100),
      switchMap(res=>
        if(res.type==='c'){
          return this.http.get('server-c',{value:res.input.value})
        }else{
          return this.http.get('server-a',{value:res.input.value}).pipe(switchMap(res=>{
            if(res.data===undefined){
              return this.http.get('server-b',{value:res.input.value})
            }else{
              return Observable.of(res)
            }
          }))
        }
      ),
      catchError(err=>{
        this.handleError(err)
      })
  )
}
複製代碼