• Blogs (9)
    • 📱 236 - 992 - 3846

      đź“§ jxjwilliam@gmail.com

    • Version: ‍🚀 1.1.0
  • 3 JS ES6 PubSub Summary

    Blogs20172017-08-27


    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; //false

    3. 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));