JavaScript观察者模式详解与实现
本文详细介绍JavaScript中的观察者模式（亦称发布-订阅模式）。通过广播通知村民的通俗案例解释其核心原理，并展示从对象字面量到构造函数模式的代码演进。重点讲解如何管理多个目标状态变化及通知分发，帮助开发者理解并应用该设计模式。
推荐阅读：JavaScript观察者模式(经典)
观察者模式定义
1.什么是观察者模式
观察者模式有时也称为发布-订阅模式。在此模式中，存在一个观察者负责管理所有目标对象。当目标状态发生变化时，观察者会发出通知。其原理类似于SQL Server中的发布订阅机制。
通俗原理解析
2.通俗解释
假设过去村中的广播系统充当观察者角色，而每位村民则作为被观察的目标。当村内发生公告或政策变动时，需通过广播渠道发布该消息，从而避免逐户上门通知的繁琐过程。
基础代码实现
上述代码实现了基本的观察者模式。若需支持多个类似场景（如多个村子），可将observer改造为构造函数形式，以提高复用性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者模式</title>
</head>
<body>
<script>
var observer = {//观察者
villagers: [],//村名
addVillager: function (callback) {//增加村名
this.villagers[this.villagers.length] = callback;
},
removeVillager: function (callback) {//移除村名
for (var i = 0; i < this.villagers.length; i++) {
if (this.villagers[i] === callback) {
delete this.villagers[i];
}
}
},
publish: function (info) {//发布信息
for (var i = 0; i < this.villagers.length; i++) {
if (typeof this.villagers[i] === 'function') {
this.villagers[i](info);
}
}
},
make: function (o) {//这里将村子建一个这种广播方式
for (var i in this) {
o[i] = this[i];
}
}
};
var village1 = {};
observer.make(village1);//将村子1建立这种观察者模式
var villager11 = {
read: function (what) {
console.log('我是第一个村子的第一个村名：' + what);
}
};
var villager12 = {
read: function (what) {
console.log('我是第一个村子的第二个村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家来开会呀！！！');
village1.removeVillager(villager11.read);
village1.publish('大家来开会呀！！！');
/* var village2 = {
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
observer.make(village2);//将村子1建立这种观察者模式
var villager21 = {
read: function (what) {
console.log('我是第二个村子的第一个村名：' + what);
}
};
var villager22 = {
read: function (what) {
console.log('我是第二个村子的第二个村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家来领猪肉了！！！');*/
</script>
</body>
</html> 构造函数模式优化
有关JavaScript设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者模式</title>
</head>
<body>
<script>
function Observer(){//观察者，这里采用构造函数，可以对不同村落进行使用
if(!(this instanceof Observer)){
return new Observer();
}
this.villagers = [];
};
Observer.prototype = {
// villagers: [],//村名
addVillager: function (callback) {//增加村名
this.villagers[this.villagers.length] = callback;
},
removeVillager: function (callback) {//移除村名
for (var i = 0; i < this.villagers.length; i++) {
if (this.villagers[i] === callback) {
delete this.villagers[i];
}
}
},
publish: function (info) {//发布信息
for (var i = 0; i < this.villagers.length; i++) {
if (typeof this.villagers[i] === 'function') {
this.villagers[i](info);
}
}
},
make: function (o) {//这里将村子建一个这种广播方式
for (var i in this) {
o[i] = this[i];
}
}
}
var village1 = {};
var observer1 = new Observer();
observer1.make(village1);//将村子1建立这种观察者模式
var villager11 = {
read: function (what) {
console.log('我是第一个村子的第一个村名：' + what);
}
};
var villager12 = {
read: function (what) {
console.log('我是第一个村子的第二个村名：'+what);
}
};
village1.addVillager(villager11.read);
village1.addVillager(villager12.read);
village1.publish('大家来开会呀！！！');
village1.removeVillager(villager11.read);
village1.publish('大家来开会呀！！！');
var village2 = {
myAddVillager:function(callback){
this.addVillager(callback);
},
myRemoveVillager:function(callback){
this.removeVillager(callback);
},
myPublish:function(info){
this.publish(info);
}
};
var observer2 = new Observer();
observer2.make(village2);//将村子1建立这种观察者模式
var villager21 = {
read: function (what) {
console.log('我是第二个村子的第一个村名：' + what);
}
};
var villager22 = {
read: function (what) {
console.log('我是第二个村子的第二个村名：'+what);
}
};
village2.myAddVillager(villager21.read);
village2.myAddVillager(villager22.read);
village2.myPublish('大家来领猪肉了！！！');
</script>
</body>
</html> （注：此处对应结构中的代码块a0和a1，程序将保留完整代码，此处仅处理文本段t6的后续逻辑，实际上t6后紧跟a0，然后t7，然后a1，最后t8。根据结构，t6是代码a0前的说明，t7是代码a1前的说明，t8是结尾。原输入t6说“写到这里...改造成构造函数”，对应a0后的t6？不，结构是t5->a0->t6->a1->t7。t5说“3.代码”，a0是第一个代码块。t6说“写到这里...改造成构造函数”，a1是第二个代码块。t7是结尾。因此： t5: 3.代码 a0: 代码块1 t6: 写到这里观察者模式实现了，但是可能会有多个村子需要这种模式，那我们这里将observer改造成构造函数的方式 a1: 代码块2 t7: 有关Javascript设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！ 等等，原输入texts只有t0-t7。结构是t0,t1,t2,t3,t4,t5,a0,t6,a1,t7。 所以： t0: 推荐阅读... t1: 1.什么是... t2: 观察者模式有时... t3: 2.通俗解释 t4: 假如以前... t5: 3.代码 a0: 代码1 t6: 写到这里... a1: 代码2 t7: 有关... 我的改写： t0: 推荐阅读：JavaScript观察者模式(经典) t1: 1.什么是观察者模式 t2: 观察者模式有时也称为发布-订阅模式。在此模式中，存在一个观察者负责管理所有目标对象。当目标状态发生变化时，观察者会发出通知。其原理类似于SQL Server中的发布订阅机制。 t3: 2.通俗解释 t4: 以村庄广播为例，广播系统充当观察者，而每位村民则是被观察对象。当村内政策或通知发生变化时，只需通过广播发布消息，无需逐户送达，从而简化了通知流程。 t5: 3.代码 （a0代码块保留） t6: 上述代码实现了基本的观察者模式。若需支持多个类似场景（如多个村子），可将observer改造为构造函数形式，以提高复用性。 （a1代码块保留） t7: 有关JavaScript设计模式之观察者模式小编就给大家介绍到这里，希望对大家有所帮助！
什么时候该用JS构造器：与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选？场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38