前端面试大全

前端面试大全

集成各种实际面试题和常谈的面试题

一、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新特性

1、

四、typescript

五、vue

1、vue2和vue3的区别

2、生命周期

3、computed+watch

六、react

七、uni-app

八、Cesium+openlayer

九、Threejs

十、nginx

十一、前端性能优化

其他

相关推荐
无情白1 小时前
k8s运维面试总结(持续更新)
运维·面试·kubernetes
ylfhpy1 小时前
Java面试黄金宝典33
java·开发语言·数据结构·面试·职场和发展·排序算法
安分小尧1 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员1 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪2 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya2 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81632 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef062 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪2 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin3 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