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();}
    }
  • 相关阅读:
    Struts类型转换
    Oracle的学习,知识点整理
    常用的Oracle_SQL语句
    Oracle的优化
    Oracle创建表空间,用户,授权
    Linux权限的控制
    Oracle实例的3种连接方式和所使用的连接工具
    Oracle数据库打开端口
    Hibernate一对多配置
    hibernate UUID问题
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13869657.html
Copyright © 2011-2022 走看看