JS設計模式入門和框架中的實踐

時間 2019-11-06

原文原文鏈接

在編寫JS代碼的過程當中，運用必定的設計模式可讓咱們的代碼更加優雅、靈活。vue

下面筆者就結合諸如redux的subscribe、ES6的class、vue裏面的$dispatch、jquery裏面的on/off來給你們簡單介紹下設計模式在這些庫、語法和框架中的使用。python

設計模式解決的問題

設計模式並非很玄乎的知識，不少同窗在編寫JS代碼的時候已經在不經意間用了很多設計模式了。
筆者認爲把設計模式單獨抽象出來探討，就和算法中抽象出來冒泡、排序同樣，是爲了描述一種經常使用的JS pattern。react

經過研習這類pattern，讓模式來指導咱們的代碼結構及JS算法。jquery

一些經常使用的設計模式概述

一、observer [觀察者模式]git

根據狀態的變化主動觸發觀察者隊列、hashMap的回調行爲github

一個簡單的觀察者模式代碼實踐面試

class StateTracker{
        constructor(){
            this.observers = [];
            this.internalState= 10;
        }
        // 改變內部狀態，觸發狀態的觀察者列表
        change(val){
            this.internalState= val;
            this.observers.forEach(observer=>observer(val));
        }// 註冊觀察者
        registerObserver(ObserverFn){
            this.obserers.push(ObserverFn)
        }
    }

二、publish/subscribe [訂閱發佈模式]算法

在代碼模塊的共享訪問空間存儲hashMap的topic/callback形式。
添加on/off/trigger等接口實現掛載、移除、觸發等動做。redux

一個簡單的訂閱發佈模式代碼實踐

class PubSubHandler{
        constructor(){
            this.eventPool = {};
        }
        //移除
        off(topicName){
            delete this.observers[topicName]
        }
        //發佈
        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[單例模式]

構造函數的實例只有一個，通常是經過閉包存儲內部實例，經過接口訪問內部實例。
一個簡單的單例模式代碼實踐

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裝飾者模式

這個模式就是在原有的對象上面裝飾更多行爲，而且保持變量名不變。
用過ES7的@decorator或者python等語言的，應該對decorator不陌生的。

一個簡單的裝飾者模式代碼實踐

function decorator(sourceObj,decortorFn){
        decortorFn(sourceObj);
        return sourceObj
    }
    var d = {a:1};
    // d變爲了{a:1,b:1}
    d = decorator(d,(d)=>{d.b=1});

五、mixin混合模式

這個模式和decorator有點相似，只是它的功能更加垂直。
就是在原有的對象上面增長、覆蓋對象的行爲。

相比於extends、Object.assign等方法，mixin模式更富有表現力。

mixin模式不能一律而論，可能依據不一樣的數據類型有不一樣的mixin策略，好比vue.mixin

一個簡單的混合模式代碼實踐

class StateTracker{
        constructor(){
            this.raw = {
                a:1,
                b:2
            }
        }// 混合模式方法入口
        mixin(obj){
            Object.assign(this.raw,obj)
        }
    }

筆者暫時先介紹這麼多設計模式。
下面就針對經常使用的框架、語法、庫等來講明這些設計模式的應用。

observer模式在redux中的使用示例代碼

var store = createStore(reducer,initialState);
    //註冊redux store，存儲在 nextListeners數組
    var test = store.subscribe(()=>{console.log('我註冊了！')});
    // 取消註冊監聽
    test.unsubscribe();

publish/subscribe在jquery中的使用示例代碼

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

decorator模式在react-redux中的實踐

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