前端工程化与构建工具详解

四、项目设计与架构

1. 设计模式

观察者模式 vs 发布订阅模式

观察者模式：

直接依赖：观察者直接订阅目标对象，目标对象维护观察者列表。
适用场景：简单的一对多依赖关系（如事件监听）。

示例：

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）管理订阅和发布，发布者和订阅者不直接通信。
适用场景：复杂的多对多通信（如跨组件通信、微前端）。

示例：

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）、日志工具、数据库连接池。

实现方式：

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）：

接收组件作为参数，返回增强后的组件。

示例：

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：

封装可复用的逻辑（如数据获取、表单处理）。

示例：

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
```

协作流程：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：防止跨站请求伪造。

错误监控

全局异常捕获：

window.onerror = (message, source, lineno, colno, error) => {console.error("Global error:", message, error);// 上报到 Sentry
};

Sentry 集成：

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，捕获全局异常，监控性能指标。

前端工程化与构建工具详解

四、项目设计与架构

1. 设计模式

2. 工程规范

3. 安全与监控

总结

相关资讯

热文排行

最新新闻

推荐新闻

热搜词