RxJS入门（10）----使用Cycle.js的响应式web应用程序

最新推荐文章于 2024-05-10 10:01:57 发布

tianjun2012

最新推荐文章于 2024-05-10 10:01:57 发布

阅读量3k

点赞数 1

分类专栏： rxjs 文章标签： rxjs

本文链接：https://blog.csdn.net/tianjun2012/article/details/51372958

版权

rxjs 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

伴随着single-page apps的出现，网站突然被期望坐更多，甚至要和“native”apps进行比较。为了是web应用程序更快，开发者们意识到某些领域的瓶颈：让web应用程序像它们的本地副本一样快和稳定。
Facebook的React是开拓者，伴随着使用这个新技术的若干框架的出现，在保持diamante简单和明了的情况下，web应用程序越来越快。
在本章中，我们将使用一些新技术来开发web应用程序，例如虚拟的DOM。我们将使用Cycle.js,一个内部使用RxJs的简单漂亮的模型，并用到响应式编程的概念到前端的编码中。

Cycle.js

Cycle.js是一个在Rxjs之上创建用户应答接口的小型框架。它提供了类似React的流行框架的特点，如虚拟DOM和单向数据流。
Cycle.js是在 reactive方式设计的， Cycle.js所有的建立的块都是Observable，它给我们巨大的优势。比起其他框架，它很容易学习，因为它只有很少的概念需要去理解和记忆。例如，调用drivers封装所有状态操作，并且我们很少需要去创建一个新的。

What’s the Virtual DOM?

DOM定义了html文档中元素数的结构。每个HTML元素都是DOM中的一个节点。每个节点都可以通过node上的方法手工操作。
DOM最初创建代表了静态的文档，而不是我们今天所看到的动态网站。结果，当频繁的操作DOM树元素时这种设计不会有很好的性能。这就是为什么当我们对DOM进行改变的时候，DOM有性能上的hit。
JavaScript中的虚拟DOM是DOM的一个代理。每次改变组件的状态时，我们重新为这个组件计算虚拟的DOM树并和之前的比较。如果有不同，仅仅重新渲染这些不同。这种方式很快，是由于JavaScript比较对象很快并且我们是必要的改变到真实的DOM上。
这种方式意味着我们可以给每个改变写代码就像生成所有的app UI。我们不需要去委会DOM的状态。并且，Cycle.js将会检查时候每个更新是否有不同，高效地渲染我们的app。

Installing Cycle.js

我们可以在html标签< script >< / script >”中使用Cycle.js。但是这不是使用Cycle.js的最好途径，因为它是以极端模块化的方式设计的。每个模块都要尝试着自给自足，
像scripts中包含若干模块可能会导致大量重复的代码，以前我们程序的不必要下载和长时间的启动。
我们将使用Node的打包管理器，npm，并为我们的最终脚本生成相关的代码。首先，我们创建一个新的文件夹，它将会是我们程序目录并安装程序依赖。
》
mkdir wikipedia-search && cd wikipedia-search
npm install browserify
npm install @cycle/core
npm install @cycle/dom
第一条npm命令是安装Browserify，它允许我们为浏览器些代码当它是Node.js的应用程序。因为Browserify，我们可以使用Node.js模块加载器，它将会很敏捷的，使下载的代码尽可能的小。接着，安装cycle-core 和cycle-dom，它们是Cycle.js的两个基础模块。
这样，我们就可以创建一个index.js文件了，在其中，我们将编写我们的应用程序，使用Browserify本地库我们把它编译为一个叫做bundle.js的文件:
》
touch index.js
‘npm bin’/browserify index.js –outfile bundle.js
这些处理命令将通过我们的依赖数，并创建一个bundle.js文件，在其中包含了运行我们程序的每件必须的事，包括我们代码中需要的每个依赖。可以直接在我们的index.html代码中包含bundle.js ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wikipedia search</title>
</head>
<body>
<div id="container"></div>
<script src="bundle.js"></script>
</body>
</html>

Our Project: Wikipedia Search

在这一章节中，我们将建立一个应用程序，它作为user types来搜索Wikipedia。
Rxjs已经是使得获取和处理远程数据很容易了。但是，正如你在创建一个完整的web应用程序这章中看到，我们任然需要一些hoop来跳转，确保我们的DOM操作高效的。
Cycle.js的一个目标之一就是从我们的代码中完全消除DOM的操作。让我们从一些基本的scaffolding开始：

var Cycle = require('@cycle/core');
❶ var CycleDOM = require('@cycle/dom')
var Rx = Cycle.Rx;
❷ function main(responses) {
return {
DOM: Rx.Observable.just(CycleDOM.h('span', 'Hi there!'))
};
}
var drivers = {
❸ DOM: CycleDOM.makeDOMDriver('#container')
};
❹ Cycle.run(main, drivers);

