简介
我们在实现控件:列表、菜单、表格、日期选择等控件时,都需要实现选中效果,常见的选中行为有
- 选中一条记录,清除其他选中(单选)
- 选中一条记录不影响其他记录选中(多选)
分析
当我们去分析这些控件的实现代码时,发现选中的逻辑是几乎完全一样的,那么我们能不能把他们提取出来,这里也有2中方式:
- 继承:提供公用的基类,所有这些控件继承有选中功能的基类
- 扩展:实现一个扩展类,所有需要实现选中效果的类可以去引入这个扩展
扩展和继承的差异在前面的博客里有论述,感兴趣的可以去查看。通过对比我们可以找到使用扩展的很多好处
- 耦合小,在一个控件的实现过程中不考虑选中,仅在扩展中实现。
- 使用灵活,当一个控件的父类不需要有选中效果是,可以在子类上引入选中的扩展。
- 易于理解,这是一种Has A 的关系,就是说选中是控件的一个特性。
选中和取消选中
我们先来分析一下我们实现选中功能需要那些属性(Attr)、方法(method)和事件(event)。
- 点击(或者其他方式)控件的选项,其他方式包括:键盘事件、鼠标悬浮等等。
- 如果当前选项已经选中,那么判断控件是否多选模式
- 如果控件处于多选模式,那么清除控件的选中状态
- 触发清除选中事件
- 如果当前选项未选中,判断控件是否多选模式
- 如果当前选项处于单选状态,清除控件以及选中的选项的状态
- 触发选中操作
从上面选中操作的过程,我们看以看到控件需要以下属性:
selected: 选中状态
selectEvent : 选中的事件(点击、键盘事件或者鼠标悬浮)
multipleSelect: 是否允许多选,决定了选中模式是单选还是多选
触发的事件:
selected: 选项选中事件
unselected:清除选中事件
selectedchange : 选中选项发生改变的事件
这3个事件在什么时候触发我们在下面更为详细的分析,我们从上面的过程中可以抽取出需要定义的方法:
setSelected() : 设置选中
getSelected() : 获取选中的第一项
setSelection() : 多选模式下,可以设置多个选项同时被选中
getSelection(): 获取选中的所有项
clearSelection(): 清除所有选中
事件分析
如果你仔细看过上面的图,会发现,单选和多选模式下选中(selected)、清除选中(unselected)和选中改变(selectedchange)事件的触发机制有很大的差别:
- 单选状态下,选中一项时,需要清理之前选中的项,被清理选中的项不触发unselected事件,也不触发selectedchange事件。
- 多选状态下,选中和清理选中状态时都会触发对应的事件,同时触发selectedchange事件。
我们为什么这样设计?
- 如果单选模式下清理选中状态时也触发unselected事件会如何?
- 也触发selectedchange事件会如何?
如果这样,当我们选中一项时,会
- 触发之前选中项的unselected事件
- 触发之前选中项的selectedchange事件
- 触发当前项的selected事件
- 触发当前项的selectedchange事件
我们在这时候监听 selectedchange 会触发2次,如果保证逻辑正确,必须判断当前项是要选中还是要清除选中,由此带来理解和实现上的复杂性。而在多选状态下:
- 选中一项触发该项的 selected事件,触发该项的unselected事件
- 清除选中一项时触发该项的unselected事件,触发该项的selectedchange事件
所以我们可以把单选操作简单化,单选模式下选中一项那么:
- 触发该项的selected事件,
- 触发该项的selectedchange事件