设计模式:针对特定问题提出的简洁优化的解决方案
- 当多个实例对象需要统一启动的时候,则可以使用组合设计模式
- 统一调度实例对象的启动方法,达到启动统一管理
- 使用
set
集合实现
// 轮播图构造函数
function Carousel() { }
// 轮播图启动方法
Carousel.prototype.run = function () { console.log('轮播图启动'); }
// 放大镜构造函数
function Enlarge() { }
// 放大镜启动方法
Enlarge.prototype.run = function () { console.log('放大镜启动'); }
// 选项卡构造函数
function Tab() { }
// 选项卡启动方法
Tab.prototype.run = function () { console.log('选项卡启动'); }
// 需要统一调度构造函数实例对象的启动方法,来启动页面内容
// 可以使用组合设计模式(使用一个组合类来管理需要统一启动的内容)
class Compose {
constructor() {
// 存储统一启动的构造函数,使用set集合存储
this.compose = new Set();
}
// 添加启动的构造函数
add(cons) {
this.compose.add(cons);
}
// 统一启动
exec() {
this.compose.forEach(f => {
// 实例化对象并调用启动方法
new f().run();
});
}
}
// 实例化组合类
let com = new Compose();
// 添加需要统一管理启动的构造函数
com.add(Carousel);
com.add(Enlarge);
com.add(Tab);
// 某一时刻需要统一启动
com.exec();
- 使用
map
集合实现
// 轮播图构造函数
function Carousel() { }
// 轮播图启动方法
Carousel.prototype.run = function () { console.log('轮播图启动'); }
// 放大镜构造函数
function Enlarge() { }
// 放大镜启动方法
Enlarge.prototype.init = function () { console.log('放大镜启动'); }
// 选项卡构造函数
function Tab() { }
// 选项卡启动方法
Tab.prototype.play = function () { console.log('选项卡启动'); }
// 需要统一调度构造函数实例对象的启动方法,来启动页面内容
// 可以使用组合设计模式(使用一个组合类来管理需要统一启动的内容)
class Compose {
constructor() {
// 存储统一启动的构造函数,使用map集合存储
this.compose = new Map();
}
// 添加启动的构造函数及启动方式
add(cons, fn) {
this.compose.set(cons, fn);
}
// 统一启动
exec() {
this.compose.forEach((fn, cons) => {
// 实例化对象并调用启动方法
new cons()[fn]();
});
}
}
// 实例化组合类
let com = new Compose();
// 添加需要统一管理启动的构造函数
com.add(Carousel, 'run');
com.add(Enlarge, 'init');
com.add(Tab, 'play');
// 某一时刻需要统一启动
com.exec();