阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 rxjs jquery 中文 API 文档

      插件 rxjs jquery 中文 API 文档 https://github.com/Reactive-Extensions/rxjs-jquery

      该项目为 jQuery 提供了 Reactive Extensions for JavaScript(RxJS)绑定,以抽象事件绑定,Ajax 和 Deferreds。RxJS 库不包含在此版本中,必须单独安装。

      jQuery 绑定入门 让我们来看一个简单而强大的 jQuery 自动完成的 JavaScript 绑定的 Reactive Extensions 示例。在这个例子中,我们将从文本框中获取用户输入并修剪和限制输入,以便我们不会因为建议请求而使服务器超载。

      我们将从我们的应用程序的基本框架开始,使用 jQuery,RxJS,RxJS 基于时间的方法和 jQuery 的 RxJS Bindings 的脚本引用,以及用于输入的文本框和结果列表。

      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="rx.lite.js"></script>
      <script type="text/javascript" src="rx-jquery.js"><script>
      <script type="text/javascript">
      	$(function () {
      		...
      	})();
      </script>
      ...
      <input id="textInput" type="text"></input>
      <ul id="results"></ul>
      ...
      

      这里的目标是从我们的文本框中获取输入并以一种不会使请求重载服务的方式对其进行限制。为此,我们将使用 jQuery 获取对 textInput 的引用,然后使用 keyupAsObservable 方法绑定到’keyup’事件,然后获取 jQuery 对象并将其转换为 RxJS Observable。

      var throttledInput = $('#textInput')
         .keyupAsObservable()
      
      

      由于我们只对文本感兴趣,因此我们将使用该 map 方法获取事件对象并返回目标的值。

      	.map( function (ev) {
      		return $(ev.target).val();
      	})
      
      

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

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

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

      	.throttle(500 /* ms */)
      
      

      最后,我们只想在输入流中使用不同的值,因此我们可以忽略不唯一的请求,例如,如果我复制并粘贴相同的值两次,则会忽略该请求。

      	.distinctUntilChanged();
      
      

      总而言之,我们的 throttledInput 看起来如下:

      var throttledInput = $('#textInput')
      	.keyupAsObservable()
      	.map( function (ev) {
      		return $(ev.target).val();
      	})
      	.filter( function (text) {
      		return text.length > 2;
      	})
      	.throttle(500)
      	.distinctUntilChanged();
      
      

      现在我们已经从文本框中获得了限制输入,我们需要查询我们的服务,在本例中是维基百科 API,以获取基于我们输入的建议。为此,我们将创建一个名为 searchWikipedia 的函数,该函数调用 jQuery.ajaxAsObservable 方法,该方法将现有的 jQuery Ajax 请求包装在一个 Rx.AsyncSubject。

      function searchWikipedia(term) {
      	return $.ajaxAsObservable({
      		url: 'http://en.wikipedia.org/w/api.php',
      		data: { action: 'opensearch',
      				search: term,
      				format: 'json' }
      		dataType: 'jsonp'
      	});
      }
      

      现在维基百科搜索已被包装,我们可以将限制输入和我们的服务调用联系在一起。最后,为了解决并发问题,我们需要确保只获得最新值。异步编程可能会出现问题,如果未正确取消,则可以在返回最新值之前返回较早的值,从而导致错误。为了确保不会发生这种情况,我们提供了 flatMap 仅返回最新值的方法。

      var suggestions = throttledInput.flatMapLatest( function (text) {
      		return searchWikipedia(text);
      });
      
      

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

      var selector = $('#results');
      
      var subscription = suggestions.subscribe(
      	function (data) {
      		selector.clear();
      		$.each(data[1], function (_, text) {
      			$('<li>' + text + '</li>').appendTo(selector);
      		});
      	},
      	function (e) {
      		selector.clear();
      		$('<li>Error: ' + e + '</li>').appendTo('#results');
      	}
      );
      

      在这个简单的例子中,我们只是触及了这个库的表面。

      实现了绑定

      • jQuery 事件
      • bind - bindAsObservable
      • delegate - delegateAsObservable
      • live - liveAsObservable
      • on - onAsObservable
      • one - oneAsObservable

      jQuery 事件快捷方式

      • change - changeAsObservable
      • click - clickAsObservable
      • dblclick - dblclickAsObservable
      • focus - focusAsObservable
      • focusin - focusinAsObservable
      • focusout - focusoutAsObservable
      • hover - hoverAsObservable
      • keydown - keydownAsObservable
      • keypress - keypressAsObservable
      • keyup - keyupAsObservable
      • load - loadAsObservable
      • mousedown - mousedownAsObservable
      • mouseenter - mouseenterAsObservable
      • mouseleave - mouseleaveAsObservable
      • mousemove - mousemoveAsObservable
      • mouseout - mouseoutAsObservable
      • mouseover - mouseoverAsObservable
      • mouseup - mouseupAsObservable
      • ready - readyAsObservable
      • resize - resizeAsObservable
      • scroll - scrollAsObservable
      • select - selectAsObservable
      • submit - submitAsObservable
      • unload - unloadAsObservable

      jQuery 效果

      • animate - animateAsObservable
      • fadeIn - fadeInAsObservable
      • fadeOut - fadeOutAsObservable
      • fadeTo - fadeToAsObservable
      • fadeToggle - fadeToggleAsObservable
      • hide - hideAsObservable
      • show - showAsObservable
      • slideDown - slideDownAsObservable
      • slideToggle - slideToggleAsObservable
      • slideUp - slideUpAsObservable

      Ajax 方法

      • ajax - $.ajaxAsObservable
      • get - $.getAsObservable
      • getJSON - $.getJSONAsObservable
      • getScript - $.getScriptAsObservable
      • post - $.postAsObservable
      • $.Deferred
      • Deferred.toObservable
      • Rx.Observable.toDeferred
      • $.Callbacks
      • Callbacks.toObservable
      目录
      目录