四、项目设计与架构
1. 设计模式
观察者模式 vs 发布订阅模式
-
观察者模式：
- 直接依赖：观察者直接订阅目标对象，目标对象维护观察者列表。
- 适用场景：简单的一对多依赖关系（如事件监听）。
- 示例：
javascript">class Subject {constructor() {this.observers = [];}addObserver(observer) {this.observers.push(observer);}notify(data) {this.observers.forEach(observer => observer.update(data));} }class Observer {update(data) {console.log("Received data:", data);} }const subject = new Subject(); const observer = new Observer(); subject.addObserver(observer); subject.notify("Hello");
-
发布订阅模式：
- 解耦：通过事件中心（Event Bus）管理订阅和发布，发布者和订阅者不直接通信。
- 适用场景：复杂的多对多通信（如跨组件通信、微前端）。
- 示例：
javascript">class EventBus {constructor() {this.events = {};}on(event, callback) {if (!this.events[event]) this.events[event] = [];this.events[event].push(callback);}emit(event, data) {if (this.events[event]) {this.events[event].forEach(callback => callback(data));}} }const eventBus = new EventBus(); eventBus.on("message", data => console.log("Received:", data)); eventBus.emit("message", "Hello");
单例模式
- 核心思想：确保一个类只有一个实例，并提供全局访问点。
- 应用场景：全局状态管理（如 Redux Store）、日志工具、数据库连接池。
- 实现方式：
javascript">class Singleton {constructor() {if (!Singleton.instance) {Singleton.instance = this;}return Singleton.instance;} }const instance1 = new Singleton(); const instance2 = new Singleton(); console.log(instance1 === instance2); // true
组件设计：高阶组件（HOC）与自定义 Hook
-
高阶组件（HOC）：
- 接收组件作为参数，返回增强后的组件。
- 示例：
javascript">function withLoading(WrappedComponent) {return function(props) {const [loading, setLoading] = useState(true);useEffect(() => {setTimeout(() => setLoading(false), 1000);}, []);return loading ? <Spinner /> : <WrappedComponent {...props} />;}; }const EnhancedComponent = withLoading(MyComponent);
-
自定义 Hook：
- 封装可复用的逻辑（如数据获取、表单处理）。
- 示例：
javascript">function useFetch(url) {const [data, setData] = useState(null);useEffect(() => {fetch(url).then(response => response.json()).then(data => setData(data));}, [url]);return data; }function MyComponent() {const data = useFetch("/api/data");return <div>{JSON.stringify(data)}</div>; }
2. 工程规范
代码规范：ESLint + Prettier
- ESLint：检查代码质量（如未使用的变量、错误的语法）。
- 配置：
{"extends": ["eslint:recommended", "plugin:react/recommended"],"rules": {"no-console": "warn","react/prop-types": "off"} }
- 配置：
- Prettier：格式化代码（如缩进、换行）。
- 配置：
{"semi": true,"singleQuote": true,"tabWidth": 2 }
- 配置：
- 集成：在 VSCode 中保存时自动格式化。
Git Commit 规范
- Angular 规范：
<type>(<scope>): <subject> <body> <footer>- type：
feat（新功能）、fix（修复）、docs（文档）、style（样式）、refactor（重构）、test（测试）、chore（构建/工具）。 - scope：影响范围（如模块、组件）。
- subject：简短描述。
- 示例：
feat(user): add login functionality fix(auth): resolve token expiration issue
- type：
协作流程：Git Flow + CI/CD
- Git Flow：
main：稳定版本。develop：开发分支。feature/xxx：功能分支。release/xxx：预发布分支。hotfix/xxx：紧急修复分支。
- CI/CD 集成：
- 自动化测试：每次提交运行单元测试、E2E 测试。
- 镜像构建：通过 Dockerfile 构建镜像并推送到镜像仓库。
- 部署：自动部署到测试/生产环境（如 Kubernetes）。
3. 安全与监控
安全防护
- XSS 防御：
- 输入过滤：对用户输入进行转义（如
<>转义为<>）。 - 使用安全的库：如 React 自动转义 JSX 中的变量。
- 设置 HTTP 头：
Content-Security-Policy限制脚本加载。
- 输入过滤：对用户输入进行转义（如
- CSRF 防御：
- 使用 CSRF Token：每次请求验证 Token。
- 设置 SameSite Cookie：防止跨站请求伪造。
错误监控
- 全局异常捕获：
javascript">window.onerror = (message, source, lineno, colno, error) => {console.error("Global error:", message, error);// 上报到 Sentry }; - Sentry 集成：
javascript">import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "YOUR_DSN" });
性能监控
- Lighthouse：
- 本地运行：Chrome DevTools 中的 Lighthouse 面板。
- CI 集成：通过
lighthouse-ci自动化性能测试。
- 性能指标：
- FCP、TTI、LCP（最大内容绘制）、CLS（累积布局偏移）。
总结
- 设计模式：观察者模式适合简单场景，发布订阅模式适合复杂通信，单例模式用于全局唯一实例。
- 工程规范：ESLint/Prettier 保证代码质量，Git Commit 规范提升协作效率，Git Flow + CI/CD 实现自动化流程。
- 安全与监控：防御 XSS/CSRF，捕获全局异常，监控性能指标。
