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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!