前端面试大全

前端面试大全

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

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

十一、前端性能优化

其他

相关推荐
_一两风几秒前
TypeScript 入门:JavaScript 爱好者的明智选择
前端·javascript·typescript
xianxin_1 分钟前
HTML 头部元素
前端
YGY_Webgis糕手之路3 分钟前
OpenLayers 综合案例-底图换肤(变色)
前端·gis
_一两风3 分钟前
TypeScript 小技巧:巧用 `keyof` 提升代码的健壮性与智能提示
前端·typescript
NeverSettle_5 分钟前
AI对话数据管理useChat 实现 SSE hook封装
前端
张元清6 分钟前
一个usePrevious引发的血案
javascript·react.js·面试
Cuzblind6 分钟前
React Hooks入门
前端·react.js
YGY_Webgis糕手之路7 分钟前
OpenLayers 综合案例-台风风场模拟
前端·gis
法欧特斯卡雷特8 分钟前
【译】Spring I&O 社区专家聊 Jimmer ORM
后端·spring·面试
火车叼位8 分钟前
前端从代码完成到可交付之间还有什么
前端