JS-组合设计模式

设计模式：针对特定问题提出的简洁优化的解决方案

• 当多个实例对象需要统一启动的时候，则可以使用组合设计模式
  • 统一调度实例对象的启动方法，达到启动统一管理

1. 使用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();

2. 使用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();