【Slider】组件实现及单测问题

[wuhy]

1. 注释与实现不一致，如下配置项描述可以删除
   @Property options.prefix选项不存在
   @Property {HTMLElement=} options.stage 控件动画容器，
   @Property {HTMLElement=} options.prevElement prev按钮的容器，
   @Property {HTMLElement=} options.nextElement next按钮的容器，
   @Property {HTMLElement=} options.indexElement 轮播索引按钮的容器，会将第一级子元素设为索引元素
   @Property {Function=} options.onChange 当播放索引改变时的事件
2. var index = target.getAttribute('data-index')
   为啥ie7下会取出数字了？按规范来，都是字符串，用ie7模式下看也都是字符串。。
3. less 样式问题
   transition按规范来必须指定属性，不能为all
   此外值写错了: all 0.3s 0 linear 应为 all 0.3s linear 0 (0可以省略，默认值)
4. capacity 去掉，通过stage容器判断其children数量获取
5. stage容器通过 data-stage 来获取，而不是通过class: ui-slider-stage
   即HTML模板，通过 data-stage 属性标识 stage 容器，而不是通过组件自动生成的 ui-slider-stage 样式
6. 把Slider 的 privates 定义方法提取出来放在prototype下，私用方法通过annotation标注
7. 删掉 Slider 的 refresh 方法，组件repaint/render/setXX方法可以替代，这个方法没感觉有存在的必要性，此外可以保持组件 API 一致性
8. Slider 自动轮播模式，自动强制 circle 设为 true，而不受外部传入的 circle 值影响
9. SliderAnim 的 lineer 改成 linear
10. SliderAnim 的 isBusy 实现逻辑有问题
    this.timer !== 0; 改成 !!this.timer;
11. SliderAnim 访问 Slider 的 count 属性 改成 capacity
12. 修复测试用例无法通过问题及新增测试用例

[wuhy]

@jinzhubaofu

[jinzhubaofu]

5这一条我们可能要再考虑一下。

目前的标识一个组件部件的方法是用id来做的。比如

<div data-ui="test">
  <div id="ctrl-button-test-part"></div>
</div>

id的构成是由前缀 ctrl + 控件类型 + 控件id + 部件名称 来组成的，这样的效率会好一些。现在这里的场景应该是适用的。可以参看一下helper/dom里边的getPart()的实现。

[jinzhubaofu]

其他的改动点我觉得都OK

[wuhy]

5这一条我们可能要再考虑一下。

目前的标识一个组件部件的方法是用id来做的。比如

id的构成是由前缀 ctrl + 控件类型 + 控件id + 部件名称 来组成的，这样的效率会好一些。现在这里的场景应该是适用的。可以参看一下helper/dom里边的getPart()的实现。

组件的样式名包括 id 都有专门工具方法来生成这没啥问题，而现在实现上问题是如何获取 stage容器，对于开发者而言如果使用生成的样式 class 来标识，感觉模板定义依赖于生成的样式，感觉有点奇怪，因为模板定义通常很少会给模板加上一些生成的样式（目前moye控件实现上貌似很少有这种情况吧），如果有，可能会是加上自定义的样式，而用data-stage 属性，更加明确一些，突出这是一个stage容器。

[jinzhubaofu]

目前来讲，部件(part)有一个特点：一个控件中只有一个特定的部件。例如Slider的stage。对于部件，应该使用this.helper.getPart('stage')来获取。

那么问题来了，如何给stage元素添加这个id属性呢？

应该分成两种情况：

1. 在控件在render()过程中添加
2. 由模板直接生成；

分别的处理逻辑应该是这样：

1. Slider应当能够自行生成stage元素，确切的讲，应该是initStructure函数中进行添加
2. 模板应该直接在main元素上生成属性data-dom-inited作为标识。如果render中发现有此标识，那么就跳过内部结构生成，以减少开销。对于我们在中间页中的绝大部分情况，应该是这种。

但不管怎样，stage元素上的id属性是确定存在的，并且是符合格式的。那么，在其他位置就可以直接调用this.helper.getPart('stage')来获取stage容器了。

[jinzhubaofu]

Slider控件现在还有一个不足，不能通过api来控制幻灯片的内容，例如：

new Slider({
  main: document.getElementById('slider'),
  datasource: [{
    image: 'http://xxxx.jpg',
    url: 'http://xxxx.com'
  }]
}).render();

这种情况可以处理main元素中没有任何内容，需要Slider自行生成内部结构。当前还没有遇到这一种需求，但是可以考虑一下。