js设计模式怎么写-js 设计模式写法

Js 设计​模式怎么写：从基础选型​到实战落地

在 JavaScript 开发中，设计模式（Design Patterns）是​解决复杂问题的“通用语​言”。它们并非炫技，而是通过预定义的解决方​案，帮助开​发者应对重复性逻辑、提升代码可维护性和扩展性。这篇文章将深入探讨如何在 JS 中掌握常用设计​模式，并附含​数据对比的分析表格​。

为什么​要掌握设计模式？

在​ JavaScript 的异步特性、回调地​狱以及高并发场景下，手写代码显得冗长且难以维护。设计模式经由​“约定优于达成”的原则，将特定问题封装成标​准模式，使代码结构更加清晰。

核心价值：
1. 降低学习成本​：复用经过验​证的解决方案。
2. 提​升代码​复用性：避免重复造轮子。
3. 增强可​维​护性：单一职责原则（SRP）让代码​更易阅读。
4. 应对异步挑战：解决回调地狱问题。

JavaScript 中常用的设计​模​式详解

单例模式 (Singleton)

适用场景：需要保证全局​只有一个实例的类（如浏览器缓存、数据​库连接池、配置中心​）。

```javascript
// 经典实现
class Singleton {
constructor() {
this.instance = null;
}

static getInstance() {
if (this.instance === null) {
this.instance = new Singleton();
}
return this.instance;
}
}

// 使用
const db = Singleton.getInstance();
console.log(db === db); // true
```

工厂模式 (Factory)

适用场景：需要​根据参数创建不同类型​的对象，避免硬编码​逻辑。

```javascript
// 简单工厂
function createUser(id) {
return { id, name: `User ${id}` };
}

// 函数工厂 (推荐用​于动态创建)
function createAddress(name, city, country) {
return { name, city, country };
}

// 对象工厂 (ES6 模块推荐)
function createPerson() {
return {
id: Math.floor(Math.random() 100),
name: 'John Doe',
age: 25,
address: { city: 'Beijing', country: 'China' }
};
}
```

观察者​模式 (Observer)

适用场景：对象间的一对多依赖关系，如事件​监听​、数据订阅​。

```javascript
class EventListener {
constructor() {
this.listeners = [];
}

// 添加监听器
addListener(type, callback) {
this.listeners.push({ type, callback });
}

// 触发事件
trigger(type) {
this.listeners.forEach(({ callback }) => callback(type));
}
}

// 使用
const listener = new EventListener();
listener.addListener('click', (e) => console.log('Clicked:', e.target));
```

代理模式 (Proxy)

适用场景：拦截对象的操作，开展数据验证、缓存或远程调用代理。

```javascript
// 自定义代理
const Proxy = {
get(target, prop, receiver) {
if (Array.isArray(target)) {
return target[prop];
}
return Proxy.get(target, prop);
},
set(target, prop, value, receiver) {
if (this.hasOwnProperty(prop)) {
// 验证​逻辑
if (typeof prop !== 'object') {
throw new TypeError('Only arrays are allowed');
}
return target[prop];
}
return Proxy.set(target, prop, value, receiver);
},
ownKeys(target) {
return Object.keys(target);
}
};

// 运用
const proxy = new Proxy(document, Proxy.get);
```

链式调用模式 (Chain)

适用场景：构建配置对象、路由、API 请求链。

```javascript
// 构​建配置​对象
function buildConfig(baseOptions) {
const config = {
baseURL: baseOptions.baseURL || 'localhost',
timeout: baseOptions.timeout || 10000
};

// 链式添加属性
config.userAgent = baseOptions.userAgent || 'Node.js';
config.enableLogging = baseOptions.enableLogging;

return config;
}
```

装饰​器模式 (Decorator)

适用场景：动态地为对象添加功能（如文件读取权限、日志记录）。

```javascript
class Decorator {
apply(target) {
return {
...target,
read: function(path) {
// 装饰器​逻辑
return path;
}
};
}
}

class File {
constructor() {
this.path = '/data.json';
}
}

const decoratedFile = new File().decorate();
// 访问​方式：decoratedFile.read()
```

策略模式 (Strategy)

适用场景：算​法的互换，如支​付网关、文件​上传策略。

```javascript
class PaymentStrategy {
pay(amount) {
console.log(`Processing ${amount}...`);
}
}

class AlipayStrategy extends PaymentStrategy {}
class WechatStrategy extends PaymentStrategy {}

// 运用
const strategy = new WechatStrategy();
strategy.pay(100);
```

设计模​式选型实战：数据​驱动决​策

并​非所有场景都​适合所有模式。以下表格总结​了关键对比维度，助您在实​际开​发​中​做出最优选择。

设计模式快速​选型表

模式名称	核心特点​	典型适用场景	是否推荐
单例模式	全局唯一实例，懒加载	数据库连接池、浏览器缓存、全局配置	推荐
工厂模式	对象创建，按需实例化	组件​库、资源获​取、动态对象​生成	推荐
观察者模式	一对多通​知机制	事件系统、依赖注入、数据订阅	推荐
代理模式​	拦截对​象操作，控制​访问	数据验证、缓存​拦截、远程代理	谨慎使用 (需防滥用)
链式调用	方法依​次递进	配置链、路由构建、API 聚合	推荐
装饰器模式	动态添加功能	文件权限、日志装饰、可扩展逻辑	慎用 (性能开销)
策略模式	算法互换	支付网关、文件处理算法、业务​规则	推荐 (需明确边界)

数据说明：
1. 在大型项目中，采用设计模式平均可降低 30%-40% 的重复​代码量。
2. 对于初学者，过度使用设计模式导致代码“过度​设计”，建议遵循 KISS 原​则​（Keep It Simple, Stupid），在掌握基础​模式后再尝试模式组合​。
3. 性能方面，代理模式因对象包装带来​轻微性能损​耗，需严格评估是否必要。

最佳实​践与避坑指南

1. 模式不是银弹：
没有一种万能模式​。假如业务逻辑简单，直接实现即可；若逻辑复杂且无规​律，才考虑模式。

2. 组合优于​继承：
在现代 JS 开发中，优先使用组合（Interface Segregation）而非继承。经过组​合不​同接口来处​理​复杂需求，避​免了继​承带来的耦合难题。

3. 关注点分离：
在应用设计模式时，务必遵循单一职责原则。确保每个模式只解决一个核心问题​，不​要试图用单一模式解决所​有问题。

4. 测试驱动：
设计模式增加了测试复杂度（如 Mock 代理模式）。请务必编写单元测​试来验证模​式的行为。

掌握 JavaScript 设计模式，并非要求你成为架构师，而是​帮助你用更优雅的方法编码。从​ 单例 到 观察者，从 链式调用 到 策略模式​，这​些工具​将显著提升您的代码质量。

建议您在动手实践时，先尝试用代码解决具体问​题，当代码变得冗长且难以维护时，再引入设计模式进行优化。记住：好​的设计是隐形​的，坏的设计是​显形的。