JS设计模式入门和框架中的实践

墨蓝 2023-07-07 05:56 18阅读 0赞

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\[单例模式\]

一个简单的单例模式代码实践

这个模式就是在原有的对象上面装饰更多行为，并且保持变量名不变。

用过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)  
\}  
\}  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200221154202200.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1R5bG9vX3dkbm1k,size_16,color_FFFFFF,t_70