RxJS-DOM ^7.0 – 用于 JavaScript响应式扩展的 HTML DOM 绑定

概述

该项目为 HTML DOM 对象提供了 JavaScript 响应式扩展 (RxJS) 绑定，以抽象事件绑定、Ajax 请求、Web 套接字、Web Workers、服务器发送的事件、地理定位等。

包括电池

当然，有很多库可以开始使用 HTML DOM 的 RxJS 绑定。对从哪里开始感到困惑？从使用的完整功能集开始rx.dom.js，然后您可以将其缩减为您需要的功能，例如仅事件或 ajax。如果你使用 RxJS Lite，你可以从rx.lite.dom.js文件开始，然后从那里选择你想要的功能。

这组库包括：

主要图书馆：

精简图书馆：

入门

有多种方法可以开始使用 RxJS 的 HTML DOM 绑定。这些文件在cdnjs和jsDelivr上可用。

下载源代码

要下载 JavaScript 响应式扩展的 HTML DOM 绑定的源代码，请输入以下内容：

git clone https://github.com/Reactive-Extensions/rxjs-dom.git
cd ./rxjs-dom

使用NPM安装

npm install rx-dom

使用Bower安装

bower install rx-dom

使用Jam安装

jam install rx-dom

使用NuGet安装

PM> Install-Package RxJS-Bridges-HTML

HTML DOM 绑定入门

让我们来看一个简单但功能强大的示例，它是用于 HTML 的 JavaScript 绑定的响应式扩展，自动完成。在这个例子中，我们将从文本框中获取用户输入并修剪和限制输入，这样我们就不会因建议请求而使服务器过载。

我们将从应用程序的基本框架开始，其中包含对基于 RxJS Lite 的方法的脚本引用，以及用于 HTML DOM 的 RxJS 绑定，以及用于输入的文本框和用于结果的列表。

<script type="text/javascript" src="rx.lite.js"></script>
<script type="text/javascript" src="rx.dom.js"><script>
<script type="text/javascript">
 
</script> 
...
<input id="textInput" type="text"></input>
<ul id="results"></ul>
...

这里的目标是从我们的文本框中获取输入并以一种不会因请求而使服务过载的方式对其进行去抖动。为此，我们将使用 document.getElementById 方法获取对 textInput 的引用，然后使用Rx.DOM.fromEvent调用的 keyups的专门化快捷方式绑定到“keyup”事件Rx.DOM.keyup，然后调用DOM 元素事件处理程序并将其转换为 RxJS Observable .

var textInput = document.querySelector('#textInput');
var throttledInput = Rx.DOM.keyup(textInput);

由于我们只对文本感兴趣，我们将使用该map方法来获取事件对象并返回目标的值，或者我们可以调用pluck相同的效果。

    .pluck('target','value')

我们也对少于两个字母的查询词不感兴趣，因此我们将使用返回字符串长度是否合适的whereorfilter方法来修剪用户输入。

    .filter( function (text) {
        return text.length > 2;
    })

我们还希望稍微减慢用户输入的速度，这样外部服务就不会被请求淹没。为此，我们将使用debounce超时为 500 毫秒的方法，该方法将忽略您的快速输入，并且仅在您暂停该时间跨度后返回一个值。

    .debounce(500)

最后，我们只需要输入流中的不同值，因此我们可以忽略不唯一的请求，例如，如果我复制并粘贴相同的值两次，使用该distinctUntilChanged方法将忽略该请求。

    .distinctUntilChanged();

综上所述，我们的throttledInput 如下所示：

var textInput = document.querySelector('#textInput');
var throttledInput = Rx.DOM.keyup(textInput)
    .pluck('target','value')
    .filter( function (text) {
        return text.length > 2;
    })
    .debounce(500)
    .distinctUntilChanged();

现在我们有了来自文本框的节流输入，我们需要查询我们的服务，在本例中是 Wikipedia API，以根据我们的输入获取建议。为此，我们将创建一个名为 searchWikipedia 的函数，该函数调用Rx.DOM.jsonpRequest包装进行 JSONP 调用的方法。

function searchWikipedia(term) {
  var url = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search='
    + encodeURIComponent(term) + '&callback=JSONPCallback';
  return Rx.DOM.jsonpRequest(url);
}

既然 Wikipedia 搜索已经完成，我们可以将节流输入和我们的服务调用联系起来。在这种情况下，我们将在throttledInput 上调用select，然后从textInput 中获取文本，然后使用它来查询维基百科，过滤掉空记录。最后，为了处理并发问题，我们需要确保我们只获得最新的值。异步编程可能会出现问题，如果没有正确取消，较早的值可能会在返回最新值之前返回，从而导致错误。为了确保这不会发生，我们有flatMapLatest只返回最新值的方法。

var suggestions = throttledInput.flatMapLatest(searchWikipedia);

最后，我们将通过调用 subscribe 来订阅我们的 observable，它将接收结果并将它们放入一个无序列表中。我们还将处理错误，例如，如果服务器不可用，则通过传入处理错误的第二个函数。

var resultList = document.getElementById('results');
 
function clearSelector (element) {
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
}
 
function createLineItem(text) {
    var li = document.createElement('li');
    li.innerHTML = text;
    return li;
}
 
suggestions.subscribe(
    function (data) {
      var results = data.response[1];
 
      clearSelector(resultList);
 
      for (var i = 0; i < results.length; i++) {
        resultList.appendChild(createLineItem(results[i]));
      }
    },
    function (e) {
        clearSelector(resultList);
  	resultList.appendChild(createLineItem('Error: ' + e));
    }
);