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

如果要使用JSX，則需要安裝Babel并在編譯項目時使用它。 幸運的是，Babel有一個名為Babelify的Browserify適配器：

npm install babelify

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

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

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

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

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

我們需要一個函數(shù)來返回一個Observable of URL，它使用用戶輸入的搜索詞來查詢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ū)動程序的響應(yīng)對象，并在DOM驅(qū)動程序中使用get方法。select（element）.event（type）的行為與fromEvent類似：它采用DOM元素的選擇器和要監(jiān)聽的事件類型，并返回發(fā)出事件的Observable。

這時，代碼的其余部分看起來應(yīng)該非常熟悉，因為它包含通過我們常用的運算符轉(zhuǎn)換Observable值：

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

提取輸入框的值。

僅采用長度超過兩個字符的文本。

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

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

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

我們使用JSONP查詢Wikipedia，就像我們在第2章中所做的那樣。我們使用JSONP而不是HTTP來更容易在本地計算機上運行此示例，因為使用HTTP從不同的域檢索數(shù)據(jù)會導(dǎo)致某些瀏覽器因為安全原因阻止這些請求。 在幾乎任何其他情況下，尤其是在生產(chǎn)代碼中，使用HTTP來檢索遠(yuǎn)程數(shù)據(jù)。

無論如何，使用JSONP并不影響本章的要點。 Cycle有一個JSONP的實驗?zāi)K，我們可以使用npm安裝它：

npm install @cycle/jsonp

然后我們在我們的應(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方法中，這樣一旦用戶輸入搜索詞，我們就會用術(shù)語查詢Wikipedia。

為此，我們使用CycleJSONP.makeJSONPDriver創(chuàng)建一個新的JSONP，它將接收我們在main的返回對象中放置在屬性JSONP中的任何內(nèi)容。在這之后，當(dāng)我們在輸入框中引入搜索詞時，我們應(yīng)該已經(jīng)在查詢維基百科，但由于我們沒有將JSONP輸出連接到任何內(nèi)容，我們在頁面上看不到任何更改。 讓我們改變一下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

意圖是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()
});

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

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

它沒有那么多功能！

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

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

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

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

讓我們開始構(gòu)建搜索框組件。 我們首先創(chuàng)建一個函數(shù)，它接受一個響應(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接收的每個參數(shù)都是一個Observable。 在這種情況下，props $是一個Observable，它發(fā)出一個包含Wikipedia搜索框配置參數(shù)的JavaScript對象。

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

cycle/searchbox.js

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

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

現(xiàn)在，只要用戶在輸入字段中鍵入搜索詞，我們就需要搜索框來查詢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ū)動程序的輸入。 我們就像在正常的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)在看起來像這樣：

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小部件，我們可以在另一個需要查詢URL API的搜索框的應(yīng)用程序中輕松地重用該小部件。 這些是主要的變化：

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

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

我們的wpSearchBox最終將從其DOMTree Observable中發(fā)出項目。 我們在這里分配它以便在我們渲染實際DOM時使用它們。

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

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

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

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

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

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

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

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

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