JavaScript 的異步編程特性，既是福音，也可能是詛咒，因?yàn)樗鼤?huì)導(dǎo)致“回調(diào)地獄”。雖然 Async.js 等實(shí)用程序庫(kù)可以幫助組織異步代碼，但有效跟蹤控制流並推斷異步代碼的邏輯仍然很困難。

本文將介紹響應(yīng)式編程的概念，它利用 Bacon.js 等庫(kù)來(lái)處理 JavaScript 的異步特性。

關(guān)鍵要點(diǎn)

• 響應(yīng)式編程處理異步數(shù)據(jù)流，有助於管理 JavaScript 的異步特性並避免“回調(diào)地獄”。 Bacon.js 等庫(kù)可用於實(shí)現(xiàn)此概念。
• Bacon.js 是一款響應(yīng)式編程庫(kù)，可用於創(chuàng)建吃豆人遊戲的版本。該庫(kù)允許更好的錯(cuò)誤處理和組合數(shù)據(jù)流的能力，提供極大的控制和靈活性。
• 在 Bacon.js 中可以創(chuàng)建和操作事件流或可觀察對(duì)象?？梢杂嗛嗊@些流，從而異步觀察事件。這可以用於處理諸如吃豆人遊戲中的用戶(hù)輸入、遊戲邏輯和渲染等。
• Bacon.js 還包含 Bacon.Property，這是一種響應(yīng)式屬性，可以在發(fā)生更改時(shí)做出反應(yīng)並自行更新。這可以用來(lái)管理遊戲狀態(tài)的變化。

開(kāi)始響應(yīng)式編程

響應(yīng)式編程處理的是異步數(shù)據(jù)流。它用可觀察模式取代了迭代器模式。這與命令式編程不同，在命令式編程中，您主動(dòng)迭代數(shù)據(jù)來(lái)處理事務(wù)。在響應(yīng)式編程中，您訂閱數(shù)據(jù)並異步響應(yīng)事件。

Bart De Smet 在他的演講中解釋了這種轉(zhuǎn)變。 André Staltz 在這篇文章中深入探討了響應(yīng)式編程。

一旦您開(kāi)始使用響應(yīng)式編程，一切都會(huì)變成異步數(shù)據(jù)流：服務(wù)器上的數(shù)據(jù)庫(kù)、鼠標(biāo)事件、Promise 和服務(wù)器請(qǐng)求。這使您可以避免所謂的“回調(diào)地獄”，並提供更好的錯(cuò)誤處理。這種方法的另一個(gè)強(qiáng)大功能是能夠組合數(shù)據(jù)流，這為您提供了極大的控制和靈活性。 Jafar Husain 在他的演講中解釋了這些概念。

Bacon.js 是一個(gè)響應(yīng)式編程庫(kù)，它是 RxJS 的替代方案。在接下來(lái)的部分中，我們將使用 Bacon.js 來(lái)構(gòu)建一個(gè)廣為人知的“吃豆人”遊戲的版本。

項(xiàng)目設(shè)置

要安裝 Bacon.js，您可以使用 Bower，在 CLI 上運(yùn)行以下命令：

$ bower install bacon

安裝庫(kù)後，您就可以開(kāi)始使用響應(yīng)式編程了。

吃豆人遊戲 API 和 UnicodeTiles.js

為了外觀和感覺(jué)，我將使用基於文本的系統(tǒng)，這樣我就不必處理資源和精靈。為了避免自己創(chuàng)建，我將使用一個(gè)很棒的庫(kù) UnicodeTiles.js。

首先，我創(chuàng)建了一個(gè)名為 PacmanGame 的類(lèi)，它處理遊戲邏輯。它提供以下方法：

• PacmanGame(parent)：創(chuàng)建一個(gè)吃豆人遊戲?qū)ο?/li>
• start()：?jiǎn)?dòng)遊戲
• tick()：更新遊戲邏輯，渲染遊戲
• spawnGhost(color)：生成一個(gè)新的幽靈
• updateGhosts()：更新遊戲中每個(gè)幽靈
• movePacman(p1V)：按指定方向移動(dòng)吃豆人

此外，它還公開(kāi)了以下回調(diào)：

• onPacmanMove(moveV)：如果存在，則在用戶(hù)按下按鍵請(qǐng)求吃豆人移動(dòng)時(shí)調(diào)用

