RxJS:Javascript的reactive拓展

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修改过]