前端面试大全
集成各种实际面试题和常谈的面试题
一、html+css
1、垂直定位的实现方式
二、javascript
1、深拷贝浅拷贝
2、作用域
3、原型+原型链
4、防抖+节流
5、设计模式
- 创建型
- 单例模式
- 基本概念：确保类只有一个实例，并提供全局访问。
- 实现要点：通过闭包或者静态属性缓存实例，构造函数私有化。
- 应用场景：1）全局状态管理；2）页面唯一弹窗组件；3）数据库连接池（避免多次连接开销）
- 工厂模式
- 基本概念： 通过工厂函数进行封装，根据输入返回不同实例。
- 应用场景： 1）UI组件库根据类型生成按钮等
- 建造者模式
- 原型模式：
- 基本概念：克隆现有对象创建新实例，减少重复初始化开销；
- 应用场景：1）复杂配置对象的快速复制（如Three.js材质配置）
- 单例模式
- 结构型
- 代理模式
- 基本概念：通过代理对象控制目标对象的访问，添加额外逻辑
- 应用场景：1）图片懒加载（占位图代理真实图片）；2）缓存代理（缓存API响应，较少重复请求）；3）权限校验（删除前确认）
- 适配器模式
- 基本概念：转换接口使不兼容对象协调工作
- 应用场景：1）数据格式转换（后端json适配前端组件props）
- 装饰者模式
- 基本概念：动态为对象添加职责，不修改原类
- 应用场景：1）扩展函数功能（添加日志记录，性能监控）；2）表单验证链（逐步叠加校验规则）
- 组合模式
- 代理模式
- 行为型
- 策略模式
- 观察者模式
- 基本概念：对象间一对多依赖，状态变化时，自动通知订阅者
- 应用场景：1）事件监听系统（DOM事件等）
- 发布订阅模式
- 基本概念：通过消息中心，解耦发布者和订阅者
- 应用场景：1）跨组件通信（如vue的EventBus）；2）微前端架构中模块间的消息传递
- 原生js实现：
js
class PubSub {
constructor() {
this.topics = {}; // 保存所有主题及其订阅者
}
subscribe(topic, callback) {
if (!this.topics[topic]) {
this.topics[topic] = [];
}
this.topics[topic].push(callback);
return () => this.unsubscribe(topic, callback); // 返回取消订阅的方法
}
unsubscribe(topic, callback) {
if (this.topics[topic]) {
this.topics[topic] = this.topics[topic].filter(cb => cb !== callback);
}
}
publish(topic, data) {
if (this.topics[topic]) {
this.topics[topic].forEach(callback => callback(data));
}
}
}
// 使用示例
const pubsub = new PubSub();
// 订阅者
const subscriber1 = (data) => console.log('Subscriber1 收到:', data);
const subscriber2 = (data) => console.log('Subscriber2 收到:', data);
// 订阅主题 'news'
const unsubscribe1 = pubsub.subscribe('news', subscriber1);
pubsub.subscribe('news', subscriber2);
// 发布消息
pubsub.publish('news', { title: 'Breaking News', content: 'Something happened!' });
// 取消订阅
unsubscribe1();
pubsub.publish('news', { title: 'Another News' }); // Subscriber1 不再接收- 中介者模式
- 状态模式
- 职责链模式
三、ES6+
主要询问js新特性