设计模式_JS实现与应用

单例模式确保一个类仅有一个实例并提供全局访问点，适用于配置管理等场景；工厂模式封装对象创建逻辑，实现创建与使用的解耦；观察者模式建立一对多依赖，状态变化时自动通知所有观察者，广泛用于事件系统和响应式框架；装饰器模式通过高阶函数或语法动态扩展功能，适合日志、权限等横切逻辑；策略模式将算法封装为可互换的策略对象，便于灵活切换行为，如表单验证或多算法选择。J*aScript的灵活性使这些模式实现更简洁高效。

设计模式_js实现与应用

设计模式是软件开发中常见问题的可复用解决方案。在J*aScript中，由于其灵活的语言特性（如函数是一等公民、动态类型、原型继承等），许多经典的设计模式可以以更简洁或不同的方式实现。下面介绍几种常用的设计模式及其在JS中的实现与应用场景。

1. 单例模式（Singleton Pattern）

单例模式确保一个类只有一个实例，并提供一个全局访问点。

在J*aScript中，可以通过闭包或模块模式来实现单例：

const Singleton = (function () {
  let instance;

  function createInstance() {
    return { name: 'I am the only instance' };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// 使用
const obj1 = Singleton.getInstance();
const obj2 = Singleton.getInstance();
console.log(obj1 === obj2); // true

适用于：配置管理、日志记录器、全局状态管理等需要唯一实例的场景。

2. 工厂模式（Factory Pattern）

工厂模式用于创建对象，而无需指定具体的类。它将对象的创建逻辑封装起来。

function AnimalFactory(type) {
  if (type === 'dog') {
    return {
      speak: () => console.log('Woof!')
    };
  } else if (type === 'cat') {
    return {
      speak: () => console.log('Meow!')
    };
  }
}

// 使用
const dog = AnimalFactory('dog');
const cat = AnimalFactory('cat');
dog.speak(); // Woof!
cat.speak(); // Meow!

适用于：需要根据条件创建不同对象类型，且希望解耦创建逻辑与使用逻辑的情况。

3. 观察者模式（Observer Pattern）

观察者模式定义了对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会收到通知。

在前端开发中，这种模式广泛应用于事件系统和响应式数据绑定。

45°C商城系统

系统介绍 45°C 商城系统，以 Thinkphp5.0 + Uniapp + Layui2.9 + Vue 为技术基石，精心打造出的全新 MINI 商城应用。其功能覆盖全面，无论是 PC 商城、H5 商城，还是公众号商城、微信小程序以及抖音小程序的制作都能完美胜任。采用标准系统结合插件模式开发，用户能够极为便捷地定制专属的个性模块。整个系统，从程序设计到 UI 呈现，都秉持着一贯的小而美理念。程

0 查看详情 45°C商城系统

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('Received:', data);
  }
}

// 使用
const subject = new Subject();
const obs1 = new Observer();
const obs2 = new Observer();

subject.subscribe(obs1);
subject.subscribe(obs2);
subject.notify('Hello Observers!'); // 两个观察者都会收到消息

适用于：事件总线、发布/订阅系统、Vue或React中的响应式更新机制。

4. 装饰器模式（Decorator Pattern）

装饰器模式允许在不修改原有对象的基础上，动态地扩展其功能。

J*aScript中可以通过高阶函数或ESNext的装饰器语法（需编译支持）实现。

function logDecorator(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(2, 3); 
// 输出：
// Calling add with [2, 3]
// Result: 5

适用于：日志记录、权限校验、性能监控等横切关注点的增强。

5. 策略模式（Strategy Pattern）

策略模式将算法或行为封装成独立的策略对象，使它们可以互换使用。

const strategies = {
  'fast': () => console.log('Running fast strategy'),
  'slow': () => console.log('Running slow strategy'),
  'balanced': () => console.log('Running balanced strategy')
};

function runStrategy(name) {
  if (strategies[name]) {
    strategies[name]();
  } else {
    console.log('Unknown strategy');
  }
}

// 使用
runStrategy('fast');     // Running fast strategy
runStrategy('balanced'); // Running balanced strategy

适用于：表单验证、动画效果选择、算法切换等需要灵活替换逻辑的场景。

基本上就这些。J*aScript凭借其灵活性，让设计模式的实现更加轻量和直观。理解这些模式的核心思想比死记硬背更重要，合理运用能显著提升代码的可维护性和扩展性。

以上就是设计模式_JS实现与应用的详细内容，更多请关注其它相关文章！

# 高阶 # 济源抖音seo价格 # 萧山区企业网站优化平台 # 网站优化信息文案模板 # 如何找到网站建设客户 # 商水网站建设优化 # 石景山做网站建设 # 宝岛饲料网站建设方案 # 平谷网站建设推广 # 推广营销方案简单 # 资阳网站推广外包 # 基础上 # 死记硬背 # 横切 # 记录器 # 配置管理 # vue # 服务端 # 可以通过 # 表单 # 适用于 # speak # 常见问题 # 软件开发 # 前端开发 # app # 前端 # js # java # javascript # react

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-11-18

4008744355

设计模式_JS实现与应用

1. 单例模式（Singleton Pattern）

2. 工厂模式（Factory Pattern）

3. 观察者模式（Observer Pattern）

4. 装饰器模式（Decorator Pattern）

5. 策略模式（Strategy Pattern）

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

4008744355

服务/方案/案例/支持

关于我们

Notice