JS 控件 列表

简介

一个菜单有多个菜单项，一个列表有多个列表项，这是一类控件包含多个相同子项场景。这类控件有很多共有的特性，所以我们需要进行抽象和总结，来形成统一的功能和接口。根据子项的实现方式我们分为2种：

1. 子项实现为子控件
2. 子项仅作为控件的DOM片段

这2种实现方式的主要差别在于：

1. 渲染DOM方面，

1)   子项实现为控件，渲染DOM的逻辑是独立的，不受父控件控制的

2)   DOM片段，需要控件处理所有的子项的渲染逻辑

　　2. 状态改变和事件触发方面：

1)   子项实现为控件，状态的改变逻辑和事件触发由子控件处理，如果影响到其他的子控件，由父控件统一处理，例如选中一项时，父类会清理其他选中的子控件的选中状态。

2)   DOM片段，的所有状态、事件触发都由包含这些DOM片段的控件来处理。

　　3. 选项的增删改方面

选项在增删改时，都需要在包含这些项的控件上做统一的处理。

　　4. 可复用性方面

1)   子项实现为控件，可以用于其他控件中，作为其他控件的子项，例如一个按钮分组包含多个按钮，一个工具栏也可以包括多个按钮。

2)   而DOM片段，只能在包含项的控件中实现，作为折中的方案，可以创建一个基类，其他控件实现这个基类即可。

　　5. 性能方面

1)  子项实现为控件，在生成的效率方面有很大的问题，控件的生成开销远远大于DOM片段的开销。

2)  事件处理方面，DOM片段可以用委托（delegate)的方式，统一处理子项的事件，可以不考虑子项的增删给控件带来的开销；子控件的方式必须自己触发事件，往上冒泡到父控件，统一处理

控件集合

一般的菜单、列表、tab、工具栏等控件的子项都是单独的子控件，我们可以抽取出一个扩展 ControlCollection 来实现子控件的共有的功能：

1. 增删改
2. 迭代，可以参考 .net 中 Enumerate的实现来提供接口
3. 选中，在前面的文章中已经详细的介绍过选中
4. 键盘处理

在实践中控件的嵌套需要处理一些问题：

1. 子控件的默认配置，可以在父控件上统一配置子控件的默认选项，例如模板、选中状态使用的样式、出错显示的信息等等。
2. 子控件之间的通信，有些子控件的状态改变会引起其他子控件的变化，例如单选，选中一个子控件时，需要清理其他子控件上的选中状态。

简单列表

我们把将子项实现为DOM片段的的控件的基类定义为简单列表，常用于需要显示大量数据的场景，例如 grid或者显示大量数据的list。我们需要在这种控件中实现：

1. 数据源：所有的增删改、排序等数据操作，都通过数据源来处理，不直接操纵DOM片段
2. 数据源绑定：理数据源加载、出错、增删改记录后，控件的DOM 随之变化
3. 键盘事件处理

其实就是使用MVC的方式，把数据源和展示方式分离开来，所有选项的操作都是通过数据源的接口来实现。

Grid的操作最能体现出数据源操作数据的好处，查看示例

实现

菜单示例

列表示例

Grid示例

实现为子控件的扩展

实现为DOM片段的扩展