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= 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) } }
相關文章
- JS設計模式入門和框架中的實踐JS設計模式框架
- JavaScript設計模式與實踐--代理模式JavaScript設計模式
- JavaScript設計模式與實踐–工廠模式JavaScript設計模式
- JavaScript設計模式與實踐--工廠模式JavaScript設計模式
- javascript設計模式與開發實踐(二)- 封裝和原型模式JavaScript設計模式封裝原型
- JavaScript設計模式與開發實踐 – 觀察者模式JavaScript設計模式
- Axon框架快速入門和DDD專案實踐框架
- ?JavaScript設計模式實踐:18份筆記、例子和原始碼?JavaScript設計模式筆記原始碼
- javascript中的設計模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(6)—— 命令模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(3)—— 代理模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(2)—— 策略模式JavaScript設計模式
- 設計模式入門設計模式
- 程式設計實踐考試的入門模板程式設計
- JavaScript設計模式與開發實踐筆記JavaScript設計模式筆記
- 設計模式之感悟和實踐(二)設計模式
- 設計模式之感悟和實踐1設計模式
- 《JavaScript設計模式與開發實踐》模式篇(7)—— 組合模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(8)—— 模板方法模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(5)—— 觀察者模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(4)—— 迭代器模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(1)—— 單例模式JavaScript設計模式單例
- 《JavaScript設計模式與開發實踐》模式篇(13)—— 狀態模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(11)—— 中介者模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(9)—— 享元模式JavaScript設計模式
- JavaScript設計模式入坑JavaScript設計模式
- 理解JavaScript中的設計模式JavaScript設計模式
- JavaScript面試系列:JavaScript設計模式之橋接模式和懶載入JavaScript面試設計模式橋接
- Puppeteer的入門教程和實踐
- 設計模式之單例模式(《JavaScript設計模式與開發實踐》讀書筆記)設計模式單例JavaScript筆記
- 《JavaScript設計模式與開發實踐》閱讀摘要JavaScript設計模式
- 設計模式入門:原型模式設計模式原型
- 《JavaScript設計模式與開發實踐》模式篇(14)—— 介面卡模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(12)—— 裝飾者模式JavaScript設計模式
- 《JavaScript設計模式與開發實踐》模式篇(10)—— 職責鏈模式JavaScript設計模式
- 裝飾者設計模式在業務中的實踐設計模式
- 《Python程式設計:從入門到實踐》Python程式設計
- JavaScript 和 jQuery 設計模式JavaScriptjQuery設計模式