构建前端UI组件的新思路

核心提示： 上面仅实现了基本的切换功能，我们可以进一步通过插件来实现更多功能：plugin-autoplay.js – 提供自动播放功能，构建前端UI组件的新思路(3)，plugin-effect.js – 提供切换时的各种特效，plugin-circular.js –

上面仅实现了基本的切换功能，我们可以进一步通过插件来实现更多功能：

plugin-autoplay.js – 提供自动播放功能。

plugin-effect.js – 提供切换时的各种特效。

plugin-circular.js – 提供循环切换功能，比如Slide自动播放到第5张时，能无缝循环播放到第1张。

plugin-lazyload.js – 提供数据的延迟加载功能。

插件的实现在JavaScript这种动态语言里是小菜一碟。至少有两种思路，一种是埋好钩子（hooks），插件根据钩子进行扩展：

S.mix(Switchable.prototype,　{　
init:　function()　{　
　　　…　
　　S.each(Switchable.Plugins,　function(plugin)　{　
　　　　if(S.isFunction(plugin.init))　{　
　　　　　　plugin.init();　
}　
});　
},　
switchTo:　function(index)　{　
　　…　
　　this.fire(‘beforeSwitch’,　{toIndex:　index});　
　　…　
}　
});　

在插件的代码里，定义好init方法，以及监听相关事件（事件可以看成是一类hooks）即可实现需要增加的功能。

插件的第二种实现方法是动态修改基础对象，可以重写某些方法，也可以利用AOP特性，将增加的功能织入到基础对象中：

S.weave(function()　{　
　　//　plugin　code　
});　
},　‘after’,　Switchable.prototype,　‘init’);　

上面的代码表示在Switchable的init方法执行完成后，再紧接着执行plugin code。