JavaScript 設計模式入門和架構中的實踐

在編寫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= ;
	}
	// 改變内部狀态，觸發狀态的觀察者清單
	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 = ;
		this.b = ;
	}// 單例模式方法入口
	return {
		getInstance:()=>{
			if(!instance){
				instance = createInstance();
			}
			return instance;
		}
	}
}
var test = singleton();
test.getInstance() == test.getInstance() //true
           

4、decorator裝飾者模式

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

用過ES7的@decorator或者python等語言的，應該對decorator不陌生的。

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

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

5、mixin混合模式

這個模式和decorator有點類似，隻是它的功能更加垂直。

就是在原有的對象上面增加、覆寫對象的行為。

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

mixin模式不能一概而論，可能依據不同的資料類型有不同的mixin政策，比如vue.mixin

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

class StateTracker{
	constructor(){
		this.raw = {
			a:,
			b:
		}
	}// 混合模式方法入口
	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)   
	}
}
           

學習前端的同學注意了！！！

學習過程中遇到什麼問題或者想擷取學習資源的話，歡迎加入前端學習交流群，群号碼：328058344