第 5 章 数据制作
页面的展现和交互一般来说分为“数据驱动”与“事件驱动”。数据驱动在一定程度上弥补了事件驱动的不足。先说事件驱动，一个很典型的例子就是jQuery。用jQuery开发的页面执行初期就像这样：通过特定的选择器查找到需要操作的节点→给节点添加相应的事件监听，响应用户操作，效果是这样：用户执行某事件（单击，输入等）→调用JavaScript来修改节点。这种模式，对于业务需求简单的页面来说没什么问题。只是现在前端越来越复杂，光用这样的模式已经满足不了很多大型项目的需求。另一方面，找节点和修改节点效率很低。因此出现了数据驱动模式MVVM，执行初期就像这样：读取模板，同时获得数据，并建立VM（view-model）的抽象层→在页面进行填充，要注意的是MVVM 对应了三个层，M - Model，可以简单的理解为数据层；V - View，可以理解为视图，或者网页界面；VM - ViewModel，一个抽象层，简单来说可以认为是V层中抽象出的数据对象，并且可以与V和M双向互动（双向绑定）。针对用户的操作，大致是这样：用户执行某个操作→反馈到VM处理（可以导致Model变动）→VM层改变，通过绑定关系直接更新页面对应位置的数据。MVVM结构如图5-1所示。
图5-1 MVVM
数据驱动通过虚拟的抽象数据层来直接更新页面，数据驱动框架得以有较快的运行速度，可以应用到大型项目。因此牛刀云使用数据驱动模式实现页面，如图5-2所示。
图5-2 牛刀云的数据驱动
从图5-2中可以看出后端有数据集，前端有数据集组件。后端数据集是存储在PostgreSQL数据库中的数据表。前端数据集组件从后端数据集中获取数据，页面中的展现组件从数据集组件中获取数据，展现在页面中。当展现组件中的数据修改后，数据集组件中的数据同步修改，进而修改后端数据集中的数据。
数据不仅可以用于显示，还能控制状态。数据是通过展现组件的“绑定数据列”和“动态文本”等属性显示在页面上的，数据还可以控制展现组件的状态，通过展现组件的“动态隐藏”属性控制该组件是否显示，通过展现组件的“动态禁用”属性控制该组件是否可用。
综上所述，数据是页面的核心，掌握各种数据集的用法，可以提高制作效率。