由于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应用程序的方式，并挑战一些有关编程的现有概念。 这是快速，强大和反应性的软件！

关注我的微信公众号，更多优质文章定时推送