[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