← 返回目录

前端技术架构：模块化、工程化与设计模式

高级 · 第 10 篇 ·

为什么需要架构思维

当项目从几百行代码膨胀到几万行时，没有架构的代码会变成难以维护的「意大利面条」。前端架构解决的核心问题是：如何让代码可预测、可测试、可协作、可扩展。

模块化演进

// 阶段一：全局变量（噩梦）
window.userData = { name: 'Tom' };

// 阶段二：IIFE 沙箱
(function() {
  var private = '内部变量';
  window.module = { /* 暴露公共接口 */ };
})();

// 阶段三：CommonJS（Node.js）
const math = require('./math');

// 阶段四：ES Modules（现代标准）
import { formatDate } from './utils.js';
export const API_URL = 'https://api.example.com';

工程化体系

// Vite 配置
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    proxy: { '/api': 'http://localhost:8080' },
  },
  build: {
    outDir: 'dist',
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] },
      },
    },
  },
});

设计模式在前端的应用

单例模式：全局状态管理

class Store {
  constructor(initialState = {}) {
    this.state = initialState;
    this.listeners = [];
  }
  getState() { return this.state; }
  setState(updater) {
    this.state = { ...this.state, ...updater };
    this.listeners.forEach(fn => fn(this.state));
  }
  subscribe(fn) {
    this.listeners.push(fn);
    return () => { this.listeners = this.listeners.filter(l => l !== fn); };
  }
}

策略模式：表单验证

const validators = {
  required: (value) => value ? '' : '此项为必填',
  email: (value) => /\S+@\S+\.\S+/.test(value) ? '' : '邮箱格式不正确',
  minLength: (min) => (value) =>
    value.length >= min ? '' : `最少${min}个字符`,
};

function validate(value, rules) {
  for (const rule of rules) {
    const error = rule(value);
    if (error) return error;
  }
  return '';
}

组件化设计原则

// 单一职责：每个组件只做一件事
class UserInfo { /* 只管用户信息 */ }
class OrderList { /* 只管订单列表 */ }

// 组合优于继承
function withLoading(Component) {
  return function LoadingWrapper(props) {
    if (props.loading) return <div>加载中...</div>;
    return <Component {...props} />;
  };
}

项目目录结构规范

src/
├── components/          # 通用组件
│   ├── Button/
│   └── Modal/
├── features/            # 业务模块（按功能划分）
│   ├── auth/
│   └── dashboard/
├── hooks/               # 自定义 hooks
├── utils/               # 纯函数工具
├── api/                 # 接口请求封装
├── styles/              # 全局样式
└── App.jsx

代码质量保障

# ESLint + Prettier 配置
module.exports = {
  extends: ['eslint:recommended'],
  rules: {
    'no-unused-vars': 'error',
    'prefer-const': 'error',
  },
};

# Git 提交规范
feat: 新增用户登录功能
fix: 修复订单列表分页错误
refactor: 重构支付模块代码结构

小结

前端架构不是一开始就设计出来的，而是在项目演进中逐步形成的。核心原则：模块化拆分、组件化封装、单一职责、关注点分离。先写能工作的代码，再持续重构到更好的架构。

🎉 恭喜你完成了全部 10 篇教程！从 HTML 基础到技术架构，你已经建立了完整的前端知识体系。