在編寫JS和組裝代碼的過程中，運(yùn)用一定的設(shè)計(jì)模式可以讓我們的代碼更加優(yōu)雅、靈活。

　　下面筆者就結(jié)合諸如redux的subsscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off來給大家簡(jiǎn)單介紹下設(shè)計(jì)模式在這些庫(kù)、語(yǔ)法和框架中的使用。

[[183093]]

　設(shè)計(jì)模式解決的問題

設(shè)計(jì)模式并不是很玄乎的知識(shí)，很多同學(xué)在編寫JS代碼的時(shí)候已經(jīng)在不經(jīng)意間用了不少設(shè)計(jì)模式了。

筆者認(rèn)為把設(shè)計(jì)模式單獨(dú)抽象出來探討，就和算法中抽象出來冒泡、排序一樣，是為了描述一種常用的JS pattern。

通過研習(xí)這類pattern，讓模式來指導(dǎo)我們的代碼結(jié)構(gòu)及JS算法。

　一些常用的設(shè)計(jì)模式概述

　　observer [觀察者模式]

　　根據(jù)狀態(tài)的變化主動(dòng)觸發(fā)觀察者隊(duì)列、hashMap的回調(diào)行為

　　一個(gè)簡(jiǎn)單的觀察者模式代碼實(shí)踐

    class StateTracker{
        constructor(){
            this.observers = [];
            this.internamState= 10;
        }
        // 改變內(nèi)部狀態(tài)，觸發(fā)狀態(tài)的觀察者列表
        change(val){
            this.internamState= val;
            this.observers.forEach(observer=>observer(val));
        }
        registerObserver(ObserverFn){
            this.obserers.push(ObserverFn)
        }
    }

　　publish/subscribe [訂閱發(fā)布模式]

　　在代碼模塊的共享訪問空間存儲(chǔ)hashMap的topic/callback形式。

　　添加on/off/trigger等接口實(shí)現(xiàn)掛載、移除、觸發(fā)等動(dòng)作。

　　一個(gè)簡(jiǎn)單的訂閱發(fā)布模式代碼實(shí)踐

    class PubSubHandler{
        constructor(){
            this.eventPool = {};
        }
        //移除
        off(topicName){
            delete this.observers[topicName]
        }
        //發(fā)布
        trigger(topicName,...args){
            this.eventPool[topicName] && 
            this.eventPool[topicName].forEach(callback=>callback(...args));
        }
        //訂閱
        on(topicName,callback){
            let topic = this.eventPool[topicName] ;
            if(!topic){
                this.eventPool[topicName] =[]
            }
            this.eventPool[topicName].push(callback)
        }
    }

　　singleton[單例模式]

　　構(gòu)造函數(shù)的實(shí)例只有一個(gè)，一般是通過閉包存儲(chǔ)內(nèi)部實(shí)例，通過接口訪問內(nèi)部實(shí)例。

    var singleton = ()=>{
        var instance;
        var createInstance = ()=>{
            this.a = 1;
            this.b = 2;
        }
        return {
            getInstance:()=>{
                if(!instance){
                    instance = createInstance();
                }
                return instance;
            }
        }
    }
    var test = singleton();
    test.getInstance() == test.getInstance() //true

　　decorator混合模式

　　這個(gè)模式就是在原有的對(duì)象上面裝飾更多行為，并且保持變量名不變。 用過ES7的@decorator或者python等語(yǔ)言的，應(yīng)該對(duì)decorator不陌生的。

    function decorator(sourceObj,decortorFn){
        decortorFn(sourceObj);
        return sourceObj
    }
    var d = {a:1};
    // d變?yōu)榱藍(lán)a:1,b:1}
    d = decorator(d,(d)=>{d.b=1});

　　mixin混合模式

　　這個(gè)模式和decorator有點(diǎn)類似，只是它的功能更加垂直。 就是在原有的對(duì)象上面增加、覆蓋對(duì)象的行為。 相比于extends、Object.assign等方法，mixin模式更富有表現(xiàn)力。mixin模式不能一概而論，可能依據(jù)不同的數(shù)據(jù)類型有不同的mixin策略，比如vue.mixin

    class StateTracker{
        constructor(){
            this.raw = {
                a:1,
                b:2
            }
        }
        mixin(obj){
            Object.assign(this.raw,obj)
        }
    }

　　筆者就暫時(shí)先介紹這么多設(shè)計(jì)模式，下面就針對(duì)常用的框架、語(yǔ)法、庫(kù)等來說明這些設(shè)計(jì)模式的應(yīng)用。

　observer模式在redux中的使用

    var store = createStore(reducer,initialState);
    //注冊(cè)redux store，存儲(chǔ)在 nextListeners數(shù)組
    var test = store.subscribe(()=>{console.log('我注冊(cè)了！')});
    // 取消注冊(cè)監(jiān)聽
    test.unsubscribe();

　publish/subscribe在jquery中的使用

    $(document).on('hello',()=>{console.log('hello')})
    $(document).trigger('hello');
    $(document).off('hello')

　decorator模式在react-redux中的實(shí)踐

    //裝飾器
    @connect(state=>state)
    class Container extends Component{
        render(){
            return JSON.stringify(this.props)   
        }
    }