Rxjs 响应式编程-第一章：响应式
Rxjs 响应式编程-第二章：序列的深入研究
Rxjs 响应式编程-第三章: 构建并发程序
Rxjs 响应式编程-第四章构建完整的Web应用程序
Rxjs 响应式编程-第五章使用Schedulers管理时间
Rxjs 响应式编程-第六章使用Cycle.js的响应式Web应用程序

构建并发程序

并发是正确有效地同时做几件事的艺术。为了实现这一目标，我们构建我们的程序来利用时间，以最有效的方式一起运行任务。应用程序中的日常并发示例包括在其他活动发生时保持用户界面响应，有效地处理数百个客户的订单。

在本章中，我们将通过为浏览器制作一个用于射击的太空飞船游戏来探索RxJS中的并发性和纯函数。我们将首先介绍Observable管道，这是一种链接Observable运算符并在它们之间传递状态的技术。然后，我将向您展示如何使用管道来构建程序，而不依赖于外部状态或副作用，将所有逻辑和状态封装在Observables本身中。

视频游戏是需要保持很多状态的计算机程序，但是我们将使用Observable管道和一些优秀的RxJS运算符的功能编写我们的游戏，没有任何外部状态。

简洁和可观察的管道

Observable管道是一组链接在一起的运算符，其中每个运算符都将Observable作为输入并返回Observable作为输出。我们一直在使用本书中的管道; 在使用RxJS进行编程时，它们无处不在。下面是一个简单的事例：

spaceship_reactive/pipeline.js

Rx.Observable
    .from(1, 2, 3, 4, 5, 6, 7, 8)
    .filter(function(val) { return val % 2; })
    .map(function(val) { return val * 10; });

管道是独立的。所有状态从一个运算符流向下一个运算符，而不需要任何外部变量。但是当我们构建我们的响应式程序时，我们可能会想要将状态存储在Observable管道之外（我们在Side Effects和External State中讨论了外部状态）。这迫使我们跟踪我们在管道外设置的变量，所有这些bean计数都很容易导致错误。为避免这种情况，管道中的运算符应始终使用纯函数。

在相同输入的情况下，纯函数始终返回相同的输出。当我们可以保证程序中的函数不能修改其他函数依赖的状态时，设计具有高并发性的程序更容易。这就是纯粹的功能给我们带来的东西。

避免外部状态

在下面的例子中，我们计算到目前为止每隔一秒产生的偶数。我们通过从interval创建一个Observable并在我们收到的值是偶数时增加evenTicks：

spaceship_reactive/state.js

var evenTicks = 0;

function updateDistance(i) {
    if (i % 2 === 0) {
        evenTicks += 1;
    }
    return evenTicks;
}

var ticksObservable = Rx.Observable
    .interval(1000)
    .map(updateDistance)
    
ticksObservable.subscribe(function() {
    console.log('Subscriber 1 - evenTicks: ' + evenTicks + ' so far');
});

这是程序运行四秒后得到的输出：

Subscriber 1 - evenTicks: 1 so far
Subscriber 1 - evenTicks: 1 so far
Subscriber 1 - evenTicks: 2 so far
Subscriber 1 - evenTicks: 2 so far

现在，测试一下，让我们为ticksObservable添加另一个订阅者：

spaceship_reactive/state.js

var evenTicks = 0;
function updateDistance(i) {
    if (i % 2 === 0) {
        evenTicks += 1;
    }
    return evenTicks;
}

var ticksObservable = Rx.Observable
    .interval(1000)
    .map(updateDistance)
    
ticksObservable.subscribe(function() {
    console.log('Subscriber 1 - evenTicks: ' + evenTicks + ' so far');
});

ticksObservable.subscribe(function() {
    console.log('Subscriber 2 - evenTicks: ' + evenTicks + ' so far');
});

输出现在如下：

