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

2024-01-09 12:52:48

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'));

文章来源:https://blog.csdn.net/weixin_49708498/article/details/135462654
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。