[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))
}
浙公網安備 33010602011771號