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)

  • 相关阅读:
    为什么你改了我还看不见?
    一条SQL更新语句是如何执行的?
    一条SQL查询语句是如何执行的?
    为什么学习mysql
    读书并不只是向一个方向前进——《代码之外的生存指南》
    RabbitMQ在C#中的使用
    RFID技术与条形码技术的对比
    射频识别技术RFID
    通过IIS不能连接远程数据库的问题
    老板不断加需求、改需求的四种应对方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4597872.html
Copyright © 2011-2022 走看看