前端面试大全

前端面试大全

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

一、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

十一、前端性能优化

其他

相关推荐
GUIQU.几秒前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山16 分钟前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~30 分钟前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三33 分钟前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu8434 分钟前
前端从后端获取数据的流程与指南
前端
涛哥码咖1 小时前
Rule.resourceQuery(通过路径参数指定loader匹配规则)
前端·webpack
中小企业实战军师刘孙亮1 小时前
实体店的小程序转型之路:拥抱新零售的密码-中小企实战运营和营销工作室博客
职场和发展·小程序·创业创新·学习方法·业界资讯·零售·内容运营
夕水1 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生2 小时前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
斯~内克2 小时前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端