前端 Class 不是花架子！3 个大厂常用场景，告诉你它有多实用

Class：让前端代码"写一次，到处用"的实操指南

不想再看枯燥的概念？下面直接告诉你：Class 到底是什么、怎么写、在哪些场景立刻能用、能帮你省多少事。

一、Class 到底是什么？一句话记住

"把数据和方法打包成一个可复制的小机器，随用随 new，改一次全站生效。"

二、5 分钟上手：怎么写？

1. 最简模板------照抄就能用

javascript 复制代码

class 业务名 {
  constructor(必要参数) {
    this.属性 = 值;          // 实例自己的数据
  }
  
  方法1() { /* 业务逻辑 */ }
  方法2() { /* 业务逻辑 */ }
}

真实例子：表单校验器

需求：3 个页面都有"手机号+验证码"输入，规则一样。

javascript 复制代码

class MobileValidator {
  constructor() {
    this.rules = {
      mobile: /^1[3-9]\d{9}$/,
      code: /^\d{6}$/
    };
  }
  
  validate(field, val) {
    return this.rules[field]?.test(val) || false;
  }
  
  getErrorMsg(field) {
    const map = { mobile: '手机号格式错误', code: '验证码6位数字' };
    return map[field];
  }
}

// 任意页面直接丢进去
const v = new MobileValidator();
v.validate('mobile', '13800138000'); // true

收益：以后规则一改，只改这一处，3 个页面同步生效。

2. 继承------"老代码不动，新功能叠加"

需求：后台两个弹窗，基础弹窗 只负责居中 + 蒙层；确认弹窗 额外需要"确定/取消"按钮。

javascript 复制代码

// 老代码
class BaseModal {
  constructor(content) {
    this.content = content;
  }
  show() {
    // 生成蒙层+居中
  }
  hide() {
    // 移除蒙层
  }
}

// 新需求：不碰老代码，直接继承
class ConfirmModal extends BaseModal {
  constructor(content, onOk) {
    super(content);   // 复用蒙层逻辑
    this.onOk = onOk;
  }
  show() {
    super.show();     // 先复用
    this.renderBtn(); // 再追加按钮
  }
  renderBtn() {
    // 生成确定/取消按钮
  }
}

// 用
new ConfirmModal('确定删除？', () => fetch('/api/del')).show();

收益：老弹窗稳如老狗，新弹窗 10 行代码搞定，零回归测试。

3. 静态方法------直接把类当工具包

需求：项目里到处要转"价格分 → 元"，全局用。

javascript 复制代码

class Price {
  static toYuan(fen) {
    return (fen / 100).toFixed(2);
  }
  static toFen(yuan) {
    return Math.round(yuan * 100);
  }
}

// 任何文件直接调，不用 new
Price.toYuan(1999); // "19.99"

收益：告别全局乱飘的 formatMoney 函数，统一收口，改单位只改 1 行。

三、开发中最常落地的 4 个场景

场景	不用 Class 的痛点	用了 Class 的爽点	实现成本
1. 表单校验	每份表单复制一套 `if/else`	一套规则多处复用	20 行
2. 轮询/倒计时	`setInterval` 散落各处，忘记清定时器	封装一次，自动回收定时器	30 行
3. 接口缓存	同一份数据多次请求	类里加 `Map` 做内存缓存，5 分钟搞定	15 行
4. 组件库	每个按钮重复 `disabled` 逻辑	抽象 `BaseComponent` 继承即可	1 次

四、完整小项目：带缓存的 HTTP 请求器

需求：

页面 A、B 都要拿"字典数据"；
10 分钟内不再重复请求；
任意组件都能用。

javascript 复制代码

class DictService {
  static #cache = new Map();        // 私有缓存
  static TTL = 10 * 60 * 1000;      // 10 分钟

  static async get(code) {
    const key = `dict_${code}`;
    const hit = this.#cache.get(key);
    if (hit && Date.now() - hit.time < this.TTL) {
      return hit.data;              // 直接返回缓存
    }
    const { data } = await fetch(`/api/dict/${code}`).then(r => r.json());
    this.#cache.set(key, { data, time: Date.now() });
    return data;
  }
}

// 任意组件
const list = await DictService.get('city');

收益：

业务代码 0 改动，网络请求瞬间砍半；
缓存逻辑封装在类里，外部无感，测试只测这一处即可。

五、快速 checklist：什么时候该用 Class

3 次以上重复出现的 数据 + 行为 → 直接封装；
老功能要扩展，又不想改原文件 → 继承；
全局通用、无状态的工具 → 静态方法；
需要保护内部变量不被外部篡改 → 私有属性 #。

六、一句话总结

Class = "复制粘贴克星" ：

把重复代码变成可 new、可继承、可缓存、可组合的小积木，写一次，以后只加功能不加班。