由于JSX是一種語(yǔ)法擴(kuò)展，我們需要一個(gè)編譯器將其轉(zhuǎn)換為最終的JavaScript代碼（它看起來(lái)非常像我們上一節(jié)中基于h的代碼）。 我們將使用Babel。 Babel是一個(gè)編譯器，它將現(xiàn)代JavaScript轉(zhuǎn)換為可在任何地方運(yùn)行的JavaScript。它還轉(zhuǎn)換了一些JavaScript擴(kuò)展，例如JSX，也就是之前的用例。

如果要使用JSX，則需要安裝Babel并在編譯項(xiàng)目時(shí)使用它。 幸運(yùn)的是，Babel有一個(gè)名為Babelify的Browserify適配器：

npm install babelify

在每個(gè)使用JSX的文件中，我們需要在文件頂部添加以下行：

/** @jsx hJSX */
var hJSX = CycleDOM.hJSX;

這告訴Babel使用Cycle.js的hJSX適配器來(lái)處理JSX，而不是使用默認(rèn)的React。

現(xiàn)在，當(dāng)我們想要編譯項(xiàng)目時(shí)，我們可以使用以下命令：

browserify index.js -t babelify --outfile bundle.js

我們需要一個(gè)函數(shù)來(lái)返回一個(gè)Observable of URL，它使用用戶輸入的搜索詞來(lái)查詢Wikipedia的API：

cycle/index.js

var MAIN_URL = "https://en.wikipedia.org"; 
var WIKI_URL = MAIN_URL + "/wiki/";
var API_URL = MAIN_URL + "/w/api.php?" +
"action=query&list=search&format=json&srsearch=";

function searchRequest(responses) {
    return responses.DOM.select(".search-field").events("input")
    .debounce(300)
    .map(function(e) { 
        return e.target.value 
        
    })
    .filter(function(value) { 
        return value.length > 2 
        
    }) 
    .map(function(search) { 
        return API_URL + search 
    });
}

首先，我們聲明一些我們的應(yīng)用程序?qū)⒂糜诓樵僕ikipedia的URL。 在函數(shù)searchRequest中，我們獲取包含應(yīng)用程序中所有驅(qū)動(dòng)程序的響應(yīng)對(duì)象，并在DOM驅(qū)動(dòng)程序中使用get方法。select（element）.event（type）的行為與fromEvent類(lèi)似：它采用DOM元素的選擇器和要監(jiān)聽(tīng)的事件類(lèi)型，并返回發(fā)出事件的Observable。

這時(shí)，代碼的其余部分看起來(lái)應(yīng)該非常熟悉，因?yàn)樗ㄟ^(guò)我們常用的運(yùn)算符轉(zhuǎn)換Observable值：

節(jié)流結(jié)果最多每300毫秒接收一個(gè)。

提取輸入框的值。

僅采用長(zhǎng)度超過(guò)兩個(gè)字符的文本。

將最終值附加到Wikipedia的API URL。

太棒了！ 到目前為止，我們有生成UI的功能和從該UI檢索用戶輸入的功能。我們現(xiàn)在需要添加將從維基百科獲取信息的功能。

你可能已經(jīng)在之前的代碼中注意到main函數(shù)接受了一個(gè)我們沒(méi)有使用的參數(shù)，responses。這些是來(lái)自run函數(shù)中的responses。驅(qū)動(dòng)程序和main函數(shù)形成一個(gè)循環(huán)（因此框架的名稱(chēng)）：main的輸出是驅(qū)動(dòng)程序的輸入，驅(qū)動(dòng)程序的輸出是main的輸入。請(qǐng)記住，輸入和輸出始終是Observables。

我們使用JSONP查詢Wikipedia，就像我們?cè)诘?章中所做的那樣。我們使用JSONP而不是HTTP來(lái)更容易在本地計(jì)算機(jī)上運(yùn)行此示例，因?yàn)槭褂肏TTP從不同的域檢索數(shù)據(jù)會(huì)導(dǎo)致某些瀏覽器因?yàn)榘踩蜃柚惯@些請(qǐng)求。 在幾乎任何其他情況下，尤其是在生產(chǎn)代碼中，使用HTTP來(lái)檢索遠(yuǎn)程數(shù)據(jù)。

無(wú)論如何，使用JSONP并不影響本章的要點(diǎn)。 Cycle有一個(gè)JSONP的實(shí)驗(yàn)?zāi)K，我們可以使用npm安裝它：