Subscriber 1 - evenTicks: 1 so far
Subscriber 2 - evenTicks: 2 so far
Subscriber 1 - evenTicks: 2 so far
Subscriber 2 - evenTicks: 2 so far
Subscriber 1 - evenTicks: 3 so far
Subscriber 2 - evenTicks: 4 so far
Subscriber 1 - evenTicks: 4 so far
Subscriber 2 - evenTicks: 4 so far

等等--第二个订阅者的偶数计数不应该起作用的！他应该跟第一个订阅者的计数完全一致。正如您可能已经猜到的那样，Observable管道将为每个订户运行一次，增evenTicks两次。

共享外部状态引起的问题通常比这个例子更微妙。在复杂的应用程序中，打开通向管道外部状态的大门会导致代码变得复杂，并且很快就会出现错误。解决方案是尽可能多地封装管道内的信息。这是我们可以重构前面的代码以避免外部状态的方法：

spaceship_reactive/state.js

function updateDistance(acc, i) {
    if (i % 2 === 0) {
        acc += 1;
    }
    return acc;
}

var ticksObservable = Rx.Observable
    .interval(1000)
    .scan(updateDistance, 0);
    
ticksObservable.subscribe(function(evenTicks) {
    console.log('Subscriber 1 - evenTicks: ' + evenTicks + ' so far');
});

ticksObservable.subscribe(function(evenTicks) {
    console.log('Subscriber 2 - evenTicks: ' + evenTicks + ' so far');
});

预期输出：

Subscriber 1 - evenTicks: 1 so far
Subscriber 2 - evenTicks: 1 so far
Subscriber 1 - evenTicks: 1 so far
Subscriber 2 - evenTicks: 1 so far
Subscriber 1 - evenTicks: 2 so far
Subscriber 2 - evenTicks: 2 so far
Subscriber 1 - evenTicks: 2 so far
Subscriber 2 - evenTicks: 2 so far

使用scan，我们完全避免外部状态。我们将累计的偶数传递给updateDistance而不是依赖外部变量来保持累积值。这样我们就不会增加每个新订户的计数。

大多数时候我们可以避免依赖外部状态。使用它的常见方案是缓存值或跟踪程序中更改的值。但是，正如您将在前面的Spaceship Reactive！中看到的那样，可以通过其他几种方式处理这些场景。例如，当我们需要缓存值时，RxJS的Subject Class（后面会讲到）可以提供很多帮助，当我们需要跟踪游戏的先前状态时，我们可以使用像Rx.Observable.scan这样的方法。

管道是高效的

我第一次将一堆操作符链接到管道中来转换序列，我的直觉是它不可能有效。我知道通过链接运算符在JavaScript中转换数组是很昂贵的。然而在本书中，我们通过将序列转换为新序列来设计程序。这会不会很低效呢？

链接在Observables和数组中看起来类似; 也都有filter和map等方法。但是有一个至关重要的区别：数组方法由于每个操作而创建一个新数组，并且完全由下一个操作符转换。另一方面，可观察的管道不会创建中间的Observable，并且可以一次性将所有操作应用于每个元素。因此，Observable仅被遍历一次，这使得Observable链接变得高效。看看以下示例：

spaceship_reactive/array_chain.js

stringArray // represents an array of 1,000 strings
    .map(function(str) {
        return str.toUpperCase();
    })
    .filter(function(str) {
        return /^[A-Z]+$/.test(str);
    })
    .forEach(function(str) {
        console.log(str);
    });

假设stringArray是一个包含1,000个字符串的数组，我们要将其转换为大写，然后过滤掉包含字母字符以外的任何字符串（或根本没有字母）。然后我们要将结果数组的每个字符串打印到控制台。

这是背后发生的事情：

遍历数组并创建一个包含所有项大写的新数组。
遍历大写数组，创建另一个包含1,000个元素的数组。
遍历筛选的数组并将每个结果记录到控制台。

在转换数组的过程中，我们迭代了三次数组并创建了两个全新的大数组。这非常低效！如果您关注性能或者处理大量项目，则不应该以这种方式编程。

spaceship_reactive/array_chain.js

