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)
br/>test.unsubscribe();
publish/subscribe在jquery中的使用示例代码
$(document).on('hello',()=>{console.log('hello')})
$(document).trigger('hello');
$(document).off('hello')
decorator模式在react-redux中的实践
//装饰器
@connect(state=>state)
render(){
return JSON.stringify(this.props)  
}
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。