npm install @cycle/jsonp

然后我們?cè)谖覀兊膽?yīng)用中使用它，如下所示：

cycle/step2.js

var Cycle = require("@cycle/core");
var CycleDOM = require("@cycle/dom");
var CycleJSONP = require("@cycle/jsonp");
var Rx = Cycle.Rx; var h = CycleDOM.h;
function searchRequest(responses) {
    return responses.DOM.select(".search-field").events("input")
    .debounce(300)
    .map(function(e) { return e.target.value }) .filter(function(value) { 
        return value.length > 2 }) .map(function(search) { 
            return API_URL + search 
        });
}

function vtreeElements(results) { 
    return h("div", [
        h("h1", "Wikipedia Search "),
        h("input", {className: "search-field", attributes: {type: "text"}}), h("hr"),
        h("div", results.map(function(result) {
        return h("div", [
        h("a", { href: WIKI_URL + result.title }, result.title)
        ]); }))
    ]); 
}

function main(responses) { 
    return {
        DOM: Rx.Observable.just(CycleDOM.h("span", "Hey there!")), 
        JSONP: searchRequest(responses)
    }
}

var drivers = {
    DOM: CycleDOM.makeDOMDriver("#container"), JSONP: CycleJSONP.makeJSONPDriver()
};

Cycle.run(main, drivers);

我們希望將searchRequest的結(jié)果插入到JSONP方法中，這樣一旦用戶輸入搜索詞，我們就會(huì)用術(shù)語(yǔ)查詢Wikipedia。

為此，我們使用CycleJSONP.makeJSONPDriver創(chuàng)建一個(gè)新的JSONP，它將接收我們?cè)趍ain的返回對(duì)象中放置在屬性JSONP中的任何內(nèi)容。在這之后，當(dāng)我們?cè)谳斎肟蛑幸胨阉髟~時(shí)，我們應(yīng)該已經(jīng)在查詢維基百科，但由于我們沒(méi)有將JSONP輸出連接到任何內(nèi)容，我們?cè)陧?yè)面上看不到任何更改。 讓我們改變一下：

cycle/step3.js

function main(responses) {
    var vtree$ = responses.JSONP
    .filter(function(res$) {
        return res$.request.indexOf(API_URL) === 0;
    })
    .mergeAll() 
    .pluck("query", "search") 
    .startWith([]) 
    .map(vtreeElements);
    
    return {
        DOM: vtree$,
        JSONP: searchRequest(responses)
    }; 
}

main通過(guò)其響應(yīng)參數(shù)接收所有驅(qū)動(dòng)程序的輸出。我們可以在respond.JSONP中獲取JSON調(diào)用的結(jié)果，這是我們應(yīng)用程序中所有JSONP響應(yīng)的Observable。完成后，我們可以轉(zhuǎn)換Observable以我們想要的形式獲取搜索結(jié)果：

esponses.JSONP會(huì)在應(yīng)用程序中發(fā)出所有JSONP響應(yīng)。 我們首先在其請(qǐng)求中過(guò)濾包含Wikipedia的API URL的內(nèi)容，以確保我們正在處理相關(guān)的響應(yīng)。

respond.JSONP是一個(gè)Observable of Observables。 對(duì)于每個(gè)響應(yīng)，都有一個(gè)Observable。 在這一行中，我們將它們?nèi)空蛊剑虼宋覀儚默F(xiàn)在開(kāi)始處理響應(yīng)，而不是它們的Observables。

響應(yīng)是JSON對(duì)象，我們感興趣的信息在query.search屬性中。 我們使用pluck運(yùn)算符來(lái)提取它。

我們不知道我們是否會(huì)有任何結(jié)果，所以至少我們確保我們有一個(gè)空數(shù)組。

最后，我們將vtreeElements函數(shù)應(yīng)用于維基百科的每個(gè)結(jié)果。 這將更新我們的UI。

注意變量名稱(chēng)末尾的$符號(hào)。 在本章中，我采用了Cycle.js代碼中使用的命名約定，它將$添加到變量名稱(chēng)，表示它是一個(gè)Observable。 我發(fā)現(xiàn)它可以更容易理解基于Observable的代碼！

