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%的情况下 都使用 数据驱动。