观察者模式真的看不懂

观察者模式真的看不懂

老师能详细讲解下吗?

这一块的内容只是让我们知道有这个模式吗?感觉示例代码有些复杂

相关代码:

// 观察者
var observer = {
// 订阅集合
subscribes: [],

// 订阅
subscribe: function(type, fn) {
if (!this.subscribes[type]) {
this.subscribes[type] = [];
}

// 收集订阅者的处理
typeof fn === 'function' && this.subscribes[type].push(fn);
},

// 发布 可能会携带一些信息发布出去
publish: function() {
var type = [].shift.call(arguments),
fns = this.subscribes[type];

// 不存在的订阅类型,以及订阅时未传入处理回调的
if (!fns || !fns.length) {
return;
}

// 挨个处理调用
for (var i = 0; i < fns.length; ++i) {
fns[i].apply(this, arguments);
}
},

// 删除订阅
remove: function(type, fn) {
// 删除全部
if (typeof type === 'undefined') {
this.subscribes = [];
return;
}

var fns = this.subscribes[type];

// 不存在的订阅类型,以及订阅时未传入处理回调的
if (!fns || !fns.length) {
return;
}

if (typeof fn === 'undefined') {
fns.length = 0;
return;
}

// 挨个处理删除
for (var i = 0; i < fns.length; ++i) {
if (fns[i] === fn) {
fns.splice(i, 1);
}
}
}
};

// 订阅岗位列表
function jobListForA(jobs) {
console.log('A', jobs);
}

function jobListForB(jobs) {
console.log('B', jobs);
}

// A订阅了笔试成绩
observer.subscribe('job', jobListForA);
// B订阅了笔试成绩
observer.subscribe('job', jobListForB);


// A订阅了笔试成绩
observer.subscribe('examinationA', function(score) {
console.log(score);
});

// B订阅了笔试成绩
observer.subscribe('examinationB', function(score) {
console.log(score);
});

// A订阅了面试结果
observer.subscribe('interviewA', function(result) {
console.log(result);
});

observer.publish('examinationA', 100); // 100
observer.publish('examinationB', 80); // 80
observer.publish('interviewA', '备用'); // 备用

observer.publish('job', ['前端', '后端', '测试']); // 输出A和B的岗位


// B取消订阅了笔试成绩
observer.remove('examinationB');
// A都取消订阅了岗位
observer.remove('job', jobListForA);

observer.publish('examinationB', 80); // 没有可匹配的订阅,无输出
observer.publish('job', ['前端', '后端', '测试']); // 输出B的岗位


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,代码中添加了注释,不用细抠每一句代码,可以大致了解一下流程。

以下方代码为例:

http://img1.sycdn.imooc.com//climg/60cffdd7093510d307520739.jpg

A和B都订阅了笔试成绩,发布之后,A和B都会接收到通知。

也可以看下方这个最常用的小例子:

http://img1.sycdn.imooc.com//climg/60d19d49096ed57c07440240.jpg

订阅就是body绑定了点击事件(时刻准备着,只要一下命令我就会执行事件处理函数),发布就是触发了点击事件(触发事件啦,快去执行事件处理函数吧)。

祝学习愉快~

  • 不厌_ 提问者 #1

    麻烦老师了,这个在实际开发中会经常用到么?

    2021-06-21 11:06:29
好帮手慕言 2021-06-21 15:26:14

同学你好,还是比较常用的,祝学习愉快~

  • 既然是常用的为什么让我们自己看呢?没有视频讲解。

    2021-07-01 10:53:59
  • ​同学你好,实际开发中,阅读文档的能力是比较重要的,老师用视频的形式讲解大部分的知识,使用图文节的形式向大家展示少部分的知识。刚接触可能会觉得有些不好理解,不过总要慢慢开始接触,同学可以先看,如果哪里不懂可以在问答区提问,老师会帮助解答哒~

    2021-07-01 13:42:38
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师