前面代碼中最重要的一點(diǎn)是，在最后一步中，我們似乎重新繪制了我們收到的每個(gè)結(jié)果的整個(gè)UI。 但這里是虛擬DOM閃耀的地方。 無(wú)論我們重新呈現(xiàn)頁(yè)面多少次，虛擬DOM將始終確保僅呈現(xiàn)差異，從而使其非常高效。 如果虛擬DOM沒(méi)有更改，則不會(huì)在頁(yè)面中呈現(xiàn)任何更改。

這樣我們就不必?fù)?dān)心添加或刪除元素了。 我們每次只渲染整個(gè)應(yīng)用程序，我們讓Virtual DOM找出實(shí)際更新的內(nèi)容。

我們用于構(gòu)建維基百科實(shí)時(shí)搜索的架構(gòu)方法不僅僅是另一個(gè)框架的編程UI方法。結(jié)構(gòu)化代碼背后有一個(gè)設(shè)計(jì)模式，就像我們做的那樣：Model-View-Intent（MVI）。

Model-View-Intent是一個(gè)由Cycle.js創(chuàng)建者AndréStaltz創(chuàng)建的術(shù)語(yǔ)，用于受模型 - 視圖 - 控制器（MVC）架構(gòu)啟發(fā)的體系結(jié)構(gòu).在MVC中，我們將應(yīng)用程序的功能分為三個(gè)部分： 模型，視圖和控制器。 在MVI中，三個(gè)組件是模型，視圖和意圖。 MVI旨在適應(yīng)像手套一樣的Reactive編程模型。

MVI是被動(dòng)的，意味著每個(gè)組件都會(huì)觀察其依賴關(guān)系并對(duì)依賴項(xiàng)的更改做出反應(yīng)。 這與MVC不同，MVC中的組件知道其依賴項(xiàng)并直接修改它們。 組件（C）聲明哪些其他組件影響它，而不是明確更新（C）的其他組件。

MVI中的三個(gè)組件由Observables表示，每個(gè)組件的輸出是另一個(gè)組件的輸入。

該模型表示當(dāng)前的應(yīng)用程序狀態(tài)。 它從intent中獲取已處理的用戶輸入，并輸出有關(guān)視圖消耗的數(shù)據(jù)更改的事件。

視圖是我們模型的直觀表示。 它采用具有模型狀態(tài)的Observable，并輸出所有潛在的DOM事件和頁(yè)面的虛擬樹(shù)。

意圖是MVI中的新組件。意圖從用戶獲取輸入并將其轉(zhuǎn)換為我們模型中的操作。如果我們重新調(diào)整和重命名我們的代碼，我們可以在我們的應(yīng)用程序中使這三種組件更清晰：

cycle/index-mvi.js

function intent(JSONP) {
    return JSONP.filter(function(res$) {
        return res$.request.indexOf(API_URL) === 0; 
    })
    .concatAll()
    .pluck("query", "search"); 
}

function model(actions) { 
    return actions.startWith([]);
}

function view(state) {
    return state.map(function(linkArray) {
        return h("div", [
            h("h1", "Wikipedia Search "),
            h("input", {className: "search-field", attributes: {type: "text"}}), h("hr"),
            h("div", linkArray.map(function(link) {
            return h("div", [
            h("a", { href: WIKI_URL + link.title }, link.title)
            ]); }))
        ]);
    });
}

function userIntent(DOM) {
    return DOM.select(".search-field")
    .events("input")
    .debounce(300)
    .map(function(e) { return e.target.value }) .filter(function(value) { 
        return value.length > 2 
    }) 
    .map(function(search) { 
        return API_URL + search 
    });
}

function main(responses) { 
    return {
        DOM: view(model(intent(responses.JSONP))),
        JSONP: userIntent(responses.DOM)
    };
}

Cycle.run(main, {
    DOM: CycleDOM.makeDOMDriver("#container"), JSONP: CycleJSONP.makeJSONPDriver()
});

通過(guò)將模型，視圖和意圖拆分為多帶帶的函數(shù)，我們使代碼更加清晰。 （另一個(gè)意圖，userIntent，是JSONP驅(qū)動(dòng)程序的輸入。）大多數(shù)應(yīng)用程序邏輯在我們傳遞給main函數(shù)中的DOM驅(qū)動(dòng)程序的屬性中表示為這三個(gè)函數(shù)的組合：

function main(responses) { 
    return {
        DOM: view(model(intent(responses.JSONP))),
        JSONP: userIntent(responses.DOM)
    };
}

它沒(méi)有那么多功能！

