关于可视化中的MVC的思考

起因

我们在3D程序框架的设计中，将对象类设计成了这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
class Element {
  /** 唯一ID */
  protected _id: string;
  /** 名称 */
  protected _name: string;
  /** 类型 */
  protected _type: ElementType;
  /** 子元素 */
  protected _children: Array<Element>;
  /** 父元素 */
  protected _parent: Element;
  /** 状态 */
  protected _states: Array<State>;
  /** 在3D空间中的位置 */
  protected _position: Vector3;
  /** 在3D空间中的旋转信息 */
  protected _rotation: Vector3;
  /** 缩放比例 */
  protected _scale: Vector3;
  /** 3D对象实例 */
  protected _object3D: Object3D;

  /** 判断元素是否为空 */
  isNull(): boolean;

  /** 添加子元素 */
  addChild(child: Element): boolean;

  /** 判断元素属性相比上一帧是否变更，即是否需要渲染 */
  isDirty(): boolean;

  /** 设置脏状态 */
  setDirty(dirty: boolean);

  /** 常规状态 */
  setNormal();

  /** 强调状态 */
  setEmphasis();

  /** 弱化状态 */
  setBlur();

  /** 选中状态 */
  setSelected();

  /** 帧循环中更新元素数据(仅更新数据，不执行渲染操作) */
  update();

  /** 钩子函数-更新前 */
  beforeUpdate();

  /** 钩子函数-更新后 */
  afterUpdate();

  /** 状态与样式的解耦；行为与表现相分离 */
  useState(state: string);

  /** 应用多个状态 */
  useStates();

  /** 清除所有状态 */
  clearStates();

  /** 帧循环，进行数据的变更，然后驱动three渲染，一般用于动画 */
  tick();
}

这存在如下问题：Element类包含了3个类别的属性：

  • 数据描述/业务属性：id、name、parent、children等

  • 渲染属性：states

  • 3D空间的属性：position、rotation、scale等

这样会导致理解上的问题，程序也不合理优雅。

因此我们计划这样调整：

  • 将Element类拆分为Model和View2个类

  • Model只存放数据描述/业务属性

  • View只存放渲染属性

  • 去掉3D空间的属性，需要的时候，直接从3D对象上取

  • DataManager中，增加缓冲Models和Views对象的Map

兜兜转转，最终我们还是回到了Model-View模式。这也是ECharts的模式。

不由得让我思考一个问题：这种模式，是不是可视化的最佳程序设计呢？

常用可视化图表库的数据与渲染设计

ECharts

以柱状图来分析。