背景
设计一个模态弹窗,讲一下你会怎么设计。
该题目来自某大厂的电话面试。该题目具有开放性,可以考察面试者的项目构思经验与能力,是一个比较不错的题目。
场景分析
听到这种开放性问题,不能直接开始进行思考解答,最好要跟面试官进一步询问。
- 弹窗的应用范围?移动端
- 弹窗是给什么项目、业务用的呢?公司统一用的
先整理一下场景信息。
-
移动端,说明需要考虑体积,键盘弹出,移动端兼容,手势,自适应尺寸等问题。
-
统一用的,说明要进行充分的测试,支持样式如颜色字体的配置。
配置
根据之前的工作经验,一个模块弹窗可能需要有这样的配置
-
弹窗类型:仅有确认按钮的弹窗,还有取消按钮的弹窗,能输入内容的弹窗,没有按钮的弹窗
-
文字:标题、按钮、内容的文字的内容、字体大小、颜色,位置
-
遮罩层:是否显示,点击是否关闭弹窗。
-
行为:能否拖拽,调整大小,是否有关闭按钮
-
高度:固定大小还是根据内容自适应
-
尺寸:高度或宽度是固定尺寸或是特定比例
-
位置:居中或是特定的上边距和左边距
行为
模块弹窗可能会有这样的行为
-
点击确定按钮,抛出确定的事件
-
点击取消按钮,抛出取消的事件
-
点击关闭按钮,抛出关闭的事件(可以跟第二点合并)
-
点击遮罩层,抛出的事件
-
拖拽弹窗,可能改变弹窗的位置
-
按住弹窗的角并拖拽,可能改变弹窗的尺寸
方案
- 会使用flex或是绝对定位控制位置和尺寸
- 引入皮肤概念,使得一个class能控制颜色字体大小等属性
- 使用单例模式避免启用重复的弹窗
结尾
感觉自己写的还不是很完善,希望可以跟大家讨论交流一下。
更多的前端面试题,可以看一下我之前的文章大厂前端面试考什么