【金秋打卡】第14天 弹层播放器需求分析

课程名称：TypeScript封装播放器组件

课程章节： 第3章 需求分析 3.1弹层播放器需求分析

主讲老师：西门老舅

课程内容：

今天学习的内容是弹层播放器的需求分析。

需求分析

1. 如何获取列表数据

   • 服务端渲染：页面交由服务端渲染生成，填充数据
   • AJAX：页面由客户端渲染，通过发送 AJAX 请求列表数据

2. 弹层是否和视频播放器做成一个整体

   • 不需要，弹层还有其他使用场景，遵循单一职责原则，拆分，解耦合，复用
   • 播放器也有其他单独使用的场景

3. 弹层组件结构划分：

   • 结构、功能：popup.ts
   • 样式：popup.css

4. 播放器组件结构划分：

   • 结构、功能：video.ts
   • 样式：video.css

弹层组件配置参数

• width/height：弹层宽高，默认和父容器保持一致
• title：弹层标题
• content：弹层内容展示
• position：弹层位置，默认水平垂直居中
• mask：遮罩

播放器组件配置参数

width/height：播放器宽高，默认和父容器保持一致

url：播放视频的地址

elem：播放器组件挂载的父元素

autoplay：是否自动播放

随着业务复杂度的提升，还可以设置更多的配置参数。

课程收获

本节课对要开发的视频播放器组件，进行了需求分析，确定了后面开发的内容和流程。