RxJS:Javascript的reactive拓展

              
banq
13-10-23 2 678

Reactive-Extensions/RxJS

Reactive编程是一个热门,特别是有了reactive宣言,RxJs是javascript的reactive拓展。

下面是参加一个自动完成的功能,当用户在文本框中输入时,自动完成输入。监听用户输入事件,一旦输入激活Wikipedia查询,案例如下:


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src=
"rx.js"></script>
<script src=
"rx.async.js"></script>
<script src=
"rx.binding.js"></script>
<script src=
"rx.time.js"></script>


使用Rx.Observable.fromEvent监听输入框的keyup事件:


var $input = $('#input'),
$results = $('#results');

/* Only get the value from each key up */
var keyups = Rx.Observable.fromEvent(input, 'keyup')
.map(function (e) {
return e.target.value;
})
.filter(function (text) {
return text.length > 2;
});

/* Now throttle/debounce the input for 500ms */
var throttled = keyups
.throttle(500
/* ms */);

/* Now get only distinct values, so we eliminate the arrows and other control characters */
var distinct = keyups
.distinctUntilChanged();

以上得到事件的生产者,事件的消费者是查询wiki,使用Rx.Observable.fromPromise绑定。如下:

function searchWikipedia (term) {
var promise = $.ajax({
url: 'http://en.wikipedia.org/w/api.php',
dataType: 'jsonp',
data: {
action: 'opensearch',
format: 'json',
search: encodeURI(term)
}
}).promise();
return Rx.Observable.fromPromise(promise);
}


下面将这个消费者和生产者绑定起来,使用flatMapLatest:

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


最后可以调用subscribe方法对获得数据,自动完成用户输入:

suggestions.subscribe( function (data) {
var res = data[1];

/* Do something with the data like binding */
$results.empty();

$.each(res, function (_, value) {
$('<li>' + value + '</li>').appendTo($results);
});
}, function (e) {
/* handle any errors */
$results.empty();

$('<li>Error: ' + error + '</li>').appendTo($results);
});


[该贴被banq于2013-10-23 07:29修改过]

lostalien
2013-10-25 10:08

看来很难和angularjs这种框架柔和在一起。。。

oceannut
2013-10-29 16:46

那扩展angular.js了?