隨著我們制作更復(fù)雜的應(yīng)用程序，我們希望重用一些UI組件。 我們的維基百科搜索應(yīng)用程序很小，但是它已經(jīng)有一些可以在其他應(yīng)用程序中重用的組件。 以搜索輸入框?yàn)槔?我們絕對(duì)可以將它變成自己的小部件。

目標(biāo)是將我們的小部件封裝在自己的組件中，以便我們將其用作任何其他DOM元素。 我們還應(yīng)該能夠使用我們想要的任何屬性來(lái)參數(shù)化組件。 然后我們將在我們的應(yīng)用程序中使用它，如下所示：

var wpSearchBox = searchBox({ 
    props$: Rx.Observable.just({
        apiUrl: API_URL
    })
});

我們將使用Cycle.js引入的概念構(gòu)建我們的小部件，它將一個(gè)Observable事件作為輸入，并輸出一個(gè)Observable，其結(jié)果是將這些輸入應(yīng)用于其內(nèi)部邏輯。

讓我們開(kāi)始構(gòu)建搜索框組件。 我們首先創(chuàng)建一個(gè)函數(shù)，它接受一個(gè)響應(yīng)參數(shù)，我們將從主應(yīng)用程序傳遞任何我們想要的屬性：

cycle/searchbox.js

var Cycle = require("@cycle/core"); 
var CycleDOM = require("@cycle/dom"); 
var Rx = Cycle.Rx;
var h = CycleDOM.h;
var a;
function searchBox(responses) {
    var props$ = responses.props$;
    var apiUrl$ = props$.map(function (props) {
        return props["apiUrl"]; 
    }).first();
}

searchBox接收的每個(gè)參數(shù)都是一個(gè)Observable。 在這種情況下，props $是一個(gè)Observable，它發(fā)出一個(gè)包含Wikipedia搜索框配置參數(shù)的JavaScript對(duì)象。

檢索屬性后，我們?yōu)榇翱谛〔考x虛擬樹(shù)。 在我們的例子中，它只是一個(gè)非常簡(jiǎn)單的輸入字段：

cycle/searchbox.js

var vtree$ = Rx.Observable.just(
    h("div", { className: "search-field" }, [
        h("input", { type: "text" }) 
    ])
);

我們希望所有東西都是一個(gè)Observable，所以我們將虛擬樹(shù)包裝在一個(gè)Observable中，它只返回一個(gè)Observable，它發(fā)出我們傳遞它的值。

現(xiàn)在，只要用戶在輸入字段中鍵入搜索詞，我們就需要搜索框來(lái)查詢Wikipedia API。 我們重用上一節(jié)函數(shù)userIntent中的代碼：

cycle/searchbox.js

var searchQuery$ = apiUrl$.flatMap(function (apiUrl) {
    return responses.DOM.select(".search-field").events("input")
    .debounce(300)
    .map(function (e) { 
        return e.target.value; 
    })
    .filter(function (value) { 
        return value.length > 3; 
    })
    .map(function (searchTerm) { 
        return apiUrl + searchTerm; 
    });
});

我們?nèi)匀恍枰獙earchQuery的輸出連接到JSON驅(qū)動(dòng)程序的輸入。 我們就像在正常的Cycle應(yīng)用程序中那樣做：

cycle/searchbox.js

return {
    DOMTree: vtree$, 
    JSONPQuery: searchQuery$
};

最后，我們不應(yīng)該忘記導(dǎo)出搜索框小部件：

cycle/searchbox.js

module.exports = searchBox; // Export it as a module

現(xiàn)在我們已準(zhǔn)備好在您的應(yīng)用程序中使用搜索框小部件。 主要方法現(xiàn)在看起來(lái)像這樣：

cycle/index-mvi2.js

var h = CycleDOM.h;
? var SearchBox = require("./searchbox");

function main(responses) {
? var wpSearchBox = SearchBox({
        DOM: responses.DOM,
        props$: Rx.Observable.just({
            apiUrl: API_URL
        })
    });
    ? var searchDOM$ = wpSearchBox.DOMTree;
    var searchResults$ = responses.JSONP
    .filter(function(res$) {
        return res$.request.indexOf(API_URL) === 0;
    })
    .concatAll()
    .pluck("query", "search")
    .startWith([]);
    return {
        ? JSONP: wpSearchBox.JSONPQuery,
        ? DOM: Rx.Observable.combineLatest(
        searchDOM$, searchResults$, function(tree, links) {
            return h("div", [
                h("h1", "Wikipedia Search "),
                tree,
                h("hr"),
                h("div", links.map(function(link) {
                    return h("div", [
                            h("a", { href: WIKI_URL + link.title }, link.title)
                        ]);
                    }))
            ]);
        })
    };
}

