zoukankan      html  css  js  c++  java
  • [Javascript + rxjs] Introducing the Observable

    In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

    Here is an example how to handle events normally:

    var button = document.getElementById('button');
    
    var handler = function(e){
        console.log('clicked');
    };
    
    button.addEventListener('click', handler);

    So when fire the click event, in the console will log 'clicked'.

    If we want to remove the event listener:

    var button = document.getElementById('button');
    
    var handler = function(e){
        console.log('clicked');
        button.removeEventListener('click', handler);
    };
    
    button.addEventListener('click', handler);

    Now let see how can we achieve the same effect by using observable.

    var Observable = Rx.Observable;
    
    //Create click events by Observable
    var clicks = Observable.fromEvent(button, 'click');
    
    //Then we are able to use forEach, concatAll, map, fliter function
    clicks.forEach(function() {
        console.log('clicked');
    });

    How to remove the event listener:

    var Observable = Rx.Observable;
    
    //Create click events by Observable
    var clicks = Observable.fromEvent(button, 'click');
    
    //Then we are able to use forEach, concatAll, map, fliter function
    //The function return an subscription object, which we can use to call dispose() method to remove listener
    var subscription = clicks.forEach(function() {
        console.log('clicked');
        subscription.dispose();
    });

    forEach method actually has three callback function which are onNext, onError, onCompleted:

    var Observable = Rx.Observable;
    
    //Create click events by Observable
    var clicks = Observable.fromEvent(button, 'click');
    
    //Then we are able to use forEach, concatAll, map, fliter function
    //The function return an subscription object, which we can use to call dispose() method to remove listener
    var subscription = clicks.forEach(function onNext() {
        console.log('clicked');
        subscription.dispose();
    }, function onError() {
        console.log('error');
    }, function onCompleted() {
        console.log('complete');
    });

    [doc](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/subscribe.md)

  • 相关阅读:
    2019春第三次课程设计实验报告
    2019春第二次课程设计实验报告
    2019春第一次课程设计实验报告
    第十二周总结
    第十一周总结
    第五周课程总结&试验报告(三)
    第四周课程总结&实验报告(二)
    第三周课程总结&实验报告一
    第二周学习总结
    19春总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4597872.html
Copyright © 2011-2022 走看看