zoukankan      html  css  js  c++  java
  • [Javascript] Broadcaster + Operator + Listener pattern -- 16. Map a Sequence Based on Values

    In previous post, we have follow code:

    const delayMessage = (message) => hardCode(message)(createTimeout(1000));
     
    const sequence = (...broadcasters) => (listener) => {
      let broadcaster = broadcasters.shift();
      let cancel;
      let sequenceListener = (value) => {
        if (value === done && broadcasters.length) {
          broadcaster = broadcasters.shift();
          cancel = broadcaster(sequenceListener);
          return;
        }
        listener(value);
      };
      cancel = broadcaster(sequenceListener);
     
      return () => {
        cancel();
      };
    };
     
    let cancelMsgs = sequence(
      delayMessage("Hello"),
      delayMessage("I"),
      delayMessage("am"),
      delayMessage("Zhentian"),
      delayMessage("Wan")
    )(log);
     
    let inputClick = addListener("#input", "click");
    inputClick(cancelMsgs);

    Instead of cancel the 'delayMessage' in sequence like what we did in highlighted part. 

    We want this API:

    let message = "Hello, my name is John!".split(" ");
    
    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
    ...
    };
    
    mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

    Hook things up:

    1. Create innerBroadcaster

    let message = "Hello, my name is John!".split(" ");
    
    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      broadcaster((value) => {
        let innerBroadcaster = createBroadcaster(value);
        innerBroadcaster(listener);
      });
    };
    
    mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
    /*
    Hello, 
    Symbol(done)
    my 
    Symbol(done)
    name 
    Symbol(done)
    is 
    Symbol(done)
    John! 
    Symbol(done)
    Symbol(done)
    Symbol(done)
    */

    All the data come in once. What we actually want is value come one by one.

    2. Buffer the value:

    Create buffer to hold value, and only create innerBroadcaster for the first time.

    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      let buffer = []
      let innerBroadcaster
      
      broadcaster((value) => {
        if (innerBroadcaster) {
          buffer.push(value)
        } else {
          innerBroadcaster = createBroadcaster(value);
          innerBroadcaster(listener);
        }
      });
    
      console.log(buffer) //  ["my", "name", "is", "John!", Symbol(done)]
    };
    
    mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
    /*
    Hello
    Symbol(done)
    */

    It only log out the first value, the rest values are inside buffer. Now we need to think about how to get those value out of buffer.

    The idea is recusivly calling

    innerBroadcaster(listener);

    3. InnerListener

    let message = "Hello, my name is John!".split(" ");
    
    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      let buffer = [];
      let innerBroadcaster;
      let innerListener = (innerValue) => {
        if (innerValue === done) {
          if (buffer.length) {
            const value = buffer.shift();
            innerBroadcaster = createBroadcaster(value);
            innerBroadcaster(innerListener);
    }
       return } listener(innerValue); }; broadcaster((value)
    => { if (innerBroadcaster) { buffer.push(value); } else { innerBroadcaster = createBroadcaster(value); innerBroadcaster(innerListener); } }); console.log(buffer); // ["my", "name", "is", "John!", Symbol(done)] }; mapSequence((word) => delayMessage(word))(forOf(message))(console.log);

    In the innerListener, we keep taking the value from buffer, then create innerBroadcaster and hookup with innerListener.

    Now, it log out the message one by one.

    Hello, 
    my 
    name 
    is 
    John! 

    Now we don't have the final 'Symbol(done)' logging out. 

    4. Add done:

    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      let buffer = [];
      let innerBroadcaster;
      let innerListener = (innerValue) => {
        if (innerValue === done) {
          if (buffer.length) {
            const value = buffer.shift();
            if (value === done) {
              listener(done)
              return
            }
            innerBroadcaster = createBroadcaster(value);
            innerBroadcaster(innerListener);
          }
          return
        }
        listener(innerValue);
      };
      broadcaster((value) => {
        if (innerBroadcaster) {
          buffer.push(value);
        } else {
          innerBroadcaster = createBroadcaster(value);
          innerBroadcaster(innerListener);
        }
      });
    
      console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
    };

    5. Edge cases... Be aware the for the scenarios where the done status is not catch, sometimes this can happen because of the inner broadcasting could be not re-assigned.

    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      let buffer = [];
      let innerBroadcaster;
      let innerListener = (innerValue) => {
        if (innerValue === done) {
          innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign
          if (buffer.length) {
            const value = buffer.shift();
            if (value === done) {
              listener(done)
              return
            }
            innerBroadcaster = createBroadcaster(value);
            innerBroadcaster(innerListener);
          }
          return
        }
        listener(innerValue);
      };
      broadcaster((value) => {
        if (innerBroadcaster) {
          buffer.push(value);
        } else {
          innerBroadcaster = createBroadcaster(value);
          innerBroadcaster(innerListener);
        }
      });
    
      console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
    };

    --Full Code--

    import { addListener, done, createTimeout, forOf } from "./broadcasters";
    import { repeatWhen, filter, hardCode } from "./operators";
    import { pipe } from "lodash/fp";
    
    let inputClick = addListener("#input", "click");
    
    let state = (broadcaster) => (listener) => {
      let state = 3;
      return broadcaster((value) => {
        state--;
        listener(state);
      });
    };
    
    let doneIf = (condition) => (broadcaster) => (listener) => {
      let cancel = broadcaster((value) => {
        listener(value);
        if (condition(value)) {
          listener(done);
          cancel();
        }
      });
    
      return cancel;
    };
    
    let delayMessage = (message) => hardCode(message)(createTimeout(500));
    
    let sequence = (...broadcasters) => (listener) => {
      let broadcaster = broadcasters.shift();
      let cancel;
      let sequenceListener = (value) => {
        if (value === done && broadcasters.length) {
          let broadcaster = broadcasters.shift();
          cancel = broadcaster(sequenceListener);
          return;
        }
        listener(value);
      };
    
      cancel = broadcaster(sequenceListener);
    
      return () => {
        cancel();
      };
    };
    
    let message = "Hello, my name is John!".split(" ");
    
    let mapSequence = (createBroadcaster) => (broadcaster) => (listener) => {
      let buffer = [];
      let innerBroadcaster;
      let innerListener = (innerValue) => {
        if (innerValue === done) {
          innerBroadcaster = null // when innerValue is done, allow innerBroadcaster to be reassign
          if (buffer.length) {
            const value = buffer.shift();
            if (value === done) {
              listener(done)
              return
            }
            innerBroadcaster = createBroadcaster(value);
            innerBroadcaster(innerListener);
          }
          return
        }
        listener(innerValue);
      };
      broadcaster((value) => {
        if (innerBroadcaster) {
          buffer.push(value);
        } else {
          innerBroadcaster = createBroadcaster(value);
          innerBroadcaster(innerListener);
        }
      });
    
      console.log(buffer); //  ["my", "name", "is", "John!", Symbol(done)]
    };
    
    mapSequence((word) => delayMessage(word))(forOf(message))(console.log);
    

      

  • 相关阅读:
    vue 中使用 rem 布局的两种方法
    ant design pro请求返回全局参数 ant design pro超详细入门教程
    小程序中页面跳转路由传参
    检查域名所对应的ip
    小程序数据可视化echarts 动态设置数据
    微信小程序:上拉加载更多
    微信小程序接入百度OCR(身份证识别)
    JavaScript鼠标事件,点击鼠标右键,弹出div
    java 相关文件安装
    微信小程序自定义顶部组件customHeader的示例代码 小程序中如何引用阿里图标
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13959472.html
Copyright © 2011-2022 走看看