上面的二代马展现了Hi there的文本，但是已经做了很多了。那个主要的部分是main函数和drivers对象。让我们执行如下步骤：
1：我们需要 Cycle Core 和Cycle DOM driver，下面部分将介绍什么是Cycle.js driver。
2：main函数是我们程序的入口，它返回Observable的集合，这个程序中的每一个driver。到目前为止我们仅使用了一个driver：DOM driver。
DOM数的Observable发射虚拟数，我们通过Cycle DOM library创建使用h的方法。这样，我们创建了单个span元素，他的文本是’Hi there!’。这个DOM driver 消费这个虚拟tree和渲染页面真实DOM。
3：我们创建一个DOM driver 它将创建一个DOM tree从main函数发射的items上。这个DOM tree将会在元素或者选择器上建立，我们作为一个参数传递的。这里是#container。
4： Cycle.run链接main函数和drivers对象，在两者间创建一个循环的流。
Cycle.js Drivers
Cycle.js drivers是一些能引起单边影响的函数。我们项目其它地方可以任何方式修改state。Drivers需要一个Observable，它从我们的程序中发射数据，并且他们返回另外一个引起单边影响的Observable。
如果我们不是很频繁的创建drivers——仅仅是当我们需要单边影响如改变DOM的时候，读和写从另外的接口（例如，本地存储），或发送请求。在大部分的应用程序中，我们仅需要DOM driver（重绘web页面）和HTTP dirver（我们需要http请求）。在这个例子中，我们将使用另外一个，JSONP driver。
The User Interface
我们的页面需要真实的内容，而不仅仅是一个span。让我们创建一个函数，它创建真实的tree代表我们的页面。

function vtreeElements(results) {
var h = CycleDOM.h;
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)
]);
}))
]);
}

这个函数看起来有点陌生，不要慌张。使用Virtual Hyperscript，一种创建虚拟DOM tree的特定语言。Virtual
Hyperscript有一个叫做h的方法。h在HTML相似方式声明了nodes，但是使用的是JavaScript。通过传递额外的对象或数组给h，我们可以添加属性到元素或者是添加孩子到他们。这导致虚拟的tree最终被渲染到浏览器的DOM上。
vtreeElements需要一个对象数组，results，并返回已虚拟的tree，它代表了我们程序简单的UI。它根据results的对象重绘输入框和列出了链接，它最终将包含Wikipedia的搜素结果。我们将使用vtreeElements来渲染我们的程序。
Using JSX
替换使用h函数，我们使用JSX编写我们的UI，JXF，一种Facebook发明类似xml句法扩展，用来很容易编写DOM结构，可读性也更好。vtreeElements函数如下：

function vtreeElementsJSX(results) {
results = results.map(function(result) {
var link = WIKI_URL + result.title;
return <div><a href={link}>{result.title}</a></div>
});
return <div>
<h1>Wikipedia Search</h1>
<input className="search-field" type="text" />
<hr/>
<div>{results}</div>
</div>;
}

这看起来是不是好一些？JSF对开发者来说更亲切，应为和HTML很相似。但是我们可以把它和JavaScript代码并排，利用这些额外的优势，我们把它当成js类型来对待。例如，注意我们如何迭代results数组，我们直接返回一个< div >元素，使用这个元素本身的link值和result.title（js值可以放在大括号里面内联）。
由于JSX是句法扩展，我们需要编译并最终转化为js代码（看起来和我们上一节的基于h的代码很像）。我们将使用Babel。Babel是一个编译，它把最新的js转化为到处可以运行的js。它也可以转化一些js的扩展，如JSX，那个是我们特定的使用环境。
如果你想使用JSX，你需要安装Babel并当编译这个项目的时候使用它。幸运的是，对Browserify，Babel有一个适配器加做Babelify：

npm install babelify

在每一个使用JSX的文件中，我们需要在每个文件的最上面添加如下行：

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

这告诉Babel使用Cycle.js的 hJSX适配器来处理JSX，而不是使用默认的React。
现在当我们想编译我们的项目时，我们可以使用如下命令：

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

Getting the Search Term from the User

tianjun2012

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
RxJS入门（10）----使用Cycle.js的响应式web应用程序

伴随着single-page apps的出现，网站突然被期望坐更多，甚至要和“native”apps进行比较。为了是web应用程序更快，开发者们意识到某些领域的瓶颈：让web应用程序像它们的本地副本一样快和稳定。Facebook的React是开拓者，伴随着使用这个新技术的若干框架的出现，在保持diamante简单和明了的情况下，web应用程序越来越快。在本章中，我们将使用一些新技术来开发web应
复制链接

扫一扫

专栏目录