在編寫js群組裝代碼的過程中,運用一定的設計模式可以讓我們的代碼更加優雅、靈活。
下面筆者就結合諸如redux的subsscribe、es6的class、vue裡面的$dispatch、jquery裡面的on/off來給大家簡單介紹下設計模式在這些庫、文法和架構中的使用。
<a></a>
設計模式并不是很玄乎的知識,很多同學在編寫js代碼的時候已經在不經意間用了不少設計模式了。 筆者認為把設計模式單獨抽象出來探讨,就和算法中抽象出來冒泡、排序一樣,是為了描述一種常用的js pattern。 通過研習這類pattern,讓模式來指導我們的代碼結構及js算法。
observer [觀察者模式]
根據狀态的變化主動觸發觀察者隊列、hashmap的回調行為
一個簡單的觀察者模式代碼實踐
publish/subscribe [訂閱釋出模式]
在代碼子產品的共享通路空間存儲hashmap的topic/callback形式。
添加on/off/trigger等接口實作挂載、移除、觸發等動作。
一個簡單的訂閱釋出模式代碼實踐
singleton[單例模式]
構造函數的執行個體隻有一個,一般是通過閉包存儲内部執行個體,通過接口通路内部執行個體。
decorator混合模式
這個模式就是在原有的對象上面裝飾更多行為,并且保持變量名不變。 用過es7的@decorator或者python等語言的,應該對decorator不陌生的。
mixin混合模式
這個模式和decorator有點類似,隻是它的功能更加垂直。 就是在原有的對象上面增加、覆寫對象的行為。
相比于extends、object.assign等方法,mixin模式更富有表現力。mixin模式不能一概而論,可能依據不同的資料類型有不同的mixin政策,比如vue.mixin
筆者就暫時先介紹這麼多設計模式,下面就針對常用的架構、文法、庫等來說明這些設計模式的應用。
來源:51cto