background

Design a modal popover, talk about how you would design it.

The question comes from a telephone interview in a large factory. This topic has an open nature, can examine the interviewer’s project planning experience and ability, is a relatively good topic.

I will try to organize my solution and discuss it with you here.

Scenario analysis

When you hear this open-ended question, you can’t just start thinking about it. It’s best to ask the interviewer further.

  1. What is the scope of popover? The mobile terminal
  2. What projects and businesses are popovers for? The company uses it uniformly

Let’s sort out the scene information.

  1. Mobile terminal, the need to consider volume, keyboard pop-up, mobile compatibility, gestures, adaptive size and other issues.

  2. Unified use, indicating that to carry out adequate testing, support style such as color font configuration.

configuration

Based on previous work experience, a module popover may need this configuration

  1. Types of popups: only confirm popups, cancel popups, input popups, no button popups

  2. Text: title, button, content of text, font size, color, position

  3. Mask layer: whether to display, click whether to close the popover.

  4. Behavior: can drag, resize, close button

  5. Height: Fixed size or adaptive to content

  6. Size: A height or width of a fixed size or a specified proportion

  7. Position: center or specific top and left margins

behavior

A module popover might behave like this

  1. Click the OK button to throw the confirmed event

  2. Click the Cancel button to throw the canceled event

  3. Click the Close button to throw the closed event (can be merged with the second point)

  4. Click on the mask layer to throw the event

  5. Drag the popover to change its position

  6. Hold and drag the corner of the popover to change its size

plan

  1. Use Flex or absolute positioning to control position and size
  2. Introduce the concept of skins to allow a class to control properties such as color font size
  3. Use singleton mode to avoid enabling repeated pop-ups

At the end

I feel my writing is not perfect, I hope I can discuss with you about it.

More front end test questions, can take a look at my previous article big factory front end interview test what