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

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

npm install babelify

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

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

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

現在，當我們想要編譯項目時，我們可以使用以下命令：

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

我們需要一個函數來返回一個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 
    });
}

首先，我們聲明一些我們的應用程序將用于查詢Wikipedia的URL。 在函數searchRequest中，我們獲取包含應用程序中所有驅動程序的響應對象，并在DOM驅動程序中使用get方法。select（element）.event（type）的行為與fromEvent類似：它采用DOM元素的選擇器和要監聽的事件類型，并返回發出事件的Observable。

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

節流結果最多每300毫秒接收一個。

提取輸入框的值。

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

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

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

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

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

無論如何，使用JSONP并不影響本章的要點。 Cycle有一個JSONP的實驗模塊，我們可以使用npm安裝它：

npm install @cycle/jsonp

然后我們在我們的應用中使用它，如下所示：

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的結果插入到JSONP方法中，這樣一旦用戶輸入搜索詞，我們就會用術語查詢Wikipedia。

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

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通過其響應參數接收所有驅動程序的輸出。我們可以在respond.JSONP中獲取JSON調用的結果，這是我們應用程序中所有JSONP響應的Observable。完成后，我們可以轉換Observable以我們想要的形式獲取搜索結果：

esponses.JSONP會在應用程序中發出所有JSONP響應。 我們首先在其請求中過濾包含Wikipedia的API URL的內容，以確保我們正在處理相關的響應。

respond.JSONP是一個Observable of Observables。 對于每個響應，都有一個Observable。 在這一行中，我們將它們全部展平，因此我們從現在開始處理響應，而不是它們的Observables。

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

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

最后，我們將vtreeElements函數應用于維基百科的每個結果。 這將更新我們的UI。

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

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

這樣我們就不必擔心添加或刪除元素了。 我們每次只渲染整個應用程序，我們讓Virtual DOM找出實際更新的內容。

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

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

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

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

該模型表示當前的應用程序狀態。 它從intent中獲取已處理的用戶輸入，并輸出有關視圖消耗的數據更改的事件。

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

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

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

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

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

它沒有那么多功能！

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

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

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

我們將使用Cycle.js引入的概念構建我們的小部件，它將一個Observable事件作為輸入，并輸出一個Observable，其結果是將這些輸入應用于其內部邏輯。

讓我們開始構建搜索框組件。 我們首先創建一個函數，它接受一個響應參數，我們將從主應用程序傳遞任何我們想要的屬性：

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接收的每個參數都是一個Observable。 在這種情況下，props $是一個Observable，它發出一個包含Wikipedia搜索框配置參數的JavaScript對象。

檢索屬性后，我們為窗口小部件定義虛擬樹。 在我們的例子中，它只是一個非常簡單的輸入字段：

cycle/searchbox.js

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

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

現在，只要用戶在輸入字段中鍵入搜索詞，我們就需要搜索框來查詢Wikipedia API。 我們重用上一節函數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; 
    });
});

我們仍然需要將searchQuery的輸出連接到JSON驅動程序的輸入。 我們就像在正常的Cycle應用程序中那樣做：

cycle/searchbox.js

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

最后，我們不應該忘記導出搜索框小部件：

cycle/searchbox.js

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

現在我們已準備好在您的應用程序中使用搜索框小部件。 主要方法現在看起來像這樣：

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

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

導入我們剛剛創建的searchBox小部件。

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

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

我們將Wikipedia查詢URL發送到JSONP驅動程序，以便檢索其結果。 當這些可用時，它將在response.JSONP中發出它們，我們在searchResults中對它進行了優化。

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

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

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

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

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

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

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

關注我的微信公眾號，更多優質文章定時推送