stringObservable // represents an observable emitting 1,000 strings
    .map(function(str) {
        return str.toUpperCase();
    })
    .filter(function(str) {
        return /^[A-Z]+$/.test(str);
    })
    .subscribe(function(str) {
        console.log(str);
    });

Observable的管道看起来与数组链非常相似，但是又不同。在一个Observable中，在我们订阅它之前，没有任何事情发生过，无论我们应用了多少查询和转换。当我们调用像map这样的变换时，我们其实只运行了一个函数，它将对数组的每个项目进行一次操作。因此，在前面的代码中，这将是会发生的事情：

创建一个大写函数，该函数将应用于Observable的每个项目，并在Observer订阅它时返回将发出这些新项目的Observable。
使用先前的大写函数组合过滤器函数，并返回一个Observable，它将发出新项目，大写和过滤，但仅在Observable订阅时候，才会运行。
通过订阅Observable来发布，通过我们所有操作器的数据将会被发布出来。

使用Observables，我们只会查看一次列表，只有在绝对需要时才会应用转换。例如，假设我们在上一个示例中添加了一个take运算符：

spaceship_reactive/array_chain.js

stringObservable
    .map(function(str) {
        return str.toUpperCase();
    })
    .filter(function(str) {
        return /^[A-Z]+$/.test(str);
    })
    .take(5)
    .subscribe(function(str) {
        console.log(str);
    });

take使得Observable只发出我们指定的前n个项目。在我们的例子中，n是五，所以在数千个数据中，我们只会收到前五个。很酷的部分是我们的代码永远不会遍历所有项目; 只会遍历前5个。

这使开发人员的生活更加轻松。你可以放心，在操作序列时，RxJS只会做必要的工作。这种操作方式称为惰性评估，在Haskell和Miranda等函数式语言中非常常见。

RxJS的主体类

Subject是一种实现Observer和Observable类型的类型。作为Observer，它可以订阅Observable，并且作为Observable，它可以生成值并让Observers订阅它。

在某些情况下，单个Subject可以执行Observers和Observables组合的工作。例如，为了在数据源和Subject的侦听器之间创建代理对象，我们可以使用：

spaceship_reactive/subjects.js

var subject = new Rx.Subject();
var source = Rx.Observable.interval(300)
    .map(function(v) { return 'Interval message #' + v; })
    .take(5);
    
source.subscribe(subject);

var subscription = subject.subscribe(
    function onNext(x) { console.log('onNext: ' + x); },
    function onError(e) { console.log('onError: ' + e.message); },
    function onCompleted() { console.log('onCompleted'); }
);

subject.onNext('Our message #1');
subject.onNext('Our message #2');

setTimeout(function() {
    subject.onCompleted();
}, 1000);

输出：

onNext: Our message #1
onNext: Our message #2
onNext: Interval message #0
onNext: Interval message #1
onNext: Interval message #2
onCompleted

在前面的示例中，我们创建了一个新的Subject和一个每秒发送一个整数的源Observable。然后我们给Subject订阅Observable。之后，我们订阅了一个Observer到Subject本身。 Subject本身现在表现为Observable。

接下来，我们使Subject发出自己的值（message1和message2）。在最终结果中，我们获取Subject自己的消息，然后从源Observable获取代理值。来自Observable的值后来因为它们是异步的，而我们立即使Subject的自己的值。请注意，即使我们告诉源Observable采用前五个值，输出也只显示前三个。那是因为在一秒之后我们在主题上调用onCompleted。这将完成对所有订阅的通知，并在这种情况下覆盖take操作符。

Subject类为创建更专业的Subject提供了基础。事实上，RxJS带有一些有趣的：AsyncSubject，ReplaySubject和BehaviorSubject。

AsyncSubject

仅当序列完成时，AsyncSubject才会仅发出序列的最后一个值。然后永远缓存此值，并且在发出值之后订阅的任何Observer将立即接收它。AsyncSubject便于返回单个值的异步操作，例如Ajax请求。

让我们看一个订阅range的AsyncSubject的简单示例：

spaceship_reactive/subjects.js