因此，要使用此 API，我們將啟動(dòng)遊戲，定期調(diào)用 spawnGhost 來(lái)生成幽靈，偵聽(tīng) onPacmanMove 回調(diào)，並且每當(dāng)發(fā)生這種情況時(shí)，調(diào)用 movePacman 來(lái)實(shí)際移動(dòng)吃豆人。我們還定期調(diào)用 updateGhosts 來(lái)更新幽靈的移動(dòng)。最後，我們定期調(diào)用 tick 來(lái)更新更改。重要的是，我們將使用 Bacon.js 來(lái)幫助我們處理事件。

在開(kāi)始之前，讓我們創(chuàng)建遊戲?qū)ο螅?/p>

$ bower install bacon

我們創(chuàng)建一個(gè)新的 PacmanGame，並傳入一個(gè)父 DOM 對(duì)象 parentDiv，遊戲?qū)⒃诖藢?duì)像中渲染?，F(xiàn)在我們準(zhǔn)備構(gòu)建我們的遊戲了。

事件流或可觀察對(duì)象

事件流 是一個(gè)可觀察對(duì)象，您可以訂閱它以異步觀察事件。您可以使用以下三種方法觀察這三種類(lèi)型的事件：

• observable.onValue(f)：偵聽(tīng)值事件，這是處理事件最簡(jiǎn)單的方法。
• observable.onError(f)：偵聽(tīng)錯(cuò)誤事件，用於處理流中的錯(cuò)誤。
• observable.onEnd(f)：偵聽(tīng)流已結(jié)束的事件，並且將不再有移動(dòng)值可用。

創(chuàng)建流

既然我們已經(jīng)了解了事件流的基本用法，那麼讓我們看看如何創(chuàng)建一個(gè)事件流。 Bacon.js 提供了幾種方法，您可以使用這些方法從 jQuery 事件、Ajax Promise、DOM EventTarget、簡(jiǎn)單的回調(diào)甚至數(shù)組創(chuàng)建事件流。

關(guān)於事件流的另一個(gè)有用的概念是時(shí)間概念。也就是說(shuō)，事件可能會(huì)在未來(lái)的某個(gè)時(shí)間到來(lái)。例如，這些方法創(chuàng)建在某個(gè)時(shí)間間隔內(nèi)傳遞事件的事件流：

• Bacon.interval(interval, value)：以給定的間隔無(wú)限重複該值。
• Bacon.repeatedly(interval, values)：以給定的間隔無(wú)限重複這些值。
• Bacon.later(delay, value)：在給定的延遲後生成值。

為了獲得更多控制，您可以使用 Bacon.fromBinder() 來(lái)創(chuàng)建自己的事件流。我們將在遊戲中通過(guò)創(chuàng)建一個(gè) moveStream 變量來(lái)展示這一點(diǎn)，該變量將為我們的吃豆人移動(dòng)生成事件。

var game = new PacmanGame(parentDiv);

我們可以使用一個(gè)值來(lái)調(diào)用 sink，該值將發(fā)送一個(gè)事件，觀察者可以偵聽(tīng)該事件。對(duì) sink 的調(diào)用在我們 onPacmanMove 回調(diào)中——也就是說(shuō)，每當(dāng)用戶(hù)按下按鍵請(qǐng)求吃豆人移動(dòng)時(shí)。因此，我們創(chuàng)建了一個(gè)可觀察對(duì)象，它發(fā)出關(guān)於吃豆人移動(dòng)請(qǐng)求的事件。

請(qǐng)注意，我們使用一個(gè)簡(jiǎn)單值 moveV 調(diào)用了 sink。這將使用值 moveV 推送移動(dòng)事件。我們還可以推送諸如 Bacon.Error 或 Bacon.End 之類(lèi)的事件。

讓我們創(chuàng)建另一個(gè)事件流。這次我們想要發(fā)出通知以生成幽靈的事件。我們將為此創(chuàng)建一個(gè) spawnStream 變量：

$ bower install bacon

Bacon.sequentially() 創(chuàng)建一個(gè)流，該流以給定的間隔傳遞值。在我們的例子中，它將每 800 毫秒傳遞一個(gè)幽靈顏色。我們還有一個(gè)對(duì) delay() 方法的調(diào)用。它延遲了流，因此事件將在 2.5 秒的延遲後開(kāi)始發(fā)出。

