前端面试大全

前端面试大全

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

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

十一、前端性能优化

其他

相关推荐
GIS之路7 分钟前
GeoTools 结合 OpenLayers 实现空间查询
前端
陳有味_ChenUvi8 分钟前
使用 pnpm 优雅搭建 Monorepo 仓库
前端·npm·前端工程化
旷世奇才李先生10 分钟前
XML DOM 安装使用教程
xml·前端·chrome
程序员秘密基地17 分钟前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net
Mintopia20 分钟前
Three.js 画布纹理:像素世界的魔法编织术
前端·javascript·three.js
天天摸鱼的java工程师20 分钟前
当我成为面试官,我才知道当年那些面试官其实并不是在难为我,而是在考察我面对问题的拆解能力
前端·后端·面试
袁煦丞24 分钟前
泰拉瑞亚远程联机魔法:cpolar内网穿透实验室第617个成功挑战
前端·程序员·远程工作
玲小珑27 分钟前
Next.js 教程系列(十二)API Routes:构建轻量级后端服务
前端·next.js
JinSo32 分钟前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github
答案answer37 分钟前
three.js 实现几个炫酷的粒子特效(火焰,烟雾,烟花)
前端·three.js