摘要：今天我们讨论的是发布观察者模式，也叫订阅模式，在里，该模式要如何实现呢，首先我们先看一个现实生活中的例子小明在工作几年后，准备买房结婚，于是他到售楼处，找售楼人员询问当前的价格，得知售楼价每平是小明好几个月工资的时候，小明犹豫了，于是他回
今天我们讨论的是发布-观察者模式，也叫订阅模式，在javascript里，该模式要如何实现呢，首先我们先看一个现实生活中的例子
小明在工作几年后，准备买房结婚，于是他到售楼处，找售楼人员询问当前的价格，得知售楼价每平是小明好几个月工资的时候，小明犹豫了，于是他回去后，每天都给售楼处打电话，询问售楼人员的价格，售楼人员也会耐心解答，但是第二天又来了一个小芳，于是小芳每天也在打电话，时间久了，人越来越多，售楼人员每天接这么多电话，肯定吃不消要跳槽，当然我们只是举例子，现实情况是，售楼人员会留下小明，小芳等等人的电话存在花名册里，这就是订阅，然后等房价降下来的时候，售楼人员一个个打电话通知他们，这样双方都省了力气，订阅消息的人也拿到了应得的消息。现在假设花名册是 clientList
var salePart = {} // 售楼处
var clientList = [] // 花名册
var xiaoming = {
name: "小明",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
salePart.listen = function (person) { // 售楼处登记来访者的信息
clientList.push(person)
}
salePart.trigger = function (type, price) { // 售楼处通知来访者信息，type为售房面积，price为售房价格
if (clientList.length > 0) {
for (var i = 0, person; person = clientList[i++];) {
if (typeof person.fn === "function") {
person.fn(type, price)
}
}
}
}
salePart.listen(xiaoming)
salePart.trigger("square80", 60000) // 打印出来 小明,square80,60000
下面小芳也要来看房，可是小芳比小明有钱的多，她要看的是200平米的房子，这样把小芳在添加进去的时候，售楼处就不能按照分类来进行通知他们的，200平米的房子的通知小明也能看到，这样小明会更扎心，万一不开心，就会损失一个潜在客户，所以我们还要完善一下上述代码，让售楼处可以按照房屋面积分别通知对应的买房者
var salePart = {} // 售楼处
var clientList = {} // 花名册
var xiaoming = {
name: "小明",
type: "s80",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
var xiaofang = {
name: "小芳",
type: "s200",
fn: function () {
var args = [].slice.call(arguments)
args.unshift(this.name)
console.log(args.join(","))
}
}
salePart.listen = function (person) { // 售楼处登记来访者的信息
var type = person.type
if (!clientList[type] || clientList[type].length < 0) { // 原来的花名册先分类，然后再存入每个人的信息
clientList[type] = []
}
clientList[type].push(person)
}
salePart.trigger = function (type, price) { // 售楼处通知来访者信息，type为售房类型，price为售房价格
if (clientList[type] && clientList[type].length > 0) {
for (var i = 0, person; person = clientList[type][i++];) {
if (typeof person.fn === "function") {
person.fn(type, price)
}
}
}
}
salePart.listen(xiaoming)
salePart.listen(xiaofang)
salePart.trigger("s80", 60000) // 打印出来 小明,square80,60000
salePart.trigger("s200", 200000) // 打印出来 小芳,square200,200000
可以看到，小明只能接收到80平米的房价信息，小芳呢，也只能看到200平米的房价信息，这样售楼处又回到了一片欣欣向荣的社会主义和谐景象，但是在实际开发中，上面的代码并不利于维护，因为很松散，我们可以用对象的方式来把代码重构一下
var SalePart = function () {
this.clientList = {}
}
SalePart.prototype.listen = function () { // 现在我们把该函数处理为可以一次接收多个来访者
var persons = [].slice.call(arguments)
for (var i = 0, p; p = persons[i++];) {
var type = p.type
if (!this.clientList[type] || this.clientList[type].length < 0) {
this.clientList[type] = []
}
this.clientList[type].push(p)
}
}
SalePart.prototype.trigger = function (type, price) {
if (this.clientList[type] && this.clientList[type].length > 0) {
for (var i = 0, p; p = this.clientList[type][i++];) {
if (typeof p.fn === "function") {
p.fn(type, price)
}
}
}
}
var salePart = new SalePart()
salePart.listen(xiaoming, xiaofang)
salePart.trigger("s80", 50000) // 小明,s80,50000 感谢党和国家房价终于降了！
salePart.trigger("s200", 100000) // 小芳,s200,100000 这么便宜，买买买！！！
以上就是本章的内容，结合实际案例希望大家看起来更好理解一些，如有疑问，可以在下方留言，看到后我会尽快回复。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/93586.html
摘要：观察者模式介绍观察者模式又称发布订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。关于内部的观察者模式可以参数这篇文档。总结总之，观察者模式在中的使用是非常广泛的。 javascript观察者模式 介绍 观察者模式又称发布-订阅模式，它定义对象间的一种一对多的依赖关系，当一个对象发生改变的时候，所依赖它的对象都能得到通知。例如：我们订阅...
摘要：缺点不符合开闭原则，如果要改东西很麻烦，继承重写都不合适。预防低水平人员带来的风险。开闭原则，高拓展性。这里的订阅者称为观察者，而被观察者称为发布者，当一个事件发生，发布者会发布通知所有订阅者，并常常以事件对象形式传递消息。 介绍 最近开始给自己每周订个学习任务，学习结果反馈为一篇文章的输出，做好学习记录。 这一周(02.25-03.03)我定的目标是《JavaScript 模式》...
摘要：开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设计模式或者说该使用何种设计模式。本文意在梳理常见设计模式的特点，从而对它们有比较清晰的认知。 showImg(https://segmentfault.com/img/remote/1460000014919705?w=640&h=280); 开发中，我们或多或少地接触了设计模式，但是很多时候不知道自己使用了哪种设...
摘要：发布订阅模式定义对象间的一种一对多的依赖关系当一个对象的状态发生改变时所有依赖于它的对象都将得到通知简单实现定义发布者缓存列表存放订阅者的回调函数定义订阅者发布消息测试订阅者价格订阅者价格发布消息上面的实现方式导致了每个订阅者都会收到发布 发布-订阅模式 定义对象间的一种 一对多 的依赖关系, 当一个对象的状态发生改变时, 所有依赖于它的对象都将得到通知 简单实现 // 定...
阅读 1235·2023-04-25 23:22
阅读 1608·2023-04-25 20:04
阅读 2609·2021-11-22 15:24
阅读 2785·2021-11-11 16:54
阅读 1850·2019-08-30 14:03
阅读 1459·2019-08-29 16:35
阅读 1630·2019-08-26 10:29
阅读 2599·2019-08-23 18:01