var delayedRange = Rx.Observable.range(0, 5).delay(1000);
var subject = new Rx.AsyncSubject();
delayedRange.subscribe(subject);
subject.subscribe(
    function onNext(item) { console.log('Value:', item); },
    function onError(err) { console.log('Error:', err); },
    function onCompleted() { console.log('Completed.'); }
);

在该示例中，delayedRange在延迟一秒之后发出值0到4。然后我们创建一个新的AsyncSubject主题并将其订阅到delayedRange。输出如下：

Value: 4
Completed.

按照预期，我们只得到Observer发出的最后一个值。现在让我们使用AsyncSubject来实现更真实的场景。我们将获取一些远程内容：

spaceship_reactive/subjects.js

function getProducts(url) {
    var subject;
    return Rx.Observable.create(function(observer) {
        if (!subject) {
            subject = new Rx.AsyncSubject();
            Rx.DOM.get(url).subscribe(subject);
        }
        return subject.subscribe(observer);
    });
}

var products = getProducts('/products');

// Will trigger request and receive the response when read
products.subscribe(
    function onNext(result) { console.log('Result 1:', result.response); },
    function onError(error) { console.log('ERROR', error); }
);

// Will receive the result immediately because it's cached
setTimeout(function() {
    products.subscribe(
        function onNext(result) { console.log('Result 2:', result.response); },
        function onError(error) { console.log('ERROR', error); }
    );
}, 5000)

在此代码中，当使用URL调用getProducts时，它将返回一个Observer，该Observer将发出HTTP GET请求的结果。以下是它如何分解：

getProducts返回一个Observable序列。我们在这里创建它。
如果我们还没有创建AsyncSubject，我们创建它并将订阅Rx.DOM.Request.get（url）返回的Observable。
我们将Observer订阅到AsyncSubject。每次Observer订阅Observable时，它实际上都会订阅AsyncSubject，它作为Observable检索URL和Observers之间的代理。
我们创建Observable来检索URL“products”并将其存储在products变量中。
这是第一个订阅，将启动URL检索并在检索URL时记录结果。
这是第二个订阅，在第一个订阅后运行五秒钟。由于此时已经检索到URL，因此不需要其他网络请求。它将立即收到请求的结果，因为它已存储在AsyncSubject中了。

有趣的是，我们正在使用一个订阅Rx.DOM.Request.get这个Observable的AsyncSubject。由于AsyncSubject缓存最后的结果，因此对产品的任何后续订阅都将立即收到结果，而不会导致其他网络请求。每当我们期望单个结果并希望保留它时，我们就可以使用AsyncSubject。

这是否意味着AsyncSubject像Promise一样？
确实。

AsyncSubject表示异步操作的结果，您可以将其用作promise的替代。内部的区别在于promise只会处理单个值，而AsyncSubject处理序列中的所有值，只会发送（和缓存）最后一个值。

能够如此轻松地模拟Promise显示了RxJS模型的灵活性。（即使没有AsyncSubject，使用Observables模拟一个承诺也很容易。）

BehaviorSubject

当Observer订阅BehaviorSubject时，它接收最后发出的值，然后接收所有后续值。BehaviorSubject要求我们提供一个起始值，以便所有Observers在订阅BehaviorSubject时始终会收到一个值。

想象一下，我们想要检索一个远程文件并在HTML页面上输出它的内容，但我们在等待内容时需要占位符文本。我们可以使用BehaviorSubject：

spaceship_reactive/behavior_subject.js

var subject = new Rx.BehaviorSubject('Waiting for content');
subject.subscribe(
    function(result) {
        document.body.textContent = result.response || result;
    },
    function(err) {
        document.body.textContent = 'There was an error retrieving content';
    }
);
Rx.DOM.get('/remote/content').subscribe(subject);

现在，HTML正文包含我们的占位符文本，它将保持这种状态，直到Subject发出新值。最后，我们请求我们想要的资源，并将我们的Subject订阅到生成的Observer。

