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();}
    }
  • 相关阅读:
    [转]敏捷软件开发 需求分析
    Windows服务控制命令SC
    [转]敏捷测试工程师的十条法则
    大道至简:如何准确把握趋势 一
    Sqlserver xml 类型操作
    微软Teched2010大会一日游记
    [转]任务、用例、用户故事和场景
    ASUS TF600T上手体验
    Windows 8的各种小发现——不断更新中
    Surface Pro电磁笔故障
  • 原文地址:https://www.cnblogs.com/Answer1215/p/13869657.html
Copyright © 2011-2022 走看看