[TOC] # [awesome-angular](https://github.com/gdi2290/awesome-angular) # 教程地址 https://coderprog.com/architecting-angular-applications-redux/ # 書籍 https://pragprog.com/book/smreactjs/reactive-programming-with-rxjs https://www.manning.com/books/rxjs-in-action # [RxJS](https://github.com/Reactive-Extensions/RxJS) ## 先了解Rx ReactiveX是Reactive Extensions的縮寫，一般簡寫為**Rx**，其中的 X 代表各種語言。因為它實質上只是一個事件流處理庫，不需要什么其他依賴。最初是LINQ的一個擴展，由微軟的架構師Erik Meijer領導的團隊開發，在2012年11月開源，Rx是一個編程模型，目標是提供一致的編程接口，幫助開發者更方便的處理異步數據流，Rx庫支持.NET、JavaScript和C++，Rx近幾年越來越流行了，現在已經支持幾乎全部的流行編程語言了，Rx的大部分語言庫由ReactiveX這個組織負責維護，比較流行的有RxJava/RxJS/Rx.NET，社區網站是 `reactivex.io`。 ## 了解RxJS 全稱Reactive Extension for JavaScript，rxjs主要用于處理異步數據，具有高彈性、高穩定性、高實時性的特點。 傳統賦值型的編程方式中，如果一個變量被賦值并且接下來沒有在改變這個變量的值，那么這個變量不會因為賦值給他的變量變化而變化，舉例說明為： ```js b = 1; c = 1; a = b+ c; ``` 無論 b 和 c 接下來怎么變化，a 的值 2 都不會變 而響應式編程中，變量是會隨著賦值給他的變量變化而變化的，舉例說明： ```js b = 1; c = 1; a = b + c; b = 2; ``` 在賦值 `b=2` 之后，a的值也隨即更新為 3 RxJS是一種針對異步數據流編程工具，或者叫響應式擴展編程；可不管如何解釋RxJS其目標就是異步編程，Angular引入RxJS為了就是讓異步可控、更簡單。 ## RxJS的JS實現 RxJS是一個異步編程的庫，同時它通過observable序列來實現基于事件的編程。它提供了一個核心的類型：Observable，幾個輔助類型（Observer，Schedulers，Subjects），受到Array的擴展操作（map，filter，reduce，every等等）啟發，允許直接處理異步事件的集合。 ReactiveX結合了Observer模式、Iterator模式和函數式編程和集合來構建一個管理事件序列的理想方式。 在RxJS中管理異步事件的基本概念如下： Observable：代表了一個調用未來值或事件的集合的概念 Observer：代表了一個知道如何監聽Observable傳遞過來的值的回調集合 Subscription：代表了一個可執行的Observable，主要是用于取消執行 Operators：是一個純函數，允許處理集合與函數式編程風格的操作，比如map、filter、concat、flatMap等 Subject：相當于一個EventEmitter，它的唯一的方法是廣播一個值或事件給多個Observer Schedulers：是一個集中式調度程序來控制并發性，允許我們在setTimeout或者requestAnimationFrame上進行協調計算 ## 變量命名Style （個人約定，非任何best practice） ~~~ Observable變量以 $ 結尾，如 state$； Subject變量以 $$ 結尾， 如 state$$； Subscription變量以 _ 結尾，如 ultimate_。 ~~~ RxJS包含許多概念，RxJS Manual在介紹RxJS的時候，引入了更多概念，對于初學者而言，不夠直白。 比如： > ReactiveX combines **the Observer pattern** with **the Iterator pattern** and **functional programming with collections** to fill the need for an ideal way of managing sequences of events. 再如： > Observable: represents the idea of **an invokable collection** of **future values or events**. ## 參考 [Observable](https://angular.cn/guide/observables) [RxJS基礎教程](https://segmentfault.com/a/1190000013829356) [使用 RxJS 實現 JavaScript 的 Reactive 編程](https://www.oschina.net/translate/rxjs-streams) [構建流式應用—RxJS詳解](https://github.com/joeyguo/blog/issues/11) [詳解Angualr 組件間通信](http://www.jb51.net/article/103730.htm) [RxJS 優質文章翻譯](https://github.com/RxJS-CN/rxjs-articles-translation) [Observable詳解](https://segmentfault.com/a/1190000008809168) [構建流式應用—RxJS詳解](http://blog.csdn.net/zhoulu001/article/details/53072604) https://www.jianshu.com/p/1a90e39ec658 [學習RxJS： 導入](http://www.moye.me/2016/05/31/learning_rxjs_part_one_preliminary/) # [Redux](https://github.com/reactjs/redux) [Redux](http://www.redux.org.cn/) 是 JavaScript 狀態容器，提供可預測化的狀態管理。 Redux 除了和 React 一起用外，還支持其它界面庫。 它體小精悍（只有2kB，包括依賴）。 可以讓你構建一致化的應用，運行于不同的環境（客戶端、服務器、原生應用），并且易于測試。 Redux是為了解決應用狀態（State）管理而提出的一種解決方案。那么什么是狀態呢？簡單來說對于應用開發來講，UI上顯示的數據、控件狀態、登陸狀態等等全部可以看作狀態。 我們在開發中經常會碰到，這個界面的按鈕需要在某種情況下變灰；那個界面上需要根據不同情況顯示不同數量的Tab；這個界面的某個值的設定會影響另一個界面的某種展現等等。應該說應用開發中最復雜的部分就在于這些狀態的管理。很多項目隨著需求的迭代，代碼規模逐漸擴大、團隊人員水平參差不齊就會遇到各種狀態管理極其混亂，導致代碼的可維護性和擴展性降低。 那么Redux怎么解決這個問題呢？它提出了幾個概念：Reducer、Action、Store。 ## 參考 [Redux你的Angular應用](https://www.jianshu.com/p/3cf03ae2eac1) [Redux 入門教程（一）：基本用法](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html) # [Ngrx](https://github.com/ngrx) Ngrx是引入了 RxJs 和符合 Redux 設計標準的js庫，其**整合了RxJs和Redux的功能**，可以引入到Angular中進行異步數據管理和狀態管理 # [Zone.js](https://github.com/angular/zone.js) zone.js 能**實現異步Task跟蹤，分析，錯誤記錄、開發調試跟蹤等**，這些都是`zone.js`場景的應用場景。 如果你使用過 Angular1 的開發，那么也許你還能記憶猶新的想起：使用第三方事件或者 ajax，卻忘記`$scope.$apply`的場景吧。在Angular1中如果在非Angular的上下文改變數據Model，Angular是無法預知的，因此也不會觸發界面的更新。所以我們不得不顯示的調用`$scope.$apply`或者`$timeout`來觸發界面的更新。Angular框架為了更多的獲知變化的事件，不得不為封裝了一整套框架內置的服務和指令，如`ngClick`、`ngChange`、`$http`、`$timeout`等，這也增加了 Angular1 的學習成本。 也是為了解決Angular1的這一些列問題，Angular2團隊引入了 zone.js ，放棄自定義這類服務和指令，相反而是擁抱瀏覽器的原生對象和方法。所以在Angular2中可以使用瀏覽器的任何事件了，只需要括號模板語法的標識：`(eventName)`，等價于`on-eventName`；也可以直接使用瀏覽器的原生對象了，如`setTimeout`，`addEventListener`、`promise`、`fetch`等。 # 優化 zone.js zone.js模塊會偵聽應用的改變，并決定什么時候去更新每個組件的界面。 任何異步事件的觸發都會重新驗證每個組件的界面而且速度快的嚇人。 注意：對于大多數應用，你不需要知道zone.js的內部原理，但如果你所在的項目要求優化一個復雜應用的界面渲染，你就需要準備好撥出一些時間去學習更多的zone的內部運作細節。 讓渲染引擎保持在一個獨立模塊中并允許第三方類庫替換原始DOM的渲染器，這能實現不依賴于瀏覽器平臺的目標。例如，允許將應用代碼跨設備重用， 在移動設備中，界面渲染器就將使用原生組件。 TypeScript類的代碼不需要改變，但@Component注釋的內容會包含XML或其他語言，這些內容將用于渲染原生組件。一個自定義的 Angular2渲染器已經在[NativeScript](http://angularjs.blogspot.hk/2016/03/code-reuse-in-angular-2-native-mobile.html?view=classic)框架中得以實現， 該渲染器提供的服務就像在Javascript、原生iOS和安卓界面組件之間架起一座橋梁一樣。通過NativeScript你可以重用組件的代碼，而你需要做的僅僅是將模板中的HTML替換為XML。 另一個自定義界面渲染器允許使用[Angular 2 with React Native](http://angularjs.blogspot.hk/2016/04/angular-2-react-native.html)，這是一種完全不同的為iOS和安卓系統創建原生（不是hybird）界面的方法。 在angular中有了Zone.js。原生隨便用，setTimeout，addEventListener、promise等都在ngZone中執行，angular并在ngZone中setup了相應的鉤子，通知angular2做相應的臟檢查處理，然后更新DOM。 ## 參考 https://www.cnblogs.com/whitewolf/p/zone-js.html http://reactive.how/rxjs/explorer