前端面试之设计模式怎么学
前端主学的还是计算机网络 然后就是设计模式
我在前端大厂校招过程的一些三面
是由部门负责人来面 但他不是前端
可能会从设计模式来考察你的编码功底（我经历过两次）
本文是对这些内容的分享 大家可以看看。
---
一、前端常用设计模式实战
1. 单例模式（Singleton）
场景：全局状态管理、浏览器环境唯一对象
示例：实现一个浏览器日志管理器
class Logger {
constructor() {
if (!Logger.instance) {
this.logs = [];
Logger.instance = this;
}
return Logger.instance;
}
log(message) {
this.logs.push(message);
console.log(`[LOG]: ${message}`);
}
}
// 使用示例
const logger1 = new Logger();
const logger2 = new Logger();
console.log(logger1 === logger2); // true
框架应用：React Hooks 的 useState 内部通过单例模式管理状态队列
2. 装饰器模式（Decorator）
场景：功能扩展、高阶组件
示例：React 高阶组件增强
function withLoading(WrappedComponent) {
return function EnhancedComponent(props) {
const [loading, setLoading] = useState(true);
useEffect(() => {
props.fetchData().finally(() => setLoading(false));
}, []);
return loading ? <Spinner /> : <WrappedComponent {...props} />;
};
}
// 使用
const EnhancedUserList = withLoading(UserList);
框架应用：Redux 的 connect 函数实现组件与 Store 的连接
3. 代理模式（Proxy）
场景：数据校验、缓存、对象访问控制
示例：API请求缓存代理
const apiService = {
fetchData() {
return axios.get('/api/data');
}
};
const cachedApiProxy = new Proxy(apiService, {
cache: new Map(),
get(target, prop) {
return (...args) => {
const key = `${prop}-${JSON.stringify(args)}`;
if (this.cache.has(key)) {
return Promise.resolve(this.cache.get(key));
}
return target[prop](...args).then(res => {
this.cache.set(key, res.data);
return res.data;
});
};
}
});
// 使用：重复调用会直接返回缓存
cachedApiProxy.fetchData().then(console.log);
框架应用：Vue3 的响应式系统基于 Proxy 实现数据劫持
---
二、发布订阅 vs 观察者模式深度解析
4. 核心差异
暂时无法在飞书文档外展示此内容
5. 代码实现对比
观察者模式：
class Subject {
constructor() {
this.observers = [];
}
addObserver(obs) {
this.observers.push(obs);
}
notify(data) {
this.observers.forEach(obs => obs.update(data));
}
}
class Observer {
update(data) {
console.log('Received:', data);
}
}
发布订阅模式：
class EventBus {
constructor() {
this.events = new Map();
}
on(event, callback) {
const handlers = this.events.get(event) || [];
handlers.push(callback);
this.events.set(event, handlers);
}
emit(event, ...args) {
const handlers = this.events.get(event);
handlers?.forEach(handler => handler(...args));
}
}
6. 实际应用场景
- 观察者模式：Vue 的 watch 实现、React Class 组件的生命周期通知
- 发布订阅：跨组件通信（Vue EventBus）、Redux 的 subscribe 机制、WebSocket 消息处理
---
三、框架源码中的设计模式实践
7. React 中的组合模式
- 组件嵌套：通过 props.children 实现容器组件与展示组件解耦
- Hooks 组合：自定义 Hook 整合多个基础 Hook 的功能
function useUser() {
const [user, setUser] = useState(null);
useEffect(() => { /* 获取用户数据 */ }, []);
return user;
}
// 组合多个自定义 Hook
function useUserProfile() {
const user = useUser();
const posts = usePosts(user?.id);
return { user, posts };
}
8. Vue 的职责链模式
- 生命周期钩子：通过职责链传递处理控制权
- Vue Router 导航守卫：
router.beforeEach((to, from, next) => {
// 身份验证链
if (requiresAuth(to) && !isAuthenticated()) {
next('/login');
} else {
next();
}
});
9. Axios 的拦截器（责任链模式）
// 请求处理链
axios.interceptors.request.use(config => {
config.headers.Authorization = getToken();
return config;
});
// 响应处理链
axios.interceptors.response.use(
response => response.data,
error => handleError(error)
);
10. Koa 中间件机制（洋葱圈模型）
// 中间件责任链
app.use(async (ctx, next) => {
console.log('Enter 1');
await next(); // 传递控制权
console.log('Exit 1');
});
app.use(async (ctx, next) => {
console.log('Enter 2');
await next();
console.log('Exit 2');
});
// 执行顺序：Enter1 → Enter2 → Exit2 → Exit1
---
四、设计模式的选择策略
1. 复杂度控制：
- 简单场景：优先使用函数式编程
- 复杂交互：采用观察者/发布订阅模式解耦
- 全局状态：单例模式 + 状态管理库
2. 性能权衡：
- 代理模式会增加内存开销
- 发布订阅模式需注意事件泄露问题
3. 框架适配：
- React 生态：多使用组合模式、装饰器模式（HOC）
- Vue 生态：善用观察者模式（响应式系统）
---
五、从源码中学习设计模式
案例：React Reconciler 的策略模式
React 的渲染器通过策略模式支持多平台：
// ReactDOM 的 HostConfig 策略对象
const DOMHostConfig = {
createInstance(type, props) {
return document.createElement(type);
},
appendChild(parent, child) {
parent.appendChild(child);
},
// ...其他DOM操作方法
};
// React Native 实现不同策略
const NativeHostConfig = {
createInstance(type, props) {
return NativeModules.createView(type, props);
}
};
案例：Vue 的工厂模式
Vue 组件实例化过程：
// 组件工厂函数
function createComponent(Ctor, props, context) {
if (isObject(Ctor)) {
Ctor = Vue.extend(Ctor);
}
const instance = new Ctor({
propsData: props,
parent: context
});
return instance;
}
其实一些框架、库的源码不懂设计模式就挺难看懂
#想实习转正，又想准备秋招，我该怎么办#
#现在前端的就业环境真的很差吗#
投递恒生电子股份有限公司等公司10个岗位 >
查看21道真题和解析