[Javascript][Mootools]用渐进增强的方式开发选项卡(Tabs)（四）

今天要实现的功能是选项卡的自动轮换，我原来用Prototype.js写了一个简单的选项卡，并用类继承的方式完成了此项功能。

Mootools.js一样能轻松实现类的继承，Mootools.js实现类的继承是通过Class的Extends属性完成的。

自动轮换功能的思路是：通过setInterVal函数来调用自动切换选项卡函数，并从用户体验的角度考虑，实现当鼠标移到选项卡上时停止轮换，离开后继续。

下面代码中的AutoTabs类，就是通过继承上节完成的Tabs类来实现了自动轮换功能，通过startAuto()的实例方法来进行调用。

虽然能用继承的方式完成功能，但是并不是因为有继承才叫好的面向对象，面向对象编程思想还有一条原则是，多用组合，少用继承。

因此，我将代码进行再次改写，仍然是通过implement方法将自动轮换功能添加到Tabs类里，一样是通过startAuto()方法调用，这样完成的代码将更加灵活。

自动轮换示例页

AutoTabs类：

 1 var AutoTabs = new Class({
 2     
 3     Extends:Tabs,
 4     
 5     options:{
 6         autoInterval:5
 7     },
 8     
 9     startAuto:function(){
         this.attachAuto();
         this.start();
     },
     
     attachAuto:function(){
         this.bindOver = this.stop.bind(this);
         this.bindOut = this.start.bind(this);
         this.tabs.getParent().addEvents({
             'mouseenter':this.bindOver,
             'mouseleave':this.bindOut
         });
         this.sections.getParent().addEvents({
             'mouseenter':this.bindOver,
             'mouseleave':this.bindOut
         });
     },
     
     start:function(){
         this.autoId = this.autoToggle.periodical(this.options.autoInterval*1000,this);
     },
 
     stop:function(){
         $clear(this.autoId);
     },
 
     autoToggle:function(){
         this.numNext = this.current + 1;
         this.numNext = this.numNext >= this.sectionsLength ? 0 : this.numNext;
         this.toggleSection(this.numNext);
     }
 });

将自动轮换功能做为独立方法implement到Tabs类里：

 1 /**
 2  * implement auto change Tab method to Tabs class
 3  */
 4 Tabs.implement({
 5     startAuto:function(){
 6         this.attachAuto();
 7         this.start();
 8     },
 9     
     attachAuto:function(){
         this.bindOver = this.stop.bind(this);
         this.bindOut = this.start.bind(this);
         this.tabs.getParent().addEvents({
             'mouseenter':this.bindOver,
             'mouseleave':this.bindOut
         });
         this.sections.getParent().addEvents({
             'mouseenter':this.bindOver,
             'mouseleave':this.bindOut
         });
     },
     
     start:function(){
         this.autoId = this.autoToggle.periodical(this.options.autoInterval*1000,this);
     },
 
     stop:function(){
         $clear(this.autoId);
     },
 
     autoToggle:function(){
         this.numNext = this.current + 1;
         this.numNext = this.numNext >= this.sectionsLength ? 0 : this.numNext;
         this.toggleSection(this.numNext);
     }
 });