zoukankan      html  css  js  c++  java
  • [Javascript] Broadcaster + Operator + Listener pattern -- 5. Merge (Example)

    Remeber: each broadcast return a cancel function

    let createTimeout = (time) => (listener) => {
      let id = setTimeout(listener, time)
    
      return () => {
        clearTimeout(id)
      }
    }
    
    let addListener = (selector) => (eventType) => (listener) => {
      let element = document.querySelector(selector)
      element.addEventListener(eventType, listener)
    
      return () => {
        element.removeEventListener(eventType, listener)
      }
    }
    
    let createInterval = (time) => (listener) => {
      let id = setInterval(listener, time)
      return () => {
        clearInterval(id)
      }
    }
    
    let addButtonListener = addListener('#button')
    let addButtonClickListener = addButtonListener('click')
    
    let oneSecond = createInterval(1000)
    
    //broadcaster = function that accepts a listener
    let merge = (broadcaster1, broadcaster2) => (listener) => {
      let cancel1 = broadcaster1(listener)
      let cancel2 = broadcaster2(listener)
    
      return () => {
        cancel1()
        cancel2()
      }
    }
    
    let clickOrTick = merge(addButtonClickListener, oneSecond)
    let cancelClickOrTick = clickOrTick(() => {
      console.log('click or tick')
    })
    
    cancelClickOrTick()
    • because both broadcasters (addButtonClickListener & oneSecond) expects a listener, we are able to create a wrapper function that accepts a listener too and explicitly pass it to both broadcasters, which in this example we call it merge
    • and also we can follow the same pattern as before, because we control the broadcasters we are getting as parameters in merge, so we can return another function that cancels both of them

    • For the sake of comparison and help with readability, here's a representation of the functions both using ES6 syntax and ES5 syntax (using the function keyword)
    // Merge two different text inputs
    const mergeInputs = (input1, input2) => listener => {
      let result = ''
      const cancel1 = input1((e) => result += e.target.value)
      const cancel2 = input2((e) => result += e.target.value)
      listener(result)
    
     return () => { cancel1(); cancel2();}
    }
  • 相关阅读:
    JAVA常用运算符
    JAVA基本语义简介
    JAVA常用关键字
    记事本写JAVA程序
    JAVA开发环境搭建
    PROTEL DXP原理图编译 常见错误与处理方法
    关于光耦的认识
    十六进制转十进制函数_C编程
    Protues记录文档_1
    SR触发器和JK触发器
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13869657.html
Copyright © 2011-2022 走看看