JS设计模式
Posted JavaScript忍者秘籍
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS设计模式相关的知识，希望对你有一定的参考价值。
文章整理自互联网，如有侵权，请微信联系处理！
发布订阅模式
订阅-发布模式定义了对象之间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖它的对象都可以得到通知。
了解过事件机制或者函数式编程的朋友，应该会体会到“订阅-发布模式”所带来的“时间解耦”和“空间解耦”的优点。借助函数式编程中闭包和回调的概念，可以很优雅地实现这种设计模式。
“订阅-发布模式” vs 观察者模式
订阅-发布模式和观察者模式概念相似，但在订阅-发布模式中，订阅者和发布者之间多了一层中间件：一个被抽象出来的信息调度中心。最大的特点是集中管理，统一触发。
JS中一般用事件模型来代替传统的发布-订阅模式。任何一个对象的原型链被指向Event的时候，这个对象便可以绑定自定义事件和对应的回调函数。
const Event = {
clientList: {},
// 绑定事件监听
listen(key, fn){
if(! this.clientList[key]){
this.clientList[key] = [];
}
this.clientList[key].push(fn);
return true;
},
// 触发对应事件
trigger(){
const key = Array.prototype.shift.apply(arguments),
fns = this.clientList[key];
if(!fns || fns.length === 0){
return false;
}
for(let fn of fns){
fn.apply(null, arguments);
}
return true;
},
// 移除相关事件
remove(key, fn){
let fns = this.clientList[key];
// 如果之前没有绑定事件
// 或者没有指明要移除的事件
// 直接返回
if(!fns || !fn){
return false;
}
// 反向遍历移除置指定事件函数
for(let l = fns.length - 1; l >= 0; l--){
let _fn = fns[l];
if(_fn === fn){
fns.splice(l, 1);
}
}
return true;
}
}
// 为对象动态安装 发布-订阅 功能
const installEvent = (obj) => {
for(let key in Event){
obj[key] = Event[key];
}
}
let salesOffices = {};
installEvent(salesOffices);
// 绑定自定义事件和回调函数
salesOffices.listen("event01", fn1 = (price) => {
console.log("Price is", price, "at event01");
})
salesOffices.listen("event02", fn2 = (price) => {
console.log("Price is", price, "at event02");
})
salesOffices.trigger("event01", 1000);
salesOffices.trigger("event02", 2000);
salesOffices.remove("event01", fn1);
// 输出: false
// 说明删除成功
console.log(salesOffices.trigger("event01", 1000));
状态模式
状态模式：对象行为是基于状态来改变的。
内部的状态转化，导致了行为表现形式不同。所以，用户在外面看起来，好像是修改了行为。
优缺点
优点
封装了转化规则，对于大量分支语句，可以考虑使用状态类进一步封装。每个状态都是确定的，所以对象行为是可控的。
缺点
状态模式的关键是将事物的状态都封装成单独的类，这个类的各种方法就是“此种状态对应的表现行为”。因此，状态类会增加程序开销。
在javascript中，可以直接用JSON对象来代替状态类。
下面代码展示的就是FSM（有限状态机）里面有3种状态：download、pause、deleted。控制状态转化的代码也在其中。
DownLoad类就是，常说的Context对象，它的行为会随着状态的改变而改变。
const FSM = (() => {
let currenState = "download";
return {
download: {
click: () => {
console.log("暂停下载");
currenState = "pause";
},
del: () => {
console.log("先暂停, 再删除");
}
},
pause: {
click: () => {
console.log("继续下载");
currenState = "download";
},
del: () => {
console.log("删除任务");
currenState = "deleted";
}
},
deleted: {
click: () => {
console.log("任务已删除, 请重新开始");
},
del: () => {
console.log("任务已删除");
}
},
getState: () => currenState
};
})();
class Download {
constructor(fsm) {
this.fsm = fsm;
}
handleClick() {
const { fsm } = this;
fsm[fsm.getState()].click();
}
hanldeDel() {
const { fsm } = this;
fsm[fsm.getState()].del();
}
}
// 开始下载
let download = new Download(FSM);
download.handleClick(); // 暂停下载
download.handleClick(); // 继续下载
download.hanldeDel(); // 下载中，无法执行删除操作
download.handleClick(); // 暂停下载
download.hanldeDel(); // 删除任务
装饰者模式
装饰者模式：在不改变对象自身的基础上，动态地添加功能代码。
根据描述，装饰者显然比继承等方式更灵活，而且不污染原来的代码，代码逻辑松耦合。
应用场景
装饰者模式由于松耦合，多用于一开始不确定对象的功能、或者对象功能经常变动的时候。尤其是在参数检查、参数拦截等场景。
ES6的装饰器语法规范只是在“提案阶段”，而且不能装饰普通函数或者箭头函数。
下面的代码，addDecorator可以为指定函数增加装饰器。
其中，装饰器的触发可以在函数运行之前，也可以在函数运行之后。
注意：装饰器需要保存函数的运行结果，并且返回。
const addDecorator = (fn, before, after) => {
let isFn = fn => typeof fn === "function";
if (!isFn(fn)) {
return () => {};
}
return (...args) => {
let result;
// 按照顺序执行“装饰函数”
isFn(before) && before(...args);
// 保存返回函数结果
isFn(fn) && (result = fn(...args));
isFn(after) && after(...args);
// 最后返回结果
return result;
};
};
/******************以下是测试代码******************/
const beforeHello = (...args) => {
console.log(`Before Hello, args are ${args}`);
};
const hello = (name = "user") => {
console.log(`Hello, ${name}`);
return name;
};
const afterHello = (...args) => {
console.log(`After Hello, args are ${args}`);
};
const wrappedHello = addDecorator(hello, beforeHello, afterHello);
let result = wrappedHello("godbmw.com"); //高阶函数
console.log(result);
责任链模式
责任链模式：多个对象均有机会处理请求，从而解除发送者和接受者之间的耦合关系。这些对象连接成为链式结构，每个节点转发请求，直到有对象处理请求为止。
其核心就是：请求者不必知道是谁哪个节点对象处理的请求。如果当前不符合终止条件，那么把请求转发给下一个节点处理。
而当需求具有“传递”的性质时（代码中其中一种体现就是：多个if、else if、else if、else嵌套），就可以考虑将每个分支拆分成一个节点对象，拼接成为责任链。
优点与代价
优点
可以根据需求变动，任意向责任链中添加 / 删除节点对象 没有固定的“开始节点”，可以从任意节点开始
代价
责任链最大的代价就是每个节点带来的多余消耗。当责任链过长，很多节点只有传递的作用，而不是真正地处理逻辑。
代码实现
为了方便演示，模拟常见的“日志打印”场景。模拟了 3 种级别的日志输出：
LogHandler: 普通日志
WarnHandler：警告日志
ErrorHandler：错误日志
首先我们会构造“责任链”：LogHandler -> WarnHandler -> ErrorHandler。LogHandler作为链的开始节点。
如果是普通日志，那么就由 LogHandler 处理，停止传播；如果是 Warn 级别的日志，那么 LogHandler 就会自动向下传递，WarnHandler 接收到并且处理，停止传播；Error 级别日志同理。
class Handler {
constructor() {
this.next = null;
}
setNext(handler) {
this.next = handler;
}
}
class LogHandler extends Handler {
constructor(...props) {
super(...props);
this.name = "log";
}
handle(level, msg) {
if (level === this.name) {
console.log(`LOG: ${msg}`);
return;
}
this.next && this.next.handle(...arguments);
}
}
class WarnHandler extends Handler {
constructor(...props) {
super(...props);
this.name = "warn";
}
handle(level, msg) {
if (level === this.name) {
console.log(`WARN: ${msg}`);
return;
}
this.next && this.next.handle(...arguments);
}
}
class ErrorHandler extends Handler {
constructor(...props) {
super(...props);
this.name = "error";
}
handle(level, msg) {
if (level === this.name) {
console.log(`ERROR: ${msg}`);
return;
}
this.next && this.next.handle(...arguments);
}
}
/******************以下是测试代码******************/
let logHandler = new LogHandler();
let warnHandler = new WarnHandler();
let errorHandler = new ErrorHandler();
// 设置下一个处理的节点
logHandler.setNext(warnHandler);
warnHandler.setNext(errorHandler);
logHandler.handle("error", "Some error occur");
享元模式
享元模式：运用共享技术来减少创建对象的数量，从而减少内存占用、提高性能。
享元模式提醒我们将一个对象的属性划分为内部和外部状态。内部状态：可以被对象集合共享，通常不会改变 外部状态：根据应用场景经常改变 享元模式是利用时间换取空间的优化模式。
应用场景
享元模式虽然名字听起来比较高深，但是实际使用非常容易：只要是需要大量创建重复的类的代码块，均可以使用享元模式抽离内部/外部状态，减少重复类的创建。
为了显示它的强大，下面的代码是简单地实现了大家耳熟能详的“对象池”，以彰显这种设计模式的魅力。
代码实现
这里利用javascript实现了一个“通用对象池”类–ObjectPool。这个类管理一个装载空闲对象的数组，如果外部需要一个对象，直接从对象池中获取，而不是通过new操作。
对象池可以大量减少重复创建相同的对象，从而节省了系统内存，提高运行效率。
为了形象说明“享元模式”在“对象池”实现和应用，特别准备了模拟了File类，并且模拟了“文件下载”操作。
通过阅读下方代码可以发现：对于File类，内部状态是pool属性和download方法；外部状态是name和src(文件名和文件链接)。借助对象池，实现了File类的复用。
注：为了方便演示，Javascript实现的是并发操作。输出结果略有不同。
// 对象池
class ObjectPool {
constructor() {
this._pool = []; //
}
// 创建对象
create(Obj) {
return this._pool.length === 0
? new Obj(this) // 对象池中没有空闲对象，则创建一个新的对象
: this._pool.shift(); // 对象池中有空闲对象，直接取出，无需再次创建
}
// 对象回收
recover(obj) {
return this._pool.push(obj);
}
// 对象池大小
size() {
return this._pool.length;
}
}
// 模拟文件对象
class File {
constructor(pool) {
this.pool = pool;
}
// 模拟下载操作
download() {
console.log(`+ 从 ${this.src} 开始下载 ${this.name}`);
setTimeout(() => {
console.log(`- ${this.name} 下载完毕`); // 下载完毕后, 将对象重新放入对象池
this.pool.recover(this);
}, 100);
}
}
/****************** 以下是测试函数 **********************/
let objPool = new ObjectPool();
let file1 = objPool.create(File);
file1.name = "文件1";
file1.src = "https://download1.com";
file1.download();
let file2 = objPool.create(File);
file2.name = "文件2";
file2.src = "https://download2.com";
file2.download();
setTimeout(() => {
let file3 = objPool.create(File);
file3.name = "文件3";
file3.src = "https://download3.com";
file3.download();
}, 200);
setTimeout(
() =>
console.log(
`${"*".repeat(50)}\n下载了3个文件，但其实只创建了${objPool.size()}个对象`
),
1000
);
输出结果如下：
+ 从 https://download1.com 开始下载 文件1
+ 从 https://download2.com 开始下载 文件2
- 文件1 下载完毕
- 文件2 下载完毕
+ 从 https://download3.com 开始下载 文件3
- 文件3 下载完毕
**************************************************
下载了3个文件，但其实只创建了2个对象
组合模式
组合模式，将对象组合成树形结构以表示“部分-整体”的层次结构。
用小的子对象构造更大的父对象，而这些子对象也由更小的子对象构成 单个对象和组合对象对于用户暴露的接口具有一致性，而同种接口不同表现形式亦体现了多态性
应用场景
组合模式可以在需要针对“树形结构”进行操作的应用中使用，例如扫描文件夹、渲染网站导航结构等等。
代码实现
这里用代码模拟文件扫描功能，封装了File和Folder两个类。在组合模式下，用户可以向Folder类嵌套File或者Folder来模拟真实的“文件目录”的树结构。
同时，两个类都对外提供了scan接口，File下的scan是扫描文件，Folder下的scan是调用子文件夹和子文件的scan方法。整个过程采用的是深度优先。
// 文件类
class File {
constructor(name) {
this.name = name || "File";
}
add() {
throw new Error("文件夹下面不能添加文件");
}
scan() {
console.log("扫描文件: " + this.name);
}
}
// 文件夹类
class Folder {
constructor(name) {
this.name = name || "Folder";
this.files = [];
}
add(file) {
this.files.push(file);
}
scan() {
console.log("扫描文件夹: " + this.name);
for (let file of this.files) {
file.scan();
}
}
}
let home = new Folder("用户根目录");
let folder1 = new Folder("第一个文件夹"),
folder2 = new Folder("第二个文件夹");
let file1 = new File("1号文件"),
file2 = new File("2号文件"),
file3 = new File("3号文件");
// 将文件添加到对应文件夹中
folder1.add(file1);
folder2.add(file2);
folder2.add(file3);
// 将文件夹添加到更高级的目录文件夹中
home.add(folder1);
home.add(folder2);
// 扫描目录文件夹
home.scan();
执行$ node main.js，最终输出结果是：
扫描文件夹: 用户根目录
扫描文件夹: 第一个文件夹
扫描文件: 1号文件
扫描文件夹: 第二个文件夹
扫描文件: 2号文件
扫描文件: 3号文件
命令模式
命令模式是一种数据驱动的设计模式，它属于行为型模式。
请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象。该对象执行命令。在这三步骤中，分别有3个不同的主体：发送者、传递者和执行者。在实现过程中，需要特别关注。
应用场景
有时候需要向某些对象发送请求，但是又不知道请求的接受者是谁，更不知道被请求的操作是什么。此时，命令模式就是以一种松耦合的方式来设计程序。
setCommand方法为按钮指定了命令对象，命令对象为调用者（按钮）找到了接收者（MenuBar），并且执行了相关操作。而按钮本身并不需要关心接收者和接受操作。
// 接受到命令，执行相关操作
const MenuBar = {
refresh(){
console.log("刷新菜单页面");
}
};
// 命令对象，execute方法就是执行相关命令
const RefreshMenuBarCommand = receiver => {
return {
execute(){
receiver.refresh();
}
}
};
// 为按钮对象指定对应的 对象
const setCommand = (button, command) => {
button.onclick = () => {
command.execute();
}
};
let refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar);
let button = document.querySelector("button");
setCommand(button, refreshMenuBarCommand);
下面是同级目录的html代码，在谷歌浏览器中打开创建的index.html，并且打开控制台，即可看到效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>命令模式</title>
</head>
<body>
<button>按钮</button>
<script src="./main.js"></script>
</body>
</html>
迭代器模式
迭代器模式是指提供一种方法顺序访问一个集合对象的各个元素，使用者不需要了解集合对象的底层实现。
内部迭代器和外部迭代器
内部迭代器：封装的方法完全接手迭代过程，外部只需要一次调用。
外部迭代器：用户必须显式地请求迭代下一元素。熟悉C++的朋友，可以类比C++内置对象的迭代器的 end()、next()等方法。
这里实现的是一个外部迭代器。需要实现边界判断函数、元素获取函数和更新索引函数。
const Iterator = obj => {
let current = 0;
let next = () => current += 1;
let end = () => current >= obj.length;
let get = () => obj[current];
return {
next,
end,
get
}
}
let myIter = Iterator([1, 2, 3]);
while(!myIter.end()) {
console.log(myIter.get())
myIter.next();
}
代理模式
代理模式的定义：为一个对象提供一种代理以方便对它的访问。
代理模式可以解决避免对一些对象的直接访问，以此为基础，常见的有保护代理和虚拟代理。保护代理可以在代理中直接拒绝对对象的访问；虚拟代理可以延迟访问到真正需要的时候，以节省程序开销。
代理模式优缺点
代理模式有高度解耦、对象保护、易修改等优点。
同样地，因为是通过“代理”访问对象，因此开销会更大，时间也会更慢。
// main.js
const myImg = {
setSrc(imgNode, src) {
imgNode.src = src;
}
};
// 利用代理模式实现图片懒加载
const proxyImg = {
setSrc(imgNode, src) {
myImg.setSrc(imgNode, "./image.png"); // NO1. 加载占位图片并且将图片放入<img>元素
let img = new Image();
img.onload = () => {
myImg.setSrc(imgNode, src); // NO3. 完成加载后, 更新 <img> 元素中的图片
};
img.src = src; // NO2. 加载真正需要的图片
}
};
let imgNode = document.createElement("img"),
imgSrc =
"https://upload-images.jianshu.io/upload_images/5486602-5cab95ba00b272bd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp";
document.body.appendChild(imgNode);
proxyImg.setSrc(imgNode, imgSrc);
<!-- main.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>每天一个设计模式 · 代理模式</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
策略模式
策略模式定义：就是能够把一系列“可互换的”算法封装起来，并根据用户需求来选择其中一种。
策略模式实现的核心就是：将算法的使用和算法的实现分离。算法的实现交给策略类。算法的使用交给环境类，环境类会根据不同的情况选择合适的算法。
策略模式优缺点
在使用策略模式的时候，需要了解所有的“策略”（strategy）之间的异同点，才能选择合适的“策略”进行调用。
// 策略类
const strategies = {
A() {
console.log("This is stragegy A");
},
B() {
console.log("This is stragegy B");
}
};
// 环境类
const context = name => {
return strategies[name]();
};
// 调用策略A
context("A");
// 调用策略B
context("B");
单例模式
单例模式定义：保证一个类仅有一个实例，并提供访问此实例的全局访问点。
单例模式用途
如果一个类负责连接数据库的线程池、日志记录逻辑等等，此时需要单例模式来保证对象不被重复创建，以达到降低开销的目的。
const Singleton = function() {};
Singleton.getInstance = (function() {
// 由于es6没有静态类型,故闭包: 函数外部无法访问 instance
let instance = null;
return function() {
// 检查是否存在实例
if (!instance) {
instance = new Singleton();
}
return instance;
};
})();
let s1 = Singleton.getInstance();
let s2 = Singleton.getInstance();
console.log(s1 === s2);
以上是关于JS设计模式的主要内容，如果未能解决你的问题，请参考以下文章