Ru果你正为一堆 if‑elsenew …重复的日志埋头苦干，那恭喜你——Yi经触碰到了前端项目的“黑洞”。别慌，这篇文章把Zui常用的五大设计模式搬进你的编辑器，让你在几行代码里把烂摊子收拾得井井有条。

一、单例——全局资源只需要一个

想象一下一个弹窗组件在页面上被误创建了十次用户kan到的是层层叠叠的“玻璃碎片”。单例帮你锁死实例，保证整个应用只有一份状态。

实现方式

// modal.js
let instance = null;
export function getModal {
    if  {
        instance = new class Modal {
            show{ console.log; }
            hide{ console.log; }
        };
    }
    return instance;
}

使用时直接：

import { getModal } from './modal.js';
getModal.show;
getModal.hide; // 无论调用多少次dou指向同一个对象

这样一来页面再也不会出现“弹窗堆叠”的尴尬局面。

二、工厂——对象创建交给专职“工匠”

业务里经常要根据按钮类型返回不同的实现。Ru果每个地方dou写 if …，代码必然膨胀。把所有分支集中到工厂里你只需要改动这一个文件。

示例：按钮工厂

class PrimaryButton { click{ console.log; } }
class DangerButton  { click{ console.log; } }
class DefaultButton { click{ console.log; } }
class ButtonFactory {
    create{
        switch{
            case 'primary': return new PrimaryButton;
            case 'danger' : return new DangerButton;
            default       : return new DefaultButton;
        }
    }
}
// 调用
const factory = new ButtonFactory;
const btn = factory.create;
btn.click; // 输出：危险按钮点击

以后再加一种 “success” 按钮，只需在这里新增类并补充一个 case，业务层不受任何波及。

三、观察者——事件驱动解耦合

购物车geng新后需要同步刷新导航栏数字、重新计算优惠、甚至发送埋点。把这些职责全部塞进购物车函数是灾难性的。观察者让每个关注点自行订阅事件，彼此之间不再相互“窥视”。

简易实现

class EventBus{
    constructor{ this.handlers = {}; }
    on{ .push; }
    off{ this.handlers = .filter; }
    emit{
        .forEach);
    }
}
// 实例化
const bus = new EventBus;
// 购物车模块
function addToCart{
    // …省略业务逻辑
    bus.emit;
}
// 其它模块监听
bus.on);
bus.on);

当业务需求变geng，只需要新建一个监听函数即可，无需动到原来的购物车代码。

四、策略——把算法抽离成可切换的“小部件”

折扣计算是Zui典型的场景：普通会员 9 折，黄金会员 8 折……Ru果硬写成 if … else if …，每次新加等级dou要改动核心函数。

策略对象写法

const discountMap = {
    normal : price => price * 1,
    gold   : price => price * 0.8,
    diamond: price => price * 0.7,
};
function calcDiscount{
    const fn = discountMap;
    return fn ? fn : price;
}
// 使用
console.log);   // 160
console.log);// 140

只要在 discountMap 增添新键值，就Neng立即让系统识别新会员等级。

五、装饰器——给函数“穿衣服”，不改内部结构

日志、缓存、权限校验这些横切关注点，总是让人忍不住在业务函数里塞满 console.log/alert. 装饰器提供一种包装机制，让功NengKe以像层层叠加的衣服一样随意组合。

AOP 风格的高阶函数示例

// 日志装饰器
function withLog{
    return function{
        console.info;
        const res = fn.apply;
        console.info;
        return res;
    };
}
// 性Neng计时装饰器
function withTimer{
    return function{
        const start = performance.now;
        const result = fn.apply;
        const end   = performance.now;
        console.warn}ms`);
        return result;
    };
}
// 原始业务函数
function add{ return a+b; }
// 多重装饰：先计时后日志
const enhancedAdd = withLog);
enhancedAdd;
// 控制台会依次打印计时信息和日志信息

Ru果以后想再加入缓存，只需要再写一个 withCache, 用同样方式包裹即可——业务代码一点dou不受影响。

从“面条”到“乐高”，从混沌到可控 🚀

以上五个模式并非独立存在它们经常交叉配合：单例+观察者Ke以构建全局状态管理；工厂+策略让 UI 与业务规则解耦；装饰器+策略则Neng实现灵活的功Neng 。掌握它们，你就拥有了前端项目的一套“急救药箱”。别忘了：

先分析痛点，再选模式。

Poor code ≈ Poor product.

Loving clean code is a habit, not a miracle.

赶紧把这些片段复制进自己的仓库，打开浏览器控制台敲几遍，你会惊讶于那瞬间出现的轻盈感。祝你从此告别 “if‑else 地狱”，迎接 “优雅可维护” 的春天！🌱✨

© 2026 前端小站 | 本文仅作学习交流使用，转载请注明出处。

---