JavaScript 设计模式:观察者模式原理与代码实现
本文深入解析 JavaScript 中的观察者模式,阐述其作为一对多依赖关系解决方案的核心原理。通过进制转换的具体代码示例,展示目标对象与多个观察者之间的交互机制,并总结该模式在分离表示层与数据逻辑层方面的优势及潜在的性能瓶颈。
观察者模式概述
本文通过具体实例解析 JavaScript 中的观察者模式,涵盖其核心原理与实际应用方法,供读者参考学习。
在前文中,我们探讨了针对系统内一对多或多对多关系的解决方案,即采用中介者模式将关联关系集中交由中介者处理。本节将介绍另一种解决一对多问题的经典设计模式:观察者模式。
观察者模式是开发中使用频率极高的设计模式之一,旨在建立对象间的一种依赖关系。其定义为:定义对象之间的一对多依赖关系,使得当一个对象状态发生改变时,所有依赖于它的对象都会收到通知并自动更新。该模式也被称为发布-订阅模式、模型-视图模式、监听模式或从属模式,属于对象行为型模式。
代码实现与原理分析
为了直观理解,我们将使用观察者模式编写一个进制转换的小示例。
以下是具体的代码实现。
var Subject = function(){
var obServer = [];
var _state;
this.getState = function(){
return _state;
}
this.setState = function(state){
_state = state;
this.notifyAllObservers();
}
this.attach = function(ob){
obServer.push(ob);
}
this.notifyAllObservers = function(){
obServer.map(function(item){
item.update();
});
}
}
var BinaryObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Binary String:' + _subject.getState().toString(2));
}
}
var OctalObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Octal String:' + _subject.getState().toString(8));
}
}
var HexaObserver = function(subject){
var _subject = subject;
_subject.attach(this);
this.update = function(){
console.log('Hex String:' + _subject.getState().toString(16));
}
}
var subject = new Subject();
new HexaObserver(subject);
new OctalObserver(subject);
new BinaryObserver(subject);
subject.setState(15);
// Hex String:f
// Octal String:17
// Binary String:1111
在此示例中,Subject 被称为目标(Subject),它是被观察的对象。一个目标可以允许被多个观察者同时观察,这些观察者存储在 obServer 数组中。当目标发生状态变更(change)时,会通知所有注册的观察者。BinaryObserver、OctalObserver 和 HexaObserver 这三个类被称为观察者,它们负责对目标的改变做出反应。在观察者内部,需要维护一个指向目标对象的引用。
模式优缺点与适用场景
以下是对观察者模式的总结。
优点: * 观察者模式能够实现表示层与数据逻辑层的分离,定义了稳定的消息更新传递机制。 * 在观察目标和观察者之间建立了一种抽象耦合。观察目标只需维持一个抽象观察者的集合,无需了解具体的观察者是谁。 * 支持广播通信,观察目标会向所有已注册的观察者发送通知,从而简化了一对多系统的设计难度。
缺点: * 当存在大量观察者时,向所有观察者发送通知会消耗大量时间。 * 如果观察者和目标之间存在循环依赖,可能导致系统崩溃。
适用场景: * 系统中存在一个对象的改变将导致一个或多个其他对象也发生改变的情况。 * 系统中存在大量依赖链,例如 A 影响 B,B 影响 C,C 影响 D。
感兴趣的朋友可以使用在线 HTML/CSS/JavaScript 代码运行工具:http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。
更多关于 JavaScript 相关内容感兴趣的读者可查看本站专题:《javascript 面向对象入门教程》、《JavaScript 错误与调试技巧总结》、《JavaScript 数据结构与算法技巧总结》、《JavaScript 遍历算法与技巧总结》及《JavaScript 数学运算用法总结》。
希望本文所述的 JavaScript 程序设计内容对大家有所帮助。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
