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