今天通过《奇舞周刊》中的一篇《构建流式应用—RxJS详解》对RxJS做了一个简单的了解。
RxJS是Reactive Extensions for javascript的简写，我的理解是Javascript的灵活扩展。
文章借助RxJS优化了使用普通方式实现的搜索功能。简述一下该搜索功能，用户输入查询内容，后台返回查询结果。功能非常简单，我们一般实现是获取该搜索框，兼听搜索框的输入事件，将搜索框内容发送到后台，后台根据搜索内容返回数据，前端拿到数据后展现到页面。
先来用普通方式实现一下这个搜索功能。
var input = document.querySelector("#text");
input.addEventListener("keyup",(e)=>{
var searchText = e.target.value;
$.ajax({
url: `search.com/${searchText}`,
success:data=>{
render(data);
}
})
});
这里有两点需要优化：
- 多余的请求。用户的每次输入都会做出响应，比如用户想搜索『手指饼』，结果【手】，【指】两个字都会触发输入事件。
- 已无用的请求仍再执行。用户输入【可乐】搜索结果没有返回时，又输入了【手指饼】，这时【可乐】的搜索结果返回了，这显然是不正确的。
对于多余请求的情况可以使用定时器setTimeout的方式来处理。如下：
var input = document.querySelector("#test"),
timer = null;
input.addEventListener('keyup',(e){
clearTimeout(timer);
timer = setTimeout(()=>{
var searchText = e.target.value;
$.ajax({
url: `search.com/${searchText}`,
success:data=>{
render(data);
}
})
},250)
})
对于无用请求的处理，可以提前声明一个当前搜索的状态变量，并把这个状态变量与数据一起返回，判断该变量与当前输入是不是相同，如果相同则把数据渲染到页面。如下：
var input = document.querySelector("#test"),
timer = null,
currentSearch = "";
input.addEventListener('keyup',(e){
clearTimeout(timer);
timer = setTimeout(()=>{
currentSearch = "书";
var searchText = e.target.value;
$.ajax({
url: `search.com/${searchText}`,
success:data=>{
if(data.search == currentSearch){
render(data);
}else{
......
}
}
})
},250)
})
这样使用普通方式来实现搜索功能就完成了。下面我们看一下使用RxJS如何来实现该功能。
首先实现个简陋版的：
var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
.pluck('target','value')
.flatMap(url=>Http.get(url))
.subscribe(data=>render(data))
在这里fromEvent、pluck、flatMap是RxJS提供的一系列操作，RxJS提供的操作非常丰富，想了解更多可以查询RxJS文档。这里的调用方式采用的链式调用，使用过JQuery的话对链式调用是非常熟悉了。下面说明一下每句的作用：
Rx.Observable.fromEvent(input,"keyup") // fromEvent用于兼听事件，事件触发时，将事件event转成可流动的Observable进行传输。
.pluck("target","value") // 将输入的event,输出成event.target .value
.flatMap(url=>Http.get(url)) // 将请求搜索结果输出回给Observer
.subscribe(data=>render(data)) // Observer针对返回的数据进行渲染
接下来看一下RxJS针对多余请求的优化
var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
.debounce(250) // 经过250毫秒后，没有流入新值，才将值转入下一个环节
.pluck('target','value')
.flatMap(url=>Http.get(url))
.subscribe(data=>render(data))
RxJS针对无用请求的处理特别方便，直接使用flatMapLatest替换flatMap:
var input = document.querySelector("#test");
Rx.Observable.fromEvent(input,"keyup")
.debounce(250)
.pluck('target','value')
.flatMapLatest(url=>Http.get(url)) // 取消上一个已无用的请求，只保留最后的请求结果流
.subscribe(data=>render(data))
这样使用RxJS来实现搜索功能就完成了。对比两种实现使用Rx从代码量上有明显的优势。
文章简单介绍了Rx的实现原理，个人觉得Rx更像是钢铁厂，原材料（各类数据或事件）经过高温（Rx.Observable）转成钢水（流），再经过模具（Rx.Observer）得到想要的不同形式的钢材（渲染）。 RxJS以Asynchronous Data streams为核心，RxJS可以将事件，变量，属性等等转换成data streams，通过观察这些data streams，并依据其创建的side effets进行对应的操作。这只是个简单的入门，《使用 RxJS 构造复杂单页应用的数据逻辑》这篇文章针对RxJS的高级使用做了介绍，有兴趣可以读一下。
网友评论