20200225 - blanks

[vianvio]

问题列表：

1. 通过架构图描述一个完善的大屏项目，整体架构与前端技术架构可以考虑分两张图。
2. 大屏数据展示在前端vm层做了哪些抽象和优化？解决了什么问题
3. 数据驱动如何体现在了项目中，可以举一个实际的例子描述整个从后端到前端的数据链路
4. 参考swiper，或者自己实现一个上下左右都可以的轮播组件，要求手势互斥，附github地址。(可选)拓展：左右轮播，内容上下滚动手势互斥，考虑移动端场景。

[blanks2020]

Q1: 前端架构图：

[blanks2020]

Q1: 大屏幕架构图：

[blanks2020]

Q2：

• 数据提升至根组件，单向流动到子组件，子组件一般为受控组件，数据处理逻辑在根组件完成。
  • 根组件可以统筹全局
  • 组件通信简单
  • 减少 vuex 使用
• 大屏幕页的生产划分为3步，1 布局层 2 组件组装（已有组件直接使用，如无则新写） 3 设计根组件数据

[blanks2020]

Q3： 摄像头实时监控（也可以替换为别的传感器）的例子：

监控抓拍到人员经过 -> 上传抓拍图片到超脑服务器分析 -> 发布消息至订阅中心 ->
后端端服务订阅消息，收到信息存图片至图片服务器 -> 使用 websocket 推送至大屏幕 -> 大屏幕收到消息放入消息队列 ->
根组件组件 监视 消息队列长度 和展示组件状态（位于根组件，根组件订阅展示组件状态） 通过属性传递数据给 展示组件，（此处维护一个定时器（消息队列有数据，且展示组件可接受数据时，定时执行任务，出队一个消息传递给展示组件，消息队列空时取消定时器））-> 展示组件 拿到数据 传递给展示子组件，启动子组件响应式展示视图，同时启动一个状态状态生命周期定时器，生命周期结束，状态重置，展示组件监视所有展示子项的状态计算出展示组件是否接受新的数据，当任一展示子组件状态变化，都会触发展示组件状态变化，同时告知父组件。

受限于大屏幕的展示 展示子项控制在3个左右 （3个展示子组件（3个模板字符串），根据状态控制显示）

[vianvio]

Q1的整体技术架构图需要重画，架构图要描述清楚整个技术分层，看图基本就能落地，但是目前的图里面有很多重复的内容分散在不同的层级里，还有一些不同领域的分层被放在了一起，需要再好好思考一下。 大屏架构图也要再调整，可以查一些其他的架构图参考。

Q3 能看得出对整个链路有了解，能够跨出前端本身的领域，之后希望能更多的从数据本身和业务思考的角度去看这个问题。