BehaviorSubject保证始终至少发出一个值，因为我们在其构造函数中提供了一个默认值。一旦BehaviorSubject完成，它将不再发出任何值，释放缓存值使用的内存。

ReplaySubject

ReplaySubject缓存其值并将其重新发送到任何较晚的Observer。与AsyncSubject不同，不需要为此完成序列。

Subject

var subject = new Rx.Subject();

subject.onNext(1);
subject.subscribe(function(n) {         
    console.log('Received value:', n);
});
subject.onNext(2);
subject.onNext(3);

输出如下：

Received value: 2 
Received value: 3

ReplaySubject

var subject = new Rx.ReplaySubject();

subject.onNext(1);

subject.subscribe(function(n) {     
    console.log('Received value:', n);
});

subject.onNext(2);
subject.onNext(3);

输出如下：

Received value: 1
Received value: 2
Received value: 3

ReplaySubject有助于确保Observers从一开始就获取Observable发出的所有值。它使我们免于编写凌乱的代码来缓存以前的值，从而帮助我们减少了很多错误。

当然，要实现该行为，ReplaySubject会将所有值缓存在内存中。为了防止它占用太多内存，我们可以通过缓冲区大小限制它存储的数据量，或者通过将特定参数传递给构造函数来限制它。

ReplaySubject构造函数的第一个参数接受一个数字，表示我们要缓冲的值的数量：

var subject = new Rx.ReplaySubject(2); // Buffer size of 2

subject.onNext(1);
subject.onNext(2);
subject.onNext(3);

subject.subscribe(function(n) { 
    console.log('Received value:', n);
});

输出如下：

Received value: 2 
Received value: 3

第二个参数采用一个数字来表示我们想要缓冲值的时间（以毫秒为单位）：

var subject = new Rx.ReplaySubject(null, 200); // Buffer size of 200ms

setTimeout(function() { 
    subject.onNext(1); 
}, 100);

setTimeout(function() { 
    subject.onNext(2); 
}, 200); 

setTimeout(function() { 
    subject.onNext(3); 
}, 300); 

setTimeout(function() {
    subject.subscribe(function(n) { 
        console.log('Received value:', n);
    });
     subject.onNext(4);
}, 350);

在这个例子中，我们根据时间而不是值的数量设置缓冲区。我们的ReplaySubject将缓存最多200毫秒前发出的值。我们发出三个值，每个值相隔100毫秒，350毫秒后我们订阅一个Observer，然后我们发出另一个值。在订阅时，缓存的项目是2和3，因为1发生在很久以前（大约250毫秒前），所以它不再被缓存。

Subject是一个强大的工具，可以为您节省大量时间。它们为缓存和重复等常见场景提供了很好的解决方案。因为他们的核心只是观察者和观察者，所以你不需要学习任何新东西。

响应式的飞船

为了展示我们如何保持一个应用程序的纯粹，我们将构建一个视频游戏，其中我们的英雄将和无尽的敌人宇宙飞船战斗。我们将大量使用Observable管道，并且我会指出在可能很容易将状态存储在管道外的情况以及如何避免它。

众所周知，视频游戏会保留很多外部状态分数，字符，定时器等的屏幕坐标。我们的计划是在不依赖于保持状态的单个外部变量的情况下构建整个游戏。

在我们的游戏中，玩家将使用鼠标水平移动飞船，并通过单击鼠标或点击空格键进行射击。我们的游戏将有四个主要角色：背景中的移动星球场，玩家的宇宙飞船，敌人，以及来自玩家和敌人的子弹。

它看起来像这样：

在屏幕截图中，红色三角形是我们的宇宙飞船，绿色三角形是敌人。较小的三角形是子弹。

让我们从设置阶段开始; 这将是我们的HTML文件：

spaceship_reactive/spaceship.html



    
        
        Spaceship Reactive!

它只是一个简单的HTML文件，可以加载我们将在本章其余部分使用的JavaScript文件。在那个JavaScript文件中，我们首先设置一个canvas元素，我们将在其中渲染我们的游戏：