[Javascript] Broadcaster + Operator + Listener pattern -- 26. Share the Same Broadcaster Values Across Multiple Listeners
JavaScript -- The 26 pattern Operator multiple VALUES
2023-09-14 08:59:13 时间
To build out our word game, we will have to be able to share the word across a few places. This means we have to set up a broadcaster that will push the same values to multiple listeners instead of different values each time a listener is added. We will do this by creating a share operator that can capture the broadcaster and track all of the listeners so that we can hook them together and customize how values get pushed down into the listener callbacks.
If we use the same broadcaster twice, we will get two different result.
import React from "react" import { render } from "react-dom" import { useBroadcaster, getUrl, } from "./broadcasters" import {map} from "./operators" import {pipe} from "lodash/fp" import { head } from "lodash" let getWord = pipe( map(head), )(getUrl('https://random-word-api.herokuapp.com/word')) let App = () => { let word = useBroadcaster(getWord) let anotherWord = useBroadcaster(getWord) return ( <div> <p>{word}</p> <p>{anotherWord}</p> </div> ) } render(<App></App>, document.querySelector("#root"))
So 'getWord' function will send two network requests.
The setup 'share' logic, so broadcaster will send the same value to multipule listeners:
let share = () => { let listeners = []; let cancel; return broadcaster => { if (!cancel) { // this block of code will run last and only setup one time cancel = broadcaster(value => { listeners.forEach(l => l(value)) }); } return listener => { // this block of code will run mult times listeners.push(listener); return () => { cancel() } } } }
Using it:
let getWord = pipe(
map(head),
share()
)(getUrl('https://random-word-api.herokuapp.com/word'))
--
import React from "react" import { render } from "react-dom" import { useBroadcaster, getUrl, useListener, } from "./broadcasters" import { map, filter, mapBroadcaster} from "./operators" import {pipe} from "lodash/fp" import { head } from "lodash" let share = () => { let listeners = []; let cancel; return broadcaster => { if (!cancel) { // this block of code will run last cancel = broadcaster(value => { listeners.forEach(l => l(value)) }); } return listener => { // this block of code will run mult times listeners.push(listener); return () => { cancel() } } } } let getWord = pipe( mapBroadcaster(event => pipe( map(head) )(getUrl('https://random-word-api.herokuapp.com/word'))), share() ) let App = () => { let onClick = useListener() let word = useBroadcaster(getWord(onClick)) let anotherWord = useBroadcaster(getWord(onClick)) return ( <div> <button onClick={onClick}>Click</button> <p>{word}</p> <p>{anotherWord}</p> </div> ) } render(<App></App>, document.querySelector("#root"))
broadcaster.js:
import { curry } from "lodash" import React, {useState, useEffect, useCallback} from "react" export let done = Symbol("done") export let getUrl = url => listener => { let controller = new AbortController() let signal = controller.signal fetch(url, {signal}) .then((response) => { return response.json() }) .then(listener) .catch(listener) return () => { controller.abort() } } export let createTimeout = curry((time, listener) => { let id = setTimeout(() => { listener(null) listener(done) }, time) return () => { clearTimeout(id) } }) export let addListener = curry( (selector, eventType, listener) => { let element = document.querySelector(selector) element.addEventListener(eventType, listener) return () => { element.removeEventListener(eventType, listener) } } ) export let createInterval = curry((time, listener) => { let i = 0 let id = setInterval(() => { listener(i++) }, time) return () => { clearInterval(id) } }) //broadcaster = function that accepts a listener export let merge = curry( (broadcaster1, broadcaster2, listener) => { let cancel1 = broadcaster1(listener) let cancel2 = broadcaster2(listener) return () => { cancel1() cancel2() } } ) export let zip = curry( (broadcaster1, broadcaster2, listener) => { let cancelBoth let buffer1 = [] let cancel1 = broadcaster1(value => { buffer1.push(value) // console.log(buffer1) if (buffer2.length) { listener([buffer1.shift(), buffer2.shift()]) if (buffer1[0] === done || buffer2[0] === done) { listener(done) cancelBoth() } } }) let buffer2 = [] let cancel2 = broadcaster2(value => { buffer2.push(value) if (buffer1.length) { listener([buffer1.shift(), buffer2.shift()]) if (buffer1[0] === done || buffer2[0] === done) { listener(done) cancelBoth() } } }) cancelBoth = () => { cancel1() cancel2() } return cancelBoth } ) export let forOf = curry((iterable, listener) => { let id = setTimeout(() => { for (let i of iterable) { listener(i) } listener(done) }, 0) return () => { clearTimeout(id) } }) export let useBroadcaster = (broadcaster, initVal = null, deps = []) => { let [state, setState] = useState(initVal) useEffect(() => { broadcaster((value) => { if (value === done) { return } setState(value) }) }, deps) return state } export let useListener = (deps = []) => { let listeners = [] let callbackListener = value => { if (typeof value === "function") { listeners.push(value) return () => { listeners = [] } } listeners.forEach(listener => listener(value)) } return useCallback(callbackListener, deps) }
operators.js:
import { curry } from "lodash" import { done, createTimeout } from "./broadcasters" let createOperator = curry( (operator, broadcaster, listener) => { return operator(behaviorListener => { return broadcaster(value => { if (value === done) { listener(done) return } behaviorListener(value) }) }, listener) } ) export let map = transform => createOperator((broadcaster, listener) => { return broadcaster(value => { listener(transform(value)) }) }) export let filter = predicate => createOperator((broadcaster, listener) => { return broadcaster(value => { if (predicate(value)) { listener(value) } }) }) export let split = splitter => curry((broadcaster, listener) => { let buffer = [] return broadcaster(value => { if (value === done) { listener(buffer) buffer = [] listener(done) } if (value == splitter) { listener(buffer) buffer = [] } else { buffer.push(value) } }) }) export let hardCode = newValue => createOperator((broadcaster, listener) => { return broadcaster(value => { listener(newValue) }) }) export let add = initial => broadcaster => listener => { return broadcaster(value => { listener((initial += value)) }) } export let startWhen = whenBroadcaster => mainBroadcaster => listener => { let cancelMain let cancelWhen cancelWhen = whenBroadcaster(whenValue => { if (cancelMain) cancelMain() cancelMain = mainBroadcaster(value => { if (value === done) { if (whenValue === done) { listener(done) } return } listener(value) }) }) return () => { cancelMain() cancelWhen() } } export let stopWhen = whenBroadcaster => mainBroadcaster => listener => { let cancelMain = mainBroadcaster(listener) let cancelWhen = whenBroadcaster(value => { cancelMain() }) return () => { cancelMain() cancelWhen() } } export let targetValue = map(event => event.target.value) export let mapBroadcaster = createBroadcaster => broadcaster => listener => { return broadcaster(value => { let newBroadcaster = createBroadcaster(value) newBroadcaster(listener) }) } export let applyOperator = broadcaster => mapBroadcaster(operator => operator(broadcaster)) export let stringConcat = broadcaster => listener => { let result = "" return broadcaster(value => { if (value === done) { listener(result) result = "" return } result += value }) } export let repeat = broadcaster => listener => { let cancel let repeatListener = value => { if (value === done) { cancel() cancel = broadcaster(repeatListener) return } listener(value) } cancel = broadcaster(repeatListener) return cancel } export let repeatWhen = whenBroadcaster => broadcaster => listener => { let cancel let cancelWhen let repeatListener = value => { if (value === done) { cancel() cancelWhen = whenBroadcaster(() => { cancelWhen() cancel = broadcaster(repeatListener) }) return } listener(value) } cancel = broadcaster(repeatListener) return () => { cancel() if (cancelWhen) cancelWhen() } } export let state = broadcaster => listener => { let state = 3 return broadcaster(value => { state-- listener(state) }) } export let doneIf = condition => broadcaster => listener => { let cancel = broadcaster(value => { listener(value) if (condition(value)) { listener(done) cancel() } }) return cancel } export 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() } } export let mapSequence = createBroadcaster => broadcaster => listener => { let cancel let buffer = [] let innerBroadcaster let innerListener = innerValue => { if (innerValue === done) { innerBroadcaster = null if (buffer.length) { let value = buffer.shift() if (value === done) { listener(done) return } innerBroadcaster = createBroadcaster(value) cancel = innerBroadcaster(innerListener) } return } listener(innerValue) } broadcaster(value => { if (innerBroadcaster) { buffer.push(value) } else { innerBroadcaster = createBroadcaster(value) cancel = innerBroadcaster(innerListener) } }) return () => { cancel() } } export const filterByKey = key => filter(event => event.key === key) export const allowWhen = allowBroadcaster => broadcaster => listener => { let current let cancel = broadcaster((value) => { current = value; }) let cancelAllow = allowBroadcaster(() => { listener(current) }) return () => { cancel() cancelAllow() } } export let waitFor = time => broadcaster => listener => { let cancelTimeout; let cancel cancel = broadcaster(value => { if (cancelTimeout) { cancelTimeout() } cancelTimeout = createTimeout(time)((innerValue) => { if (innerValue === done) { return } listener(value) }) }) return () => { cancel() cancelTimeout() } } export let ifElse = (condition, ifOp, elOp) => broadcaster => listener => { let cancel = broadcaster(value => { if (value === done) { return; } if (condition(value)) { ifOp(innerValue => innerValue(value))(listener) } else { elOp(innerValue => innerValue(value))(listener) } }) return () => { cancel() } }
相关文章
- 从零开始学_JavaScript_系列(一)初步概念、工具选择、简单内容输出、加载js文件
- 第一百六十一节,封装库--JavaScript,完整封装库文件
- 第一百四十节,JavaScript,封装库--浏览器检测
- 第一百三十一节,JavaScript,封装库--CSS
- javascript 捕获异常方法
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain (Object.setPrototypeOf())
- [Javascript] Broadcaster + Operator + Listener pattern -- 17. Building a Word Matching Game
- [Javascript] Broadcaster + Operator + Listener pattern -- 11. Customize the done logic
- [Javascript] Broadcaster + Operator + Listener pattern -- 4. Concat
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] JavaScript赋值时的传值与传址
- [Javascript] Redirect the browser using JavaScript
- [Javascript] Drawing Paths - Lines and Rectangles
- [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript
- [Cypress] install, configure, and script Cypress for JavaScript web applications -- part4
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Understanding the .constructor property on JavaScript Objects
- [Javascript] Redirect the browser using JavaScript
- JavaScript变量不同作用域的测试
- JavaScript中的几个重要概念
- JavaScript正则表达
- Javascript Madness: Mouse Events
- ERROR 1290 (HY000): The MySQL server is running with the --secure-file-priv option so it cannot ···
- QCSPCChart 3.6.8:SPC Control Chart for JavaScript
- 简搭(jabdp)之编写javascript(二)