[Javascript] Broadcaster + Operator + Listener pattern -- 10. Define a Function to Set Common Behaviors in Operators
In our previous code, we have seen this partten for operators:
// #region operators const concat = curry((broadcaster, listener) => { let string = ''; return broadcaster((value) => { if (value === done) { listener(done); return; } listener((string += value)); }); }); const map = curry((transform, broadcaster, listener) => { return broadcaster((value) => { if (value === done) { listener(done); return; } listener(transform(value)); }); }); const filter = curry((predicator, broadcaster, listener) => { return broadcaster((value) => { if (value === done) { listener(done); return; } if (predicator(value)) { listener(value); } }); }); // #endregion
We can create a function to reduce the code:
const createOperator = curry((operator, broadcaster, listener) => {
})
let's say, the new function is called 'createOperator', it takes an operator, a broadcaster, and a istener.
The way we want to use it as:
const concat = createOperator((broadcaster, listener) => { let string = ''; return broadcaster((value) => { listener((string += value)); }); });
As you can notify, we remove the if condition.
Step1: Strict refoacting:
const createOperator = curry((operator, broadcaster, listener) => { return operator(broadcaster, listener) })
Now, it works almost the same as before, just without if condition check.
Step2: This time we want to create a new "broadcaster" and invoke the original broadcaster inside new broadcaster.
1. skeleton
const createOperator = curry((operator, broadcaster, listener) => { // new a new broadcaster and invoke original broadcaster inside new broadcaster return operator((behaviorListener) => { }, listener) })
So what is "behaviorListener": it actual refer to:
const concat = createOperator((broadcaster, listener) => { let string = ''; return broadcaster((value) => { listener((string += value)); }); });
2. invoke the original "broadcaster":
const _createOperator = curry((operator, broadcaster, listener) => { // new a new broadcaster and invoke original broadcaster inside new broadcaster return operator((behaviorListener) => { return broadcaster((value) => { behaviorListener(value) }) }, listener) })
We want to pass the value to "behaviorListener" which refer to the highlighted code.
Step3: Add common code:
const _createOperator = curry((operator, broadcaster, listener) => { // new a new broadcaster and invoke original broadcaster inside new broadcaster return operator((behaviorListener) => { // override the default broadcaster return broadcaster((value) => { // apply common logic if (value === done) { // stop outer listen to continue emitting values listener(done) return } behaviorListener(value) }) }, listener) })
We call "listener(done)" in order to stop the source futhur emtting the values.
---
Put all together:
const createOperator = curry((operator, broadcaster, listener) => { // new a new broadcaster and invoke original broadcaster inside new broadcaster return operator((behaviorListener) => { // override the default broadcaster return broadcaster(value => { // apply common logic if(value === done) { // stop outer listen to continue emitting values listener(done) return } // otherwise, we want to pass forward the value to listener behaviorListener(value) }) }, listener) })
Step4: Refactoring operators:
const concat = createOperator((broadcaster, listener) => { let string = ''; return broadcaster((value) => { listener((string += value)); }); }); const map = transform => createOperator((broadcaster, listener) => { return broadcaster((value) => { listener(transform(value)); }); }); const filter = predicator => createOperator((broadcaster, listener) => { return broadcaster((value) => { if (predicator(value)) { listener(value); } }); });
-- working code example --
import { curry, compose, toUpper, pipe } from 'ramda'; // #region listeners const _log = (value) => console.log(value); // #endregion // #region broadcasters const done = Symbol('done'); const addListener = curry((element, eventType, listener) => { return element.addEventListener(evenType, listener); }); const createInterval = curry((time, listener) => { let i = 0; const id = setInterval(() => { listener(i++); }, time); return () => { clearInterval(id); }; }); const createForOf = curry((iterator, listener) => { const id = setTimeout(() => { for (let item of iterator) { listener(item); } listener(done); }, 0); return () => { clearTimeout(id); }; }); const createZipOf = curry((broadcaster1, broadcaster2, listener) => { let cancelBoth; let buffer1 = []; const cancel1 = broadcaster1((value) => { buffer1.push(value); if (buffer2.length) { listener([buffer1.shift(), buffer2.shift()]); if (buffer1[0] === done || buffer2[0] === done) { listener(done); cancelBoth(); } } }); let buffer2 = []; const 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; }); // #endregion // #region operators const createOperator = curry((operator, broadcaster, listener) => { // new a new broadcaster and invoke original broadcaster inside new broadcaster return operator((behaviorListener) => { // override the default broadcaster return broadcaster(value => { // apply common logic if(value === done) { // stop outer listen to continue emitting values listener(done) return } // otherwise, we want to pass forward the value to listener behaviorListener(value) }) }, listener) }) const concat = createOperator((broadcaster, listener) => { let string = ''; return broadcaster((value) => { listener((string += value)); }); }); const map = transform => createOperator((broadcaster, listener) => { return broadcaster((value) => { listener(transform(value)); }); }); const filter = predicator => createOperator((broadcaster, listener) => { return broadcaster((value) => { if (predicator(value)) { listener(value); } }); }); // #endregion const transform = pipe( map((x) => x[1]), filter((x) => x !== ','), concat, map(toUpper) ); let typeGreeting = transform( createZipOf(createInterval(100), createForOf('My Zipo')) ); const cancelGreating = typeGreeting(_log) // cancelGreating() const myZip = (broadcaster1, broadcaster2) => (...operators) => { return pipe(...operators)(createZipOf(broadcaster2, broadcaster2)) }
相关文章
- JavaScript
- JavaScript 正则表达式
- 【前端安全】JavaScript防流量劫持
- Javascript获取地址栏参数值
- [Javascript] Cancel a promise
- [Javascript] Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()
- [Javascript] Create an Image with JavaScript Using Fetch and URL.createObjectURL
- [Javascript] Avoiding Mutations in JavaScript with Immutable Data Structures
- [Javascript] Conditionally spread entries to a JavaScript object
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Replicate JavaScript Constructor Inheritance with Simple Objects (OLOO)
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] JavaScript Array Methods in Depth - push
- [Javascript] Conditional add prop to Object
- [Javascript] Broadcaster + Operator + Listener pattern -- 10. Define a Function to Set Common Behaviors in Operators
- [NPM] Set default values for package.json using npm set
- [Javascript] What is JavaScript Function Currying?
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- [Javascript + rxjs] Using the map method with Observable
- Javascript中的内置对象—数组
- 用JavaScript实现的设计模式之commandline(命令行)模式
- JavaScript 里三个点 ...,可不是省略号啊···
- javascript 字符串转unicode
- Atitit.js javascript异常处理机制与java异常的转换.js exception process Voae
- python web py入门(24)- javascript的乘法