RxJS简单了解

今天通过《奇舞周刊》中的一篇《构建流式应用—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的高级使用做了介绍，有兴趣可以读一下。

RxJS简单了解

你可能感兴趣的:(RxJS简单了解)