1. JavaScript ES6 PubSub
I write the by referring redux store, store could be global, component-base or inside a namespace.
const PubSub = {
callbacks: {},
subscribe(ch, callback) {
const calls = this.callbacks;
callback = callback || this.render;
(calls[ch] || (calls[ch] = [])).push(callback);
return () => {
delete calls[ch];
return calls;
}
},
publish() { //dispatch
let args = [].slice.call(arguments, 0);
let ch = args.shift();
if (!this.callbacks || !this.callbacks[ch]) {
throw new Error(ch + ' not exist');
return this;
}
// dispatch to update redux store. cb==render
this.callbacks[ch].forEach(cb => cb(args));
return this;
},
render () {
console.log('PubSub default callback')
}
}
PubSub.subscribe('channel1', () => console.log('callback 1'));
PubSub.subscribe('channel2', (val) => console.log('callback 2: ' + val));
PubSub.subscribe('channel3', (ary) => console.log('callback 3', ary));
PubSub.publish('channel1'); //callback 1
PubSub.publish('channel2', 123); //callback 2: 123
PubSub.publish('channel3', [1, 2, 3]); //callback 3 [1, 2, 3]
const unsubscribe = PubSub.subscribe('channel6');
unsubscribe();
PubSub.publish('channel4', [1, 2, 3]); //callback 3 [1, 2, 3]2. JavaScript ES6 functional createStore
function ManageStore(reducer) {
this.state = null;
this.listeners = [];
this.reducer = reducer || this.reducerAction;
//TODO: settings;
console.log(ManageStore == this, ManageStore === this);
this.dispatch({});
}
ManageStore.prototype = {
getState () {
return this.state;
},
dispatch (action) {
this.state = this.reducer(this.state, action);
this.listeners.forEach(listener => listener())
},
subscribe(listener) {
this.listeners.push(listener);
return () => {
this.listeners = this.listeners.filter(l => l !== listener)
}
},
reducerAction (state, action) {
return this.state;
}
};
ManageStore.prototype.constructor = ManageStore;
ManageStore.state = {};
let store = new ManageStore();
store.state === ManageStore.state; //false3. JavaScript ES6 jQuery version PubSub
//https://github.com/cowboy/jquery-tiny-pubsub/blob/master/src/tiny-pubsub.js
(function ($) {
const o = $({});
$.subscribe = () => o.on.apply(o, arguments);
$.unsubscribe = () => o.off.apply(o, arguments);
$.publish = () => o.trigger.apply(o, arguments);
}(jQuery));
William Jiang 