KISSY的Switchable组件

通过Slide来学习Switchable的实现方式。

神马是Slide,就是每天我们在淘宝首页之类的地方看见的轮播图

image

Slide的初始化很简单:

Slide(‘#demo2′, {
effect: ‘scrolly’,
// slide特效组件其实不需要
aria:false,
easing: ‘easeOutStrong’
});

同样和Anim,此处是直接调用的Slide方法,在这个方法中会实例化一个Slide

function Slide(container, config) {

var self = this;

// factory or constructor
if (!(self instanceof Slide)) {
return new Slide(container, config);
}

Slide.superclass.constructor.apply(self, arguments);
}

new Slide之后就重新调用父类的构造器,Slide的父类是Switchable。

Switchable的构造器是核心的东西,主要包括三部分:配置文件的初始化、功能初始化、switch到配置文件指定的页

function Switchable(container, config) {
var self = this;

// 调整配置信息
……此处省略一些配置信息
var host = this.constructor;
while (host) {
config = S.merge(host.Config, config);
host = host.superclass ? host.superclass.constructor : null;
}
……此处省略一些配置信息
self._init();
self._initPlugins();
self.fire(EVENT_INIT);

if (self.activeIndex > -1) {
} else if (typeof config.switchTo == “number”) {
self.switchTo(config.switchTo);
}
}

配置文件的初始化主要的是markupType、向上历遍父类的的配置文件并合并在一起、配置第一次时展示的activeindex

switch到配置文件指定的页,只是调用switch方法

重点在于

self._init();
self._initPlugins();
self.fire(EVENT_INIT);

下篇文章继续跟进这些init。

  1. 还没有评论

  1. 还没有引用通告。