事件流上的方法和大理石圖

在本節(jié)中，我將列出一些更實(shí)用的方法，這些方法可用於事件流：

• observable.map(f)：映射值並返回一個(gè)新的事件流。
• observable.filter(f)：使用給定的謂詞過(guò)濾值。
• observable.takeWhile(f)：在給定的謂詞為真時(shí)獲取。
• observable.skip(n)：跳過(guò)流中的前 n 個(gè)元素。
• observable.throttle(delay)：通過(guò)某個(gè)延遲來(lái)節(jié)流流。
• observable.debounce(delay)：通過(guò)某個(gè)延遲來(lái)去抖動(dòng)流。
• observable.scan(seed, f) 使用給定的種子值和累加器函數(shù)掃描流。這將流簡(jiǎn)化為單個(gè)值。

有關(guān)事件流的更多方法，請(qǐng)參閱官方文檔頁(yè)面?？梢允褂么罄硎瘓D查看節(jié)流和去抖動(dòng)之間的區(qū)別：

var game = new PacmanGame(parentDiv);

如您所見(jiàn)，節(jié)流按慣例節(jié)流事件，而去抖動(dòng)僅在給定的“靜默期”後才發(fā)出事件。

這些實(shí)用程序方法簡(jiǎn)單而強(qiáng)大，能夠概念化和控制流，從而控制其中的數(shù)據(jù)。我建議觀看這段關(guān)於 Netflix 如何使用這些簡(jiǎn)單方法創(chuàng)建自動(dòng)完成框的演講。

觀察事件流

到目前為止，我們已經(jīng)創(chuàng)建和操作了事件流，現(xiàn)在我們將通過(guò)訂閱流來(lái)觀察事件。

回顧一下我們之前創(chuàng)建的 moveStream 和 spawnStream?，F(xiàn)在讓我們訂閱它們：

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

儘管您可以使用 stream.subscribe() 來(lái)訂閱流，但您也可以使用 stream.onValue()。不同之處在於，subscribe 將發(fā)出我們之前看到的這三種類(lèi)型的事件，而 onValue 僅發(fā)出 Bacon.Next 類(lèi)型的事件。也就是說(shuō)，它將忽略 Bacon.Error 和 Bacon.End 事件。

當(dāng) spawnStream 上出現(xiàn)事件時(shí)（每 800 毫秒發(fā)生一次），其值將是幽靈顏色之一，我們使用該顏色來(lái)生成幽靈。當(dāng) moveStream 上出現(xiàn)事件時(shí)，請(qǐng)記住，當(dāng)用戶(hù)按下按鍵來(lái)移動(dòng)吃豆人時(shí)，就會(huì)發(fā)生這種情況。我們使用方向 moveV 調(diào)用 game.movePacman：它隨事件一起出現(xiàn)，因此吃豆人會(huì)移動(dòng)。

組合事件流和 Bacon.Bus

您可以組合事件流以創(chuàng)建其他流。組合事件流的方法有很多，這裡列出其中幾種：

• Bacon.combineAsArray(streams)：組合事件流，以便結(jié)果流的值為值的數(shù)組。
• Bacon.zipAsArray(streams)：將流壓縮成一個(gè)新的流。每個(gè)流的事件成對(duì)組合。
• Bacon.combineTemplate(template)：使用模闆對(duì)象組合事件流。

讓我們來(lái)看一個(gè) Bacon.combineTemplate 的例子：

$ bower install bacon

如您所見(jiàn)，我們使用模板將事件流（即 password、username、firstname 和 lastname）組合成一個(gè)名為 loginInfo 的組合事件流。每當(dāng)事件流接收到事件時(shí)，loginInfo 流都會(huì)發(fā)出事件，將所有其他模板組合成單個(gè)模闆對(duì)象。

Bacon.js 還有一種組合流的方法，即 Bacon.Bus()。 Bacon.Bus() 是一個(gè)事件流，允許您將值推入流中。它還允許將其他流插入 Bus 中。我們將使用它來(lái)構(gòu)建遊戲的最後一部分：

var game = new PacmanGame(parentDiv);