Cycle.run(main, {
    DOM: CycleDOM.makeDOMDriver("#container"),
    JSONP: CycleJSONP.makeJSONPDriver()
});

現(xiàn)在我們將處理用戶輸入和呈現(xiàn)搜索框的責(zé)任委托給wpSearchBox小部件，我們可以在另一個(gè)需要查詢URL API的搜索框的應(yīng)用程序中輕松地重用該小部件。 這些是主要的變化：

導(dǎo)入我們剛剛創(chuàng)建的searchBox小部件。

創(chuàng)建一個(gè)SearchBox實(shí)例，傳遞DOM驅(qū)動(dòng)程序和我們想要搜索小部件的屬性。

我們的wpSearchBox最終將從其DOMTree Observable中發(fā)出項(xiàng)目。 我們?cè)谶@里分配它以便在我們渲染實(shí)際DOM時(shí)使用它們。

我們將Wikipedia查詢URL發(fā)送到JSONP驅(qū)動(dòng)程序，以便檢索其結(jié)果。 當(dāng)這些可用時(shí)，它將在response.JSONP中發(fā)出它們，我們?cè)趕earchResults中對(duì)它進(jìn)行了優(yōu)化。

為了渲染最終的DOM樹(shù)，我們使用combineLatest與searchDOM和searchResults。它們中的每一個(gè)都會(huì)導(dǎo)致布局發(fā)生變化，因此只要這兩個(gè)Observable中的一個(gè)發(fā)出一個(gè)項(xiàng)目，我們就會(huì)重新渲染DOM樹(shù)。

有了最終的代碼，我們可以看到Cycle.js的最大亮點(diǎn)。 框架中沒(méi)有不同的類(lèi)，特殊類(lèi)型或“魔術(shù)”。 這是所有無(wú)副作用的函數(shù)，它們接受Observable并輸出更多的Observable。 只有這樣，我們才有一個(gè)簡(jiǎn)潔的Web應(yīng)用程序框架，清晰，反應(yīng)靈敏，使用起來(lái)很有趣。 它不惜一切代價(jià)避免副作用，使我們的Web應(yīng)用程序更加健壯。

除了迫切需要更好的圖形設(shè)計(jì)外，我們的應(yīng)用程序可以使用一些功能，而不僅僅是快速重定向到維基百科的結(jié)果：

讓用戶為特定結(jié)果添加書(shū)簽。 您可以在列表中的每個(gè)結(jié)果旁邊添加一個(gè)小星星，這樣當(dāng)用戶點(diǎn)擊時(shí)，它會(huì)將該結(jié)果保存為收藏夾。 你可以將星星變成自己的小部件。 如果您使用某些持久性API（反應(yīng)性?。?，例如本地存儲(chǔ)或IndexedDB，則需要額外的分?jǐn)?shù)。

如果用戶單擊鏈接，則在屏幕右側(cè)顯示結(jié)果的“預(yù)覽”，其中包含概要及其相關(guān)元信息。 如果用戶想要查看實(shí)際的Wikipedia結(jié)果，則可以在其中包含“閱讀更多”鏈接。 將其實(shí)現(xiàn)為小部件。

現(xiàn)在您知道如何開(kāi)發(fā)使用現(xiàn)代技術(shù)的Web應(yīng)用程序而不放棄響應(yīng)性理念。 本章提供了如何使用Observables和RxJS作為其他框架或應(yīng)用程序的內(nèi)部引擎的想法。 通過(guò)站在Observables的肩膀和活躍的生活方式，我們可以極大地簡(jiǎn)化Web應(yīng)用程序并將狀態(tài)降低到最小的表達(dá)，使我們的Web應(yīng)用程序不那么脆弱和易于維護(hù)。

感謝您閱讀本書(shū)。 我希望它能幫助您重新思考開(kāi)發(fā)JavaScript應(yīng)用程序的方式，并挑戰(zhàn)一些有關(guān)編程的現(xiàn)有概念。 這是快速，強(qiáng)大和反應(yīng)性的軟件！

關(guān)注我的微信公眾號(hào)，更多優(yōu)質(zhì)文章定時(shí)推送