天天看点

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

在编写js和组装代码的过程中,运用一定的设计模式可以让我们的代码更加优雅、灵活。

下面笔者就结合诸如redux的subsscribe、es6的class、vue里面的$dispatch、jquery里面的on/off来给大家简单介绍下设计模式在这些库、语法和框架中的使用。

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

<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