JavaScript 设计模式

var Parents = (function () {
    // 夫妻双方（构造函数）
    function Parents() {
        this.date = ‘出生时间：‘ + new Date();
        this.father = ‘父亲：XXX‘;
        this.mather = ‘母亲：XXX‘;
        this.palce = ‘出生地：XXX‘;
    }
    Parents.prototype.hospital = function () {};

    var instance = null;
    function singleton() {
        if (!instance) {
            //如果没有实例化一个对象的话，就实例一个new Parents()
            instance = new Parents();
        }
        
        return instance
    }
    //如果已经实例化一个对象的话，直接返回之前已经实例化的对象
    return singleton
})()
//实例化对象
var child1 = new Parents() // 相当于在执行 singleton 函数, 第一次的时候会得到一个 Parents 的实例
var child2 = new Parents() // 相当于在执行 singleton 函数, 第二次的时候, 依旧得到第一次的实例
console.log(child1 === child2) // true也就是两次实例化对象都指向同一个地址

// 多个部件的对象
// 第一个构造函数
class Play {
    constructor(){};
    init(){
        console.log(‘game begin‘);
        this.gameA();
        this.gameB();
        this.gameC();
    };
    gameA(){};
    gameB(){};
    gameC(){};
}
// 第二个构造函数
class Eat{
    constructor(){};
    init(){
        console.log(‘eat dinner‘);
    }
}
// 第三个构造函数
class Sleep{
    constructor(){};
    init(){
        console.log(‘go to sleep‘);
    }
}
// 单一实体
class Compose{
    constructor(){
        // 用来承载每一个实例的数组
        this.composeArr=[];
    }
    add(instance){
        //多个部件的对象 放入 单一实体
        this.composeArr.push(instance);
    }
    
    init(){
        //console.log(‘执行单一实体‘);
        // 把数组里面的每一个内容调用了
        this.composeArr.forEach(item => item.init())
    }
}
let oCompose = new Compose();
// 每一次执行 add 方法就是向 oCompose 上添加内容
oCompose.add(new Play());
oCompose.add(new Eat());
oCompose.add(new Sleep());
// oCompose 里面的每一个构造函数就同时调用了
oCompose.init();
console.log(oCompose);

class Observer {
    constructor () {
        // 准备的一个微信公众号
        this.message = {}
    }

    // 关注公众号（订阅）
    on (type, fn) {
        // 向消息盒子里面添加成员
        // type 事件类型（你要订阅的类型）
        // fn 事件处理函数（你要给这个类型订阅一个什么行为）
        if (!this.message[type]) {
            // 表示 this.message 里面没有这个成员
            this.message[type] = []
        }

        this.message[type].push(fn)
    }

    // 取消关注公众号（取消订阅）
    off (type, fn) {
        // 删除消息盒子里面的某一个成员
        // type 是你要取消的事件类型
        // fn 是你要取消的事件处理函数
        if (!this.message[type]) return
        // 能执行到这里, 表示 this.message[type] 是一个数组
        // 取消这个数组里面和 fn 一样的那个事件处理函数
        //   使用过滤器 filter 方法
        this.message[type] = this.message[type].filter(item => item !== fn)
    }

    // 微信粉丝发布的信息
    emit (type, ...arg) {
        // 执行消息盒子里面的某一个对应的处理函数
        // type 就是你要触发的事件类型
        // 判断你有没有订阅过, 如果没有订阅过, 直接return
        if (!this.message[type]) return
        // console.log(arg)
        // arg 是发布的文章 
        var event = {
            // 文章标题
            data: arg
        }
        // 调用每一个事件处理函数的时候, 都给你带上一个事件对象
        // 如果你订阅过, 那么就执行一下
        this.message[type].forEach(item => item(event))
    }
}

var o = new Observer()

// 粉丝 A B C D E 订阅公众号
o.on(‘click‘, handlerA)
o.on(‘click‘, handlerB)
o.on(‘click‘, handlerC)
o.on(‘click‘, handlerD)
o.on(‘click‘, handlerE)

// 粉丝 A 取消订阅
o.off(‘click‘, handlerA)

// 公众号发布文章，粉丝 B C D E 收到
o.emit(‘click‘, ‘文章一‘,‘文章二‘,‘文章三‘)
// 发布事件
// 把你订阅好的事件处理函数都给你触发了
// console.log(o)

// 粉丝 A B C D E 
// e 接收公众号发布的文章
function handlerA(e) { console.log(‘粉丝A‘, e) }
function handlerB(e) { console.log(‘粉丝B‘, e) }
function handlerC(e) { console.log(‘粉丝C‘, e) }
function handlerD(e) { console.log(‘粉丝D‘, e) }
function handlerE(e) { console.log(‘粉丝E‘, e) }