1. Demand Analysis
Elements of Tetris
Interface display
Regularly updated
Keyboard response
Box Model
game rules
Tetris than the "electricity supplier shopping cart" Fortunately, what?
Business is simple, everyone understand, without too much pre-knowledge
Relatively simple technology stack, without using too many tools
Complexity becomes more than a "shopping cart"
Technical evolution can be carried out on the basis of the finished product, the transition to the front end of the frame
Emphasis
The focus is not to write a Tetris, but rather:
Medical student familiar with the code by using the syntax es6
Master the front-end design through code routines single-page application (MVC)
2. Design
Chart
What is MVC
M: model, responsible for storing data, and the achievement of the driving relationship between the data (business logic) module
V: view, responsible for displaying data, the receiving module user interaction events
C: controller, responsible for cohesion M and module V is - will convert the data into a model view can be used to identify the data, converts the user interaction events to module business event model can be understood
The essence of MVC
The hierarchical design their duties and drive M V V M which drive two isolated message channel, to simplify the code for
MVC front-end features
controller is often dispersed or hidden in other modules (document-view mode, MVVM mode ......)
3. Event-driven data-driven VS
Event-driven and data driven mainly refers to the way the black arrow event consisting of channels
Event-driven
advantage:
Flexible, free
Render view burden reducing layer
Disadvantages:
代码复杂、不易维护
事件爆炸 （点击之后 事件太多）
数据驱动
优点：不需要关注细节， 实现成本低，易维护（同样的脑力可以写出更复杂的应用）
缺点：
对 view 层 的渲染性能要求比较高
数据对应状态，事件对应过程，使用数据驱动实现动画等过程比较不直观
结论
99.9%的情况下 都使用 数据驱动。