1. react 编程实践 俄罗斯方块-需求分析

1. 需求分析

　　俄罗斯方块的要素

　　　　界面展示

　　　　定时刷新

　　　　键盘响应

　　　　方块模型

　　　　游戏规则

 

　　俄罗斯方块 比 "电商购物车" 好在哪?

　　　　业务比较简单, 人人都了解, 不需要过多前置知识

　　　　技术栈比较单纯，不需要使用过多的工具

　　　　本身的复杂性高于"购物车"

　　　　可以在成品的基础上进行技术演进， 过渡到前端框架

　　　　重点

　　　　　　重点不在于写出一个俄罗斯方块，而在于：

　　　　　　　　通过熟悉代码学医 es6 语法的使用

　　　　　　　　通过代码掌握前端单页面应用的设计套路(MVC)

 

2. 方案设计

　　架构图

　　　　

 

 

 　　MVC 是什么

　　　　M: model, 负责存储数据, 以及实现数据之间的驱动关系(业务逻辑)的模块

　　　　V: view, 负责展示数据, 接收用户交互事件的模块

　　　　C: controller, 负责衔接M和V的模块——将model数据转换成view可以辨认使用的数据, 将用户交互事件转换成model可以理解的业务事件的模块

　　

　　MVC的本质

　　　　分层设计 各司其职 将M驱动V 和 V 驱动 M 这两条消息通道隔离开， 简化代码实现

 

 　　前端 MVC 的特点

　　　　controller经常分散或者隐藏在其他模块中(document-view模式、MVVM模式……)

　　

3. 事件驱动 VS 数据驱动

　　事件驱动和数据驱动主要是指 黑色箭头组成的通道的事件方式

 

 　　事件驱动

 

 　　　　优点 ：

　　　　　　灵活, 自由

　　　　　　减小 view 层的渲染负担

　　　　缺点：

　　　　　　代码复杂、不易维护

　　　　　　事件爆炸 （点击之后 事件太多）

　　　　　　

　　数据驱动

　　　　优点：不需要关注细节， 实现成本低，易维护（同样的脑力可以写出更复杂的应用）

　　　　缺点：

　　　　　　对 view 层 的渲染性能要求比较高

　　　　　　数据对应状态，事件对应过程，使用数据驱动实现动画等过程比较不直观

　　　　结论

　　　　　99.9%的情况下 都使用 数据驱动。