现在是时候重新思考基本的软件架构 了，因为传统的编程方式已经不能满足今天的现代软件应用需求。

什么是JavaScript中的反应式编程

JavaScript中的反应式编程 就像一个在时间上发生的事件序列 。它是一个围绕数据流的异步编程概念。

反应式编程是一种编写代码的编程范式，主要涉及到异步数据流。 它是一种在时间上发生的事件流 的编程。

JavaScript中的RxJS

RxJS是一个用于转换、合成和查询异步数据流的JavaScript库。RxJS既可以在浏览器中使用，也可以在服务器端使用Node.js。

这只是构建软件应用的一种不同方式，它将对发生的变化做出 "反应"，而不是典型的编写软件的方式，即我们明确地编写代码（又称 "命令式 "编程）来处理这些变化。

动态数据流（事件发射器）

在一般的编程范式中，如果z = x + y在声明时，z将是x和y的总和，但在该语句之后，如果我们改变x和y的值，那么z将是不变的。所以在那条总和语句之后没有任何影响。

例子1

//main.js

var x = 10;
var y = 20;
let z = x + y;
console.log(z);
x = 100;
y = 200;
console.log(z);

如果你在浏览器中直接运行上述代码，你可能会面临以下问题。

可能出现的错误

你可以得到任何语法错误。
如果你直接在浏览器中执行代码，那么webpack编译过程失败的几率就会很高。

可能的解决方案

设置ES6开发环境的新手指南 严格按照本文的要求，将上述代码放在main.js文件中。

在两个控制台报告中，我们会得到同样的东西，那就是30和30

x和y的值并不影响变量z，所以在Imperative Programming中缺少动态变化的概念。

在这个例子中，我们使用的是ES6，所以我们需要下载RxJS的ES6版本：

npm install rxjs-es --save

import {Observable} from 'rxjs-es';
let streamA = Observable.of(3);
let streamB = streamA.map(a => 3 * a);
streamB.subscribe(b => console.log(b));

在控制台中，我们可以看到9的输出

现在我们需要在声明的时候指定流的动态行为 ，而不是在声明之后；否则，这将无法工作。因此动态代码将看起来像这样。

import {Observable} from 'rxjs-es';
let streamA = Observable.of(3, 4); // At the time of declaration, we need to assign the dynamic behaviour.
let streamB = streamA.map(a => 10 * a);
streamB.subscribe(b => console.log(b));

现在你的新输出将是9和12

在反应式编程 中**，** 所有东西都是在时间中发生的流。一个流是一个正在进行的事件的进展（序列）

例子2

//main.js

let a = [1,2,3,4,5,6,7,8,9];
console.log(a); // [1,2,3,4,5,6,7,8,9]

它记录的是数值的数组，与任何时间干扰无关：

//main.js

var a = [1,2,3,4,5,6,7,8,9];
var b = a.filter(x => x > 4)
        .reduce((x,y) => x + y);
console.log(b);

再次运行；你会在控制台35中看到它。

上面的例子很简单，我们只是取了一个数组，用一些条件对其进行过滤，然后将其还原为上一个和下一个值，得到b的最终值**。**

本文使用了《初学者 设置ES6开发环境指南》的环境设置。所以，如果你还不知道，那么请查看那篇文章，你就可以开始运行了。现在我们需要添加RxJS的步骤了。

第1步：检查你的package.json文件

{
  "name": "js6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "KRUNAL LATHIYA",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.24.0",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "rxjs-es": "^5.0.0-beta.12"
  }
}

现在我们已经成功安装了RxJS库，所以我们可以在这个例子中使用它。

第2步：在main.js中替换以下代码

//main.js

import {Observable} from 'rxjs-es';
let output = Observable.interval(500)
             .take(6)
             .map(i => [1,3,5,7,9,11][i]);
let result = output.map(x => x);
result.subscribe(x => console.log(x));

当你再次在控制台启动你的服务器时，你可以看到每隔500毫秒就会出现一次：

在上面的代码中，数值是以某种时间间隔记录的，在我们的例子中是500毫秒，这就是异步范式。

当间隔事件被触发时，我们在控制台中得到了记录的值，这真是太棒了，对吧！？

我们得到了特定时间的事件流，而且我们还可以对事件流应用map、filter、reduce和其他数组 函数。

//main.js

import {Observable} from 'rxjs-es';

let output = Observable.interval(500)
             .take(6)
             .map(i => [1,3,5,7,9,11][i]);
let result = output.map(x => x)
    .filter(x => x > 5)
    .reduce((x, y) => x + y);
result.subscribe(x => console.log(x));

我们在控制台中得到了27个 。

关键点

反应式编程只允许你在声明时设置动态行为。
反应式编程与强制性编程不同，因为正如其名称所示，它在我们的应用程序中发生或完成某些事情时作出反应。
它依靠的是及时发生的异步性。
它在失败和成功的情况下都能保持反应。
在反应式的世界里，我们不能等待程序发生什么，我们需要继续执行，如果发生了什么，我们需要对它做出反应。所以，这就是Async模式。

最后，Javascript中的反应式编程教程的例子就结束了。

什么是JavaScript中的反应式编程（详细教程）