翻译翻译什么 tmd 叫“可读”？RxJS实现“搜索”功能

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。

闲言少叙，直接开冲！

先用 JS 原生写一个搜索功能：

代码语言：javascript复制

<input id="text"></input>
<script>
    var text = document.querySelector('#text');
    text.addEventListener('keyup', (e) =>{
        var searchText = e.target.value;
        $.ajax({ // 发送请求
            url: `search.qq.com/${searchText}`,
            success: data => {
              render(data); // 处理数据
            }
        });
    });
</script>

搜索都是要做防抖处理的，简易版防抖如下：

代码语言：javascript复制

<input id="text"></input>
<script>
    var text = document.querySelector('#text'),
        timer = null;
    text.addEventListener('keyup', (e) =>{
        clearTimeout(timer); // 频繁触发则会清除上一定时器
        timer = setTimeout(() => {
            console.log('发起请求..');
        },300) // 300 后毫秒触发；
    })
</script>

所以，搜索功能演变为：

代码语言：javascript复制

<input id="text"></input>
<script>
    var text = document.querySelector('#text'),
        timer = null,
        currentSearch = '';
 
    text.addEventListener('keyup', (e) =>{
        clearTimeout(timer)
        timer = setTimeout(() => {
            var searchText = e.target.value;
            $.ajax({
                url: `search.qq.com/${searchText}`,
                success: data => {
                    render(data);
                }           
            });
        },300)
    })
</script>

对吧，很常规。但是实际上的业务往往会远大于示例中的代码，按照上面的思路，最终会写成这种玩意儿：

一点不夸张。

这个时候，只能献祭出终极解决方案：本篇主角 —— RxJS 了，其实不止有 JS 的 RxJS，与之对应的还有，RxJava、RxAndroid、RxSwift，它们都是处理异步编程的【核武器库】；

RxJS 实现：

代码语言：javascript复制

import { fromEvent } from 'rxjs';
import { debounceTime, pluck, switchMap } from 'rxjs/operators';

var text = document.querySelector('#text');
var inputStream = Rx.Observable.fromEvent(text, 'keyup')
                    .debounceTime(300)
                    .pluck('target', 'value')
                    .switchMap(url => Http.get(url))
                    .subscribe(data => render(data));

让我们来一一解析它的 API：

fromEvent

fromEvent 用于将事件转换成 observable 序列（若还不理解什么是 observable 的同学，可以简单理解它为一个加强版本的 Promise）；

总之，创建点击时间的 observable 都这样写：

const source = fromEvent(document, 'click');

debounceTime

这个好理解，对事件加防抖的，参数就是防抖时间；

官方解释就是：舍弃掉在两次输出之间小于指定时间的发出值；

u1s1，这解释读起来很费劲。。（若还不理解什么是防抖的同学，可以将它理解为 LOL 中的回程，按下 B 键，隔了几秒，才会真正回城回血，如果一直按 B ，则一直不会回城）；

pluck

选择属性来发出；

比如：

代码语言：javascript复制

const source = from([{ name: 'Joe', age: 30 }, { name: 'Sarah', age: 35 }]);
// 提取 name 属性
const example = source.pipe(pluck('name'));
// 输出: "Joe", "Sarah"
const subscribe = example.subscribe(val => console.log(val));

在搜索的例子中，则是提取点击的 event.target.value