JavaScript 設計模式入門和框架中的實踐 http://www.codeceo.com/article/javascript-design-pattern.html
在編寫JS代碼的過程中,運用一定的設計模式可以讓我們的代碼更加優雅、靈活。
下面筆者就結合諸如redux的subscribe、ES6的class、vue裏面的$dispatch、jquery裏面的on/off來給大家簡單介紹下設計模式在這些庫、語法和框架中的使用。
設計模式解決的問題
設計模式並不是很玄乎的知識,很多同學在編寫JS代碼的時候已經在不經意間用了不少設計模式了。
筆者認為把設計模式單獨抽象出來探討,就和算法中抽象出來冒泡、排序一樣,是為了描述一種常用的JS pattern。
通過研習這類pattern,讓模式來指導我們的代碼結構及JS算法。
一些常用的設計模式概述
1、observer [觀察者模式]
根據狀態的變化主動觸發觀察者隊列、hashMap的回調行為
一個簡單的觀察者模式代碼實踐
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) } }
2、publish/subscribe [訂閱發布模式]
在代碼模塊的共享訪問空間存儲hashMap的topic/callback形式。
添加on/off/trigger等接口實現掛載、移除、觸發等動作。
一個簡單的訂閱發布模式代碼實踐
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) } }
3、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
4、decorator裝飾者模式
這個模式就是在原有的對象上面裝飾更多行為,並且保持變量名不變。
[email protected],應該對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});
5、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) } }
JavaScript 設計模式入門和框架中的實踐 http://www.codeceo.com/article/javascript-design-pattern.html