上一章我们聊了一系列比较抽象的统计函数，了解了它们是如何改变几何图形的位置的。这一章我们来谈谈视图，了解一下什么是视图，又该如何组合它们去搭建一个拥有很多视图的界面（如下图）。
首先我们还是从视图理论开始，然后进入实战部分，去实现几个视图组合函数，最后再进行简单的小结。那么废话不多说，我们马上进入视图的学习。
# 视图理论
在可视化中，一个完整的视图至少由两个部分构成：几何元素和辅助组件（如下图。
上面的这张图是一个单视图图表，因为它只有一个视图。而下面这张图是一个多视图图表，因为它将多个视图组合在了一起。
对于多视图图表来说，它其实是由一棵视图树构成。视图树类似于前端开发中的 DOM 树，只不过每一个节点不是一个 DOM 而是一个视图，类似的概念还有渲染引擎中的场景图（Scene Graph）。
在数据结构层面，视图树就是一个如下的嵌套对象。
const viewTree = {
type: 'layer',
children: [
{
type: 'row',
children: [{/.../}, {/.../}]
},
{
type: 'interval',
}
]
};
@前端进阶之旅: 代码已经复制到剪贴板
用 TypeScript 可以如下简单定义。
type ViewTree = {
type?: string, // 当前节点的种类
children?: ViewTree[], // 包含的孩子节点
[key: string]: any,
}
@前端进阶之旅: 代码已经复制到剪贴板
不同的视图节点有不同的布局方法和功能，在这里我们将实现3种视图节点：
- 图层（Layer）：
type: 'layer' - 弹性盒子（Flex）：
type: 'col | row' - 分面（Facet）：
type: 'facet'
而视图这个模块要做的就是解析这棵视图树，计算出每个视图区域的位置和大小，以及在这个区域有几个视图（视图可以重叠，之后我们会看见）。
接下来我们就正式进入开发环节。
# 创建视图（createViews）
视图模块就导出一个函数：createViews(tree, computes)。
该函数有两个参数，第一个参数是一个描述视图树的嵌套对象，第二个参数是一个对象，该对象的每一个值是一个支持的视图计算函数。该函数返回一个数组，数组的每一个元素是一个元组。
元组的第一个元素是一个如下的区域的描述：
type Area = {
x: number,
y: number,
width: number,
height: number,
[key:string]: any
}
@前端进阶之旅: 代码已经复制到剪贴板
