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

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

設(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ì)模式概述

1、observer [觀察者模式]

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

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

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

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

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

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

一個(gè)簡單的訂閱發(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)} }

3、singleton[單例模式]

一個(gè)簡單的單例模式代碼實(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

4、decorator裝飾者模式

這個(gè)模式就是在原有的對(duì)象上面裝飾更多行為，并且保持變量名不變。

用過ES7的@decorator或者python等語言的，應(yīng)該對(duì)decorator不陌生的。

一個(gè)簡單的裝飾者模式代碼實(shí)踐

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});

5、mixin混合模式

這個(gè)模式和decorator有點(diǎn)類似，只是它的功能更加垂直。

就是在原有的對(duì)象上面增加、覆蓋對(duì)象的行為。

相比于extends、Object.assign等方法，mixin模式更富有表現(xiàn)力。

mixin模式不能一概而論，可能依據(jù)不同的數(shù)據(jù)類型有不同的mixin策略，比如vue.mixin

一個(gè)簡單的混合模式代碼實(shí)踐

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

下面就針對(duì)常用的框架、語法、庫等來說明這些設(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) } } 總結(jié)

關(guān)于設(shè)計(jì)模式在前端框架或庫的實(shí)踐，我這邊寫的是比較簡略的， 可能沒有寫過相關(guān)代碼的同學(xué)不是特別好理解，有相關(guān)疑問的同學(xué)可以在文末直接提問。

希望本文能夠?qū)Υ蠹覍W(xué)習(xí)和了解設(shè)計(jì)模式的概念有所了解

本文首發(fā)于筆者的 github blog

github設(shè)計(jì)模式教程代碼地址

來自：https://segmentfault.com/a/1190000012814591