单例模式确保类唯一实例并提供全局访问，核心是延迟初始化与实例缓存；观察者模式实现一对多依赖通知，含Subject与Observer角色，需注意内存泄漏与取消订阅。
单例模式确保一个类只有一个实例，并提供全局访问点；观察者模式定义对象间一对多依赖，当一个对象状态改变，所有依赖者自动收到通知。两者在 JavaScript 中实现简洁但需注意细节。
单例模式：用闭包或类+静态属性控制实例唯一性
核心是“延迟初始化 + 实例缓存”。避免每次 new 都创建新对象。
传统闭包写法（兼容性好）：
const Singleton = (function() {
let instance;
function createInstance() {
return {
data: [],
add(item) { this.data.push(item); },
get() { return this.data; }
};
}
return {
getInstance() {
if (!instance) {
instance = createInstance();
}
return instance;
}
};
})();
// 使用
const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true
ES6 Class 写法（更现代）：
class Logger {
static #instance;
constructor() {
if (Logger.#instance) {
throw new Error(“Already instantiated”);
}
Logger.#instance = this;
}
static getInstance() {
if (!Logger.#instance) {
new Logger();
}
return Logger.#instance;
}
log(msg) { console.log(“[LOG]”, msg); }
}
// 使用
const logger1 = Logger.getInstance();
const logger2 = Logger.getInstance();
console.log(logger1 === logger2); // true
观察者模式：手动实现发布-订阅机制
关键角色：Subject（被观察者）、Observer（观察者）。不依赖第三方库，纯 JS 就能搭出轻量通信总线。
基础版 Subject 类：
class EventTarget {
constructor() {
this.observers = new Map();
}
subscribe(event, callback) {
if (!this.observers.has(event)) {
this.observers.set(event, new Set());
}
this.observers.get(event).add(callback);
}
unsubscribe(event, callback) {
if (this.observers.has(event)) {
this.observers.get(event).delete(callback);
}
}
notify(event, data) {
if (this.observers.has(event)) {
for (const cb of this.observers.get(event)) {
cb(data);
}
}
}
}
// 使用示例
const bus = new EventTarget();
bus.subscribe(“user-login”, (user) => console.log(“欢迎”, user.name));
bus.subscribe(“user-login”, (user) => console.log(“更新头像”));
bus.notify(“user-login”, { name: “张三” }); 进阶建议：
– 用 WeakMap 存 observer 可避免内存泄漏（尤其 DOM 元素作为 observer 时）
– 加入 once 方法支持一次性监听
– notify 支持异步（如 Promise.all）避免阻塞主线程
实际用在哪？别硬套，看场景
单例适合：全局配置管理、日志器、状态仓库（如简易版 store）、WebSocket 连接实例。
观察者适合：组件通信（尤其无框架时）、表单联动、事件解耦（比如按钮点击后多个模块响应）、状态变更广播。
基本上就这些。两种模式都不复杂，但容易忽略边界情况——比如单例没防 new，观察者没做取消订阅，上线后可能悄悄吃内存。
立即学习“Java免费学习笔记（深入）”；
以上就是javascript如何实现设计模式_单例模式和观察者模式如何写的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541594.html
微信扫一扫 
支付宝扫一扫 