現(xiàn)在我們使用 Bacon.interval 創(chuàng)建另一個(gè)流——ghostStream。此流將每 1 秒發(fā)出 0。這次我們訂閱它並調(diào)用 game.updateGhosts 來(lái)移動(dòng)幽靈。這是為了每 1 秒移動(dòng)一次幽靈。請(qǐng)注意已註釋掉 game.tick，並記住 moveStream 中的其他 game.tick？這兩個(gè)流都會(huì)更新遊戲，最後調(diào)用game.tick 來(lái)渲染更改，因此，與其在每個(gè)流中調(diào)用game.tick，我們可以生成第三個(gè)流——這兩個(gè)流的組合——並在組合流中調(diào)用game.tick。

為了組合流，我們可以使用 Bacon.Bus。這是我們遊戲中最終的事件流，我們稱(chēng)之為 combinedTickStream。然後我們將 moveStream 和 ghostStream 插入其中，最後訂閱它並在其中調(diào)用 game.tick。

就是這樣，我們完成了。唯一剩下的就是使用 game.start(); 啟動(dòng)遊戲。

Bacon.Property 和更多示例

Bacon.Property 是一種響應(yīng)式屬性。想像一下，一個(gè)響應(yīng)式屬性是一個(gè)數(shù)組的總和。當(dāng)我們向數(shù)組添加一個(gè)元素時(shí)，響應(yīng)式屬性將做出反應(yīng)並自行更新。要使用 Bacon.Property，您可以訂閱它並偵聽(tīng)更改，或者使用 property.assign(obj, method) 方法，該方法在屬性更改時(shí)調(diào)用給定對(duì)象的方法。這是一個(gè)如何使用 Bacon.Property 的示例：

var moveStream = Bacon.fromBinder(function(sink) {
   game.onPacmanMove = function(moveV) {
      sink(moveV);
   };
});

首先，我們創(chuàng)建一個(gè)事件流，該流以 1 秒的間隔生成給定數(shù)組的值——1、2、3 和 4，然後我們創(chuàng)建一個(gè)響應(yīng)式屬性，它是掃描結(jié)果。這將為 reactiveValue 分配 1、3、6 和 10 的值。

了解更多信息和實(shí)時(shí)演示

在本文中，我們通過(guò)構(gòu)建吃豆人遊戲介紹了使用 Bacon.js 進(jìn)行響應(yīng)式編程。它簡(jiǎn)化了我們的遊戲設(shè)計(jì)，並通過(guò)事件流的概念為我們提供了更多控制和靈活性。完整的源代碼可在 GitHub 上找到，實(shí)時(shí)演示可在此處找到。

以下是一些更有用的鏈接：

• Bacon.js API 參考
• Bacon.js 的視頻介紹
• RxJS 網(wǎng)站
• Highland.js 高級(jí)流庫(kù)
• Bodil Stokke 編寫(xiě)的《面向有見(jiàn)識(shí)的嬉皮士的響應(yīng)式遊戲編程》

關(guān)於使用 Bacon.js 構(gòu)建吃豆人的常見(jiàn)問(wèn)題解答 (FAQ)

我如何開(kāi)始使用 Bacon.js 構(gòu)建自己的吃豆人遊戲？

要開(kāi)始使用 Bacon.js 構(gòu)建自己的吃豆人遊戲，您首先需要了解 JavaScript 和函數(shù)式響應(yīng)式編程 (FRP) 的基礎(chǔ)知識(shí)。掌握這些知識(shí)後，您可以開(kāi)始設(shè)置開(kāi)發(fā)環(huán)境。您需要在計(jì)算機(jī)上安裝 Node.js 和 npm（Node 包管理器）。之後，您可以使用 npm 安裝 Bacon.js。設(shè)置好所有內(nèi)容後，您可以開(kāi)始編寫(xiě)遊戲代碼。您可以按照我們網(wǎng)站上的教程獲取有關(guān)如何使用 Bacon.js 構(gòu)建吃豆人遊戲的逐步指南。

Bacon.js 在構(gòu)建吃豆人遊戲中的作用是什麼？

Bacon.js 是一個(gè)用於 JavaScript 的函數(shù)式響應(yīng)式編程 (FRP) 庫(kù)。它允許您以更易於管理和閱讀的方式處理異步事件，例如用戶(hù)輸入。在構(gòu)建吃豆人遊戲的過(guò)程中，Bacon.js 可用於處理用戶(hù)輸入（例如鍵盤(pán)事件）、遊戲邏輯（例如吃豆人和幽靈的移動(dòng)）以及將游戲狀態(tài)渲染到屏幕上。

