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)

  • 相关阅读:
    Java的字节流,字符流和缓冲流对比探究
    团队作业4:第七篇Scrum冲刺博客(歪瑞古德小队)
    团队作业4:第六篇Scrum冲刺博客(歪瑞古德小队)
    团队作业4:第五篇Scrum冲刺博客(歪瑞古德小队)
    团队作业4:第四篇Scrum冲刺博客(歪瑞古德小队)
    EACCES: permission denied,mkdir … npm install 安装依赖问题解决
    100% 展示 MySQL 语句执行的神器-Optimizer Trace
    关于冲击响应的通俗理解
    struct中的对齐准则
    NIO实践-HTTP交互实现暨简版Tomcat交互内核
  • 原文地址:https://www.cnblogs.com/Answer1215/p/4597872.html
Copyright © 2011-2022 走看看