您现在的位置是：网站首页 > JavaScript中设计模式的应用场景文章详情
JavaScript中设计模式的应用场景
陈川
【
JavaScript
】
18400人已围观
13700字
JavaScript设计模式是解决特定问题的模板，它们帮助开发者编写更高效、可维护的代码。不同的模式适用于不同的场景，比如创建对象、管理状态或优化性能。理解这些模式的应用场景能显著提升代码质量。
单例模式的应用场景
单例模式确保一个类只有一个实例，并提供一个全局访问点。它适用于需要全局唯一对象的场景，比如配置管理、日志记录或数据库连接池。
class DatabaseConnection {
constructor() {
if (DatabaseConnection.instance) {
return DatabaseConnection.instance;
}
this.connection = this.createConnection();
DatabaseConnection.instance = this;
}
createConnection() {
// 模拟创建数据库连接
console.log('Creating new database connection');
return { status: 'connected' };
}
}
const db1 = new DatabaseConnection();
const db2 = new DatabaseConnection();
console.log(db1 === db2); // true
在React中，单例模式常用于状态管理工具如Redux的store实例。整个应用共享同一个store，确保状态一致性。
工厂模式的应用场景
工厂模式封装了对象的创建过程，适用于需要根据不同条件创建不同类型对象的场景。当对象的创建逻辑复杂或可能变化时，工厂模式能提供更好的灵活性。
class Button {
render() {
throw new Error('Method not implemented');
}
}
class WindowsButton extends Button {
render() {
return '<button style="padding: 8px 16px">Windows</button>';
}
}
class MacButton extends Button {
render() {
return '<button style="padding: 12px 24px">Mac</button>';
}
}
function createButton(os) {
switch (os) {
case 'windows':
return new WindowsButton();
case 'mac':
return new MacButton();
default:
throw new Error('Unsupported OS');
}
}
const button = createButton('mac');
console.log(button.render());
在前端框架中，工厂模式常用于创建不同平台的组件。React Native就使用类似机制来渲染iOS和Android组件。
观察者模式的应用场景
观察者模式定义对象间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会得到通知。它适用于事件处理系统、数据绑定等场景。
class EventEmitter {
constructor() {
this.events = {};
}
on(event, listener) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(listener);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(listener => listener(...args));
}
}
}
const emitter = new EventEmitter();
emitter.on('data', (data) => {
console.log('Received data:', data);
});
emitter.emit('data', { id: 1, value: 'test' });
现代前端框架如Vue和React都内置了观察者模式的实现。Vue的响应式系统就是基于此模式，当数据变化时自动更新视图。
策略模式的应用场景
策略模式定义一系列算法，将它们封装起来并使它们可以相互替换。它适用于需要根据不同条件选择不同算法的场景，如表单验证、支付方式选择等。
class PaymentStrategy {
pay(amount) {
throw new Error('Method not implemented');
}
}
class CreditCardPayment extends PaymentStrategy {
pay(amount) {
console.log(`Paying $${amount} with credit card`);
}
}
class PayPalPayment extends PaymentStrategy {
pay(amount) {
console.log(`Paying $${amount} with PayPal`);
}
}
class PaymentProcessor {
constructor(strategy) {
this.strategy = strategy;
}
setStrategy(strategy) {
this.strategy = strategy;
}
processPayment(amount) {
this.strategy.pay(amount);
}
}
const processor = new PaymentProcessor(new CreditCardPayment());
processor.processPayment(100);
processor.setStrategy(new PayPalPayment());
processor.processPayment(200);
在前端表单验证中，策略模式可以灵活组合不同的验证规则。每个验证规则作为一个独立策略，可以根据需求动态调整验证逻辑。
装饰器模式的应用场景
装饰器模式动态地给对象添加额外职责，相比继承更加灵活。它适用于需要扩展对象功能而不改变其结构的场景，如日志记录、权限控制等。
function withLogging(fn) {
return function(...args) {
console.log(`Calling function with args: ${args}`);
const result = fn.apply(this, args);
console.log(`Function returned: ${result}`);
return result;
};
}
function add(a, b) {
return a + b;
}
const loggedAdd = withLogging(add);
loggedAdd(2, 3);
在React高阶组件中，装饰器模式被广泛使用。通过包装组件添加额外功能，如路由注入、状态管理等，而不修改原始组件代码。
适配器模式的应用场景
适配器模式将一个接口转换成客户端期望的另一个接口，使原本不兼容的类可以一起工作。它适用于集成第三方库、API版本兼容等场景。
class OldAPI {
request() {
return { data: 'old format', status: 200 };
}
}
class NewAPI {
fetch() {
return { result: 'new format', code: 200 };
}
}
class APIAdapter {
constructor(api) {
this.api = api;
}
request() {
if (this.api instanceof OldAPI) {
return this.api.request();
} else if (this.api instanceof NewAPI) {
const response = this.api.fetch();
return { data: response.result, status: response.code };
}
}
}
const oldApi = new OldAPI();
const adapter = new APIAdapter(oldApi);
console.log(adapter.request());
在前端开发中，适配器模式常用于统一不同浏览器的API差异。例如，jQuery就使用适配器模式来提供统一的DOM操作接口。
代理模式的应用场景
代理模式为其他对象提供一种代理以控制对这个对象的访问。它适用于延迟加载、访问控制、日志记录等场景。
class Image {
constructor(url) {
this.url = url;
this.loadImage();
}
loadImage() {
console.log(`Loading image from ${this.url}`);
// 实际加载图片的逻辑
}
display() {
console.log(`Displaying image from ${this.url}`);
}
}
class ImageProxy {
constructor(url) {
this.url = url;
this.image = null;
}
display() {
if (!this.image) {
this.image = new Image(this.url);
}
this.image.display();
}
}
const image = new ImageProxy('example.jpg');
// 图片尚未加载
image.display(); // 此时才会加载图片
在性能优化中，代理模式可以实现图片懒加载。只有当图片进入可视区域时，才加载实际图片资源，减少初始页面加载时间。
状态模式的应用场景
状态模式允许对象在内部状态改变时改变它的行为。它适用于具有复杂状态逻辑的场景，如订单状态机、游戏角色状态等。
class OrderStatus {
constructor(order) {
this.order = order;
}
next() {
throw new Error('Method not implemented');
}
previous() {
throw new Error('Method not implemented');
}
}
class PendingStatus extends OrderStatus {
next() {
this.order.setState(new ProcessingStatus(this.order));
}
previous() {
console.log('Order is already in initial state');
}
}
class ProcessingStatus extends OrderStatus {
next() {
this.order.setState(new ShippedStatus(this.order));
}
previous() {
this.order.setState(new PendingStatus(this.order));
}
}
class Order {
constructor() {
this.state = new PendingStatus(this);
}
setState(state) {
this.state = state;
}
nextState() {
this.state.next();
}
previousState() {
this.state.previous();
}
}
const order = new Order();
order.nextState(); // 从Pending变为Processing
在前端路由管理中，状态模式可以处理不同路由下的页面行为变化。根据当前路由状态，展示不同的UI组件和处理逻辑。
迭代器模式的应用场景
迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素，而又不暴露其内部表示。它适用于遍历集合数据的场景，如树形结构、分页数据等。
class TreeNode {
constructor(value) {
this.value = value;
this.children = [];
}
addChild(node) {
this.children.push(node);
}
[Symbol.iterator]() {
let index = 0;
const stack = [this];
return {
next: () => {
if (stack.length === 0) {
return { done: true };
}
const node = stack.pop();
stack.push(...node.children.reverse());
return {
value: node.value,
done: false
};
}
};
}
}
const root = new TreeNode('root');
const child1 = new TreeNode('child1');
const child2 = new TreeNode('child2');
root.addChild(child1);
root.addChild(child2);
child1.addChild(new TreeNode('grandchild1'));
for (const value of root) {
console.log(value); // root, child1, grandchild1, child2
}
现代JavaScript已经内置了迭代器协议，许多数据结构如Array、Map、Set都实现了迭代器接口。在React中，迭代器模式常用于列表渲染，通过map方法遍历数据生成组件。
组合模式的应用场景
组合模式将对象组合成树形结构以表示"部分-整体"的层次结构。它适用于需要处理树形结构的场景，如UI组件、文件系统等。
class Component {
constructor(name) {
this.name = name;
}
add(component) {
throw new Error('Method not implemented');
}
remove(component) {
throw new Error('Method not implemented');
}
display(depth) {
throw new Error('Method not implemented');
}
}
class Leaf extends Component {
display(depth) {
console.log(`${' '.repeat(depth)}${this.name}`);
}
}
class Composite extends Component {
constructor(name) {
super(name);
this.children = [];
}
add(component) {
this.children.push(component);
}
remove(component) {
const index = this.children.indexOf(component);
if (index !== -1) {
this.children.splice(index, 1);
}
}
display(depth = 0) {
console.log(`${' '.repeat(depth)}${this.name}`);
for (const child of this.children) {
child.display(depth + 2);
}
}
}
const root = new Composite('Root');
const branch1 = new Composite('Branch1');
branch1.add(new Leaf('Leaf1'));
branch1.add(new Leaf('Leaf2'));
root.add(branch1);
root.add(new Leaf('Leaf3'));
root.display();
在React中，组合模式体现在组件嵌套上。父组件可以包含子组件，形成树形结构，这种设计使得UI构建更加灵活和可维护。
命令模式的应用场景
命令模式将请求封装为对象，从而允许参数化客户端与不同请求。它适用于需要支持撤销/重做、任务队列等场景。
class Command {
execute() {
throw new Error('Method not implemented');
}
undo() {
throw new Error('Method not implemented');
}
}
class Light {
turnOn() {
console.log('Light is on');
}
turnOff() {
console.log('Light is off');
}
}
class LightOnCommand extends Command {
constructor(light) {
super();
this.light = light;
}
execute() {
this.light.turnOn();
}
undo() {
this.light.turnOff();
}
}
class RemoteControl {
constructor() {
this.commands = [];
this.history = [];
}
submit(command) {
command.execute();
this.commands.push(command);
}
undo() {
const command = this.commands.pop();
if (command) {
command.undo();
this.history.push(command);
}
}
}
const light = new Light();
const remote = new RemoteControl();
remote.submit(new LightOnCommand(light));
remote.undo();
在前端应用中，命令模式可以实现操作历史记录功能。每个用户操作被封装为命令对象，存储在历史堆栈中，支持撤销和重做操作。
模板方法模式的应用场景
模板方法模式定义算法骨架，将某些步骤延迟到子类实现。它适用于有固定流程但某些步骤可能变化的场景，如构建工具、测试框架等。
class BuildTool {
build() {
this.installDependencies();
this.compile();
this.test();
this.deploy();
}
installDependencies() {
console.log('Installing dependencies...');
}
compile() {
throw new Error('Method not implemented');
}
test() {
console.log('Running tests...');
}
deploy() {
console.log('Deploying application...');
}
}
class WebpackBuild extends BuildTool {
compile() {
console.log('Compiling with Webpack...');
}
}
class RollupBuild extends BuildTool {
compile() {
console.log('Compiling with Rollup...');
}
}
const webpackBuild = new WebpackBuild();
webpackBuild.build();
在前端框架中，模板方法模式常见于生命周期钩子。框架定义组件生命周期的整体流程，开发者只需实现特定阶段的自定义逻辑。
备忘录模式的应用场景
备忘录模式在不破坏封装性的前提下捕获并外部化对象的内部状态，以便之后可以恢复到这个状态。它适用于需要保存和恢复状态的场景，如编辑器撤销、游戏存档等。
class EditorMemento {
constructor(content) {
this.content = content;
}
}
class Editor {
constructor() {
this.content = '';
}
type(text) {
this.content += text;
}
save() {
return new EditorMemento(this.content);
}
restore(memento) {
this.content = memento.content;
}
getContent() {
return this.content;
}
}
const editor = new Editor();
editor.type('First line\n');
const saved = editor.save();
editor.type('Second line\n');
console.log(editor.getContent());
editor.restore(saved);
console.log(editor.getContent());
在富文本编辑器中，备忘录模式可以实现内容版本控制。每个编辑操作都可以保存为一个备忘录，支持回退到任意历史版本。
职责链模式的应用场景
职责链模式使多个对象都有机会处理请求，从而避免请求发送者和接收者之间的耦合关系。它适用于需要多个处理器按顺序处理请求的场景，如中间件管道、事件冒泡等。
class Handler {
constructor() {
this.nextHandler = null;
}
setNext(handler) {
this.nextHandler = handler;
return handler;
}
handle(request) {
if (this.nextHandler) {
return this.nextHandler.handle(request);
}
return null;
}
}
class AuthHandler extends Handler {
handle(request) {
if (request.user && request.user.isAuthenticated) {
console.log('Authentication passed');
return super.handle(request);
}
console.log('Authentication failed');
return false;
}
}
class LoggingHandler extends Handler {
handle(request) {
console.log(`Logging request: ${request.path}`);
return super.handle(request);
}
}
const auth = new AuthHandler();
const logger = new LoggingHandler();
auth.setNext(logger);
auth.handle({
path: '/admin',
user: { isAuthenticated: true }
});
在Express或Koa等Node.js框架中，职责链模式实现了中间件机制。每个中间件可以处理请求或传递给下一个中间件，形成处理管道。
访问者模式的应用场景
访问者模式表示一个作用于某对象结构中的各元素的操作，它可以在不改变各元素类的前提下定义作用于这些元素的新操作。它适用于数据结构稳定但操作可能变化的场景，如AST处理、报表生成等。
class Employee {
constructor(name, salary) {
this.name = name;
this.salary = salary;
}
accept(visitor) {
visitor.visit(this);
}
}
class Department {
constructor() {
this.employees = [];
}
addEmployee(employee) {
this.employees.push(employee);
}
accept(visitor) {
this.employees.forEach(employee => employee.accept(visitor));
}
}
class SalaryReportVisitor {
visit(employee) {
console.log(`${employee.name}'s salary: $${employee.salary}`);
}
}
class TaxCalculationVisitor {
visit(employee) {
const tax = employee.salary * 0.2;
console.log(`${employee.name}'s tax: $${tax}`);
}
}
const dept = new Department();
dept.addEmployee(new Employee('John', 50000));
dept.addEmployee(new Employee('Jane', 60000));
const salaryReport = new SalaryReportVisitor();
dept.accept(salaryReport);
const taxCalc = new TaxCalculationVisitor();
dept.accept(taxCalc);
在Babel等工具中，访问者模式用于遍历和转换抽象语法树(AST)。不同的插件可以定义自己的访问者来处理特定类型的节点，而不需要修改核心遍历逻辑。
中介者模式的应用场景
中介者模式用一个中介对象来封装一系列对象之间的交互，使各对象不需要显式地相互引用。它适用于对象间通信复杂的场景，如聊天室、表单验证等。
class ChatRoom {
showMessage(user, message) {
const time = new Date().toLocaleTimeString();
console.log(`${time} [${user.name}]: ${message}`);
}
}
class User {
constructor(name, chatMediator) {
this.name = name;
this.chatMediator = chatMediator;
}
send(message) {
this.chatMediator.showMessage(this, message);
}
}
const chatRoom = new ChatRoom();
const user1 = new User('John', chatRoom);
const user2 = new User('Jane', chatRoom);
user1.send('Hi there!');
user2.send('Hey!');
在前端组件通信中，中介者模式可以简化父子组件或兄弟组件间的复杂交互。通过引入中央事件总线或状态管理工具作为中介者，组件只需与中介者通信，而不需要直接相互引用。
享元模式的应用场景
享元模式运用共享技术有效地支持大量细粒度对象的复用。它适用于存在大量相似对象的场景，如字符处理、游戏粒子系统等。
class TreeType上一篇： 设计模式的定义与重要性
