JS设计模式核心代码,未完待续......

1、观察者模式

// 观察目标
class Subject {
    constructor() {
        // 设置观察者池
        this.observers = [];
    }
    // 增加观察者
    add (observe) {
        this.observers.push(observe);
    }
    // 移除观察者
    remove(observer) {
        this.observers = this.observers.filter(item => item !== observer);
    }
    // 通知
    notify() {
        // 循环执行观察者调用更新信息
        this.observers.forEach(item => item.updata());
    }
}
// 观察对象
class Observer {
    constructor(name) {
        // 观察者名字
        this.name = name;
    }
    // 观察者被更新了
    updata() {
        console.log('name', this.name);
    }
}

const stu = new Subject();
const observer = new Observer('康健');
stu.add(observer);
stu.notify();
stu.remove(observer);

2、发布订阅模式

// 定义一个发布订阅的中枢
const PubSub = {
	// 订阅台,可以定义事件类型
    meaasge: {},
    /**
    * 发布
    * @type 事件类型
    * @data 事件所需参数
	*/

    publish(type, data) {
    	// 若发布的事件类型不存在,就直接return
        if (!this.meaasge[type]) {
            return;
        }
        else {
            this.meaasge[type].forEach(item => item(data));
        }
    },
    /**
    * 订阅
    * @type 事件类型
    * @cb 执行函数
	*/
    subscribe(type, cb) {
    	// 若订阅的事件类型不存在,就直接将
        if (!this.meaasge[type]) {
            this.meaasge[type] = [cb];
        }
        else {
            this.meaasge[type].push(cb);
        }
    }
}

function testA(data) {
    console.log('testA', data);
}

function testB() {
    console.log('testB', data);
}

PubSub.subscribe('AAA' ,testA);
PubSub.subscribe('BBB' ,testB);

PubSub.publish('AAA', testA('my name is TestA'));
PubSub.publish('BBB', testA('my name is TestB'));
  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值