我可以自定義使用 Bacon.js 構(gòu)建的吃豆人遊戲嗎？

當(dāng)然可以！使用 Bacon.js 構(gòu)建基本吃豆人遊戲後，您可以根據(jù)自己的喜好進(jìn)行自定義。您可以更改遊戲的視覺(jué)效果、添加新功能，甚至修改遊戲的規(guī)則?？赡苄允菬o(wú)限的，最好的部分是，您可以在仍然受益於 Bacon.js 和函數(shù)式響應(yīng)式編程的強(qiáng)大功能和簡(jiǎn)單性的同時(shí)做到這一切。

我如何調(diào)試使用 Bacon.js 構(gòu)建的吃豆人遊戲？

調(diào)試使用 Bacon.js 構(gòu)建的吃豆人遊戲類(lèi)似於調(diào)試任何其他 JavaScript 應(yīng)用程序。您可以使用瀏覽器的開(kāi)發(fā)者工具來(lái)檢查代碼、設(shè)置斷點(diǎn)和單步執(zhí)行代碼。此外，Bacon.js 提供了一種名為“onError”的方法，您可以使用它來(lái)處理事件流中的錯(cuò)誤。

我如何優(yōu)化使用 Bacon.js 構(gòu)建的吃豆人遊戲的性能？

有幾種方法可以?xún)?yōu)化使用 Bacon.js 構(gòu)建的吃豆人遊戲的性能。一種方法是最小化 DOM 更新的數(shù)量。您可以使用 Bacon.js 的“combineTemplate”函數(shù)將多個(gè)流組合成一個(gè)更新 DOM 的單個(gè)流來(lái)實(shí)現(xiàn)此目的。另一種方法是使用“flatMap”函數(shù)來(lái)避免創(chuàng)建不必要的流。

我可以使用 Bacon.js 構(gòu)建其他類(lèi)型的遊戲嗎？

是的，您可以使用 Bacon.js 構(gòu)建任何需要處理異步事件的遊戲類(lèi)型。這不僅包括像吃豆人這樣的經(jīng)典街機(jī)遊戲，還包括更複雜的遊戲，例如實(shí)時(shí)戰(zhàn)略遊戲或多人在線(xiàn)遊戲。

我如何向使用 Bacon.js 構(gòu)建的吃豆人遊戲中添加多人遊戲功能？

向使用 Bacon.js 構(gòu)建的吃豆人遊戲中添加多人遊戲功能需要一個(gè)服務(wù)器來(lái)處理玩家之間的通信。您可以為此使用 Node.js 和 WebSockets。在客戶(hù)端，您將使用 Bacon.js 來(lái)處理傳入和傳出的 WebSocket 消息。

我可以將使用 Bacon.js 構(gòu)建的吃豆人遊戲部署到網(wǎng)站上嗎？

是的，您可以將使用 Bacon.js 構(gòu)建的吃豆人遊戲部署到網(wǎng)站上。您需要使用 Webpack 或 Browserify 等工具捆綁您的 JavaScript 代碼，然後您可以將捆綁的代碼和遊戲的資源（例如圖像和聲音）託管在 Web 服務(wù)器上。

我可以將 Bacon.js 與其他 JavaScript 庫(kù)或框架一起使用嗎？

是的，您可以將 Bacon.js 與其他 JavaScript 庫(kù)或框架一起使用。 Bacon.js 是一個(gè)獨(dú)立的庫(kù)，因此它不依賴(lài)於其他庫(kù)或框架。但是，它可以與其他庫(kù)或框架結(jié)合使用以構(gòu)建更複雜的應(yīng)用程序。

我在哪裡可以學(xué)習(xí)更多關(guān)於函數(shù)式響應(yīng)式編程 (FRP) 和 Bacon.js 的知識(shí)？

網(wǎng)上有很多資源可以學(xué)習(xí)函數(shù)式響應(yīng)式編程 (FRP) 和 Bacon.js。您可以從官方 Bacon.js 文檔開(kāi)始，該文檔提供了對(duì)該庫(kù)的功能和 API 的全面指南。還有許多教程、博客文章和在線(xiàn)課程更詳細(xì)地介紹了 FRP 和 Bacon.js。

以上是用Bacon.js建立Pacman遊戲的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！