JS設計模式入門和框架中的實踐
在編寫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
裝飾者
模式
這個模式就是在原有的物件上面裝飾更多行為，並且保持變數名不變。
用過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}）；
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）
}
}
總結
關於設計模式在前端框架或庫的實踐，我這邊寫的是比較簡略的， 可能沒有寫過相關程式碼的同學不是特別好理解，有相關疑問的同學可以在文末直接提問。
希望本文能夠對大家學習和了解設計模式的概念有所瞭解
本文首發於筆者的github blog
github設計模式教程程式碼地址
