JavaScript 设计模式入门和框架中的实践
下面笔者就结合诸如redux的subsscribe、ES6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。
设计模式解决的问题
设计模式并不是很玄乎的知识,很多同学在编写JS代码的时候已经在不经意间用了不少设计模式了。
笔者认为把设计模式单独抽象出来探讨,就和算法中抽象出来冒泡、排序一样,是为了描述一种常用的JS pattern。
通过研习这类pattern,让模式来指导我们的代码结构及JS算法。
一些常用的设计模式概述
observer [观察者模式]
根据状态的变化主动触发观察者队列、hashMap的回调行为
一个简单的观察者模式代码实践
class StateTracker{ constructor(){ this.observers = []; this.internamState= 10; } // 改变内部状态,触发状态的观察者列表 change(val){ this.internamState= val; this.observers.forEach(observer=>observer(val)); } registerObserver(ObserverFn){ this.obserers.push(ObserverFn) } }
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) } }
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
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});
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中的设计模式——工厂模式
-
详细解读在JavaScript中实现设计模式中的适配器模式的方法(图文教程)
-
设计模式中的facade外观模式在JavaScript开发中的运用(高级篇)
-
JavaScript设计模式开发中组合模式的使用教程(高级篇)
-
js如何实现设计模式中的模板方法_javascript技巧
-
JavaScript之函数中的this和严格模式
-
设计模式中的迭代器模式在Cocoa Touch框架中的使用
-
iOS应用设计模式开发中对简单工厂和工厂方法模式的运用
-
设计模式中的组合模式在JavaScript程序构建中的使用
-
详解JavaScript实现设计模式中的适配器模式的方法