【金秋打卡】第2天 Web前端架构师2022版

课程名称：Web前端架构师2022版

课程章节： 第七周 B端项目需求分析 和 架构设计

主讲老师：张轩

课程内容：

今天学习的内容包括：
2-2 需求分析
2-3 项目难点分析

课程收获：

从这个图中，我们很清楚的能看到 B 端在项目中处于的位置，在业务中，他主要负责给运营人员和普通用户使用，用来创建管理和编辑作品，创建完毕以后可以发布和预览作品，发布成功以后，就可以在 H5 端进行展示和分享了。同时另外一个功能线，他可以在页面中对统计数据进行查看。B 端主要需要 两个API端 对其进行支持，正好对应其两大功能线，一个是作品管理的服务端，一个是统计服务的服务端，都是已 RESTful API 的形式和B端进行对接

根据原型图简单分析一下 B 端的需求
这里不会像 PM 一样冗长，只是简要的分析。从页面上分，会分为这几个页面。

** 首页 **

导航条 未登录和已登录
未登录 显示登录按钮
已登录 显示 创建设计，我的作品，还有下拉菜单（个人设置和登出）
展示列表
图片
标题
作者信息 和 使用人数
Hover 显示创建按钮
搜索
搜索以后有清空按钮
点击更多展示列表（每页展示8条）
我的作品 （展示四条 右侧到我的作品页面）

登录

发送验证码
登录
表单验证

模版详情页

展示 图片 二维码 标题 作者
使用该模版创建
下载图片

我的作品

作品或者模版列表
编辑
统计
删除
转赠
下载图片
搜索
翻页
编辑器

左 组件面板 - 可以添加到编辑器中的组件类型
文本
图形
形状
中 编辑器区域 - 从左侧添加的组件都会呈现到编辑器中
点击选中
拖动改变位置
拖动改变大小
快捷键
右键菜单
右 属性编辑面板 - 可以编辑中间组件的属性以及其他功能
元素属性，详细的在实现的时候在讨论
图层面板 隐藏显示 锁定解锁 拖动排序
背景设置
顶部 - 保存，发布，预览和设置
点击保存
点击预览 弹框
左侧显示预览
右侧设置标题，描述和头图，
发布 - 弹框
左侧显示截图
右侧显示默认渠道，并且可以进行编辑
其他 - 不属于界面上的一些功能（定时保存 ，退出前提示等等）

难点分析
发现核心问题，大道至简：编辑器 和 h5 页面其实整个就是一系列元素构成的，这些元素的自然应该抽象成组件，这些组件的属性应该怎样设计，在不同的项目中怎样做到统一的使用。

在不同的项目中怎样做到统一的使用？

组件的可扩展性，虽然在需求中我们只要求了三种组件，但是最初的设计是否能够具有良好的可扩展性。

说完了组件作为个体的问题，现在把它融合到编辑器页面来讨论，编辑器做的功能其实就是对一系列组件增删改的操作。所以怎样设计编辑器的整体状态

组件有多种，它的属性也有多种，1 怎样将这些属性渲染成不同的表单组件（也有可能不仅仅是表单组件） 2 在表单组件中，属性作出修改以后，怎样实时的将值反射到组件中去。

组件的可扩展性，虽然在需求中我们只要求了三种组件，但是最初的设计是否能够具有良好的可扩展性。

编辑器有很多的交互：拖动移动位置，拖动改变大小，快捷键，右键菜单，缩放，重做/回滚等等功能。它们都是在核心问题之外的交互，那么很自然，我们是否能将这些功能进行解耦？