前端面试题-设计一个弹窗

6,454 阅读2分钟

背景

设计一个模态弹窗,讲一下你会怎么设计。

该题目来自某大厂的电话面试。该题目具有开放性,可以考察面试者的项目构思经验与能力,是一个比较不错的题目。

我试着整理一下我的解答,在这里跟大家讨论交流一下。

场景分析

听到这种开放性问题,不能直接开始进行思考解答,最好要跟面试官进一步询问。

  1. 弹窗的应用范围?移动端
  2. 弹窗是给什么项目、业务用的呢?公司统一用的

先整理一下场景信息。

  1. 移动端,说明需要考虑体积,键盘弹出,移动端兼容,手势,自适应尺寸等问题。

  2. 统一用的,说明要进行充分的测试,支持样式如颜色字体的配置。

配置

根据之前的工作经验,一个模块弹窗可能需要有这样的配置

  1. 弹窗类型:仅有确认按钮的弹窗,还有取消按钮的弹窗,能输入内容的弹窗,没有按钮的弹窗

  2. 文字:标题、按钮、内容的文字的内容、字体大小、颜色,位置

  3. 遮罩层:是否显示,点击是否关闭弹窗。

  4. 行为:能否拖拽,调整大小,是否有关闭按钮

  5. 高度:固定大小还是根据内容自适应

  6. 尺寸:高度或宽度是固定尺寸或是特定比例

  7. 位置:居中或是特定的上边距和左边距

行为

模块弹窗可能会有这样的行为

  1. 点击确定按钮,抛出确定的事件

  2. 点击取消按钮,抛出取消的事件

  3. 点击关闭按钮,抛出关闭的事件(可以跟第二点合并)

  4. 点击遮罩层,抛出的事件

  5. 拖拽弹窗,可能改变弹窗的位置

  6. 按住弹窗的角并拖拽,可能改变弹窗的尺寸

方案

  1. 会使用flex或是绝对定位控制位置和尺寸
  2. 引入皮肤概念,使得一个class能控制颜色字体大小等属性
  3. 使用单例模式避免启用重复的弹窗

结尾

感觉自己写的还不是很完善,希望可以跟大家讨论交流一下。

更多的前端面试题,可以看一下我之前的文章大厂前端面试考什么