Exploring Met en œuvre/augment dans MooTools

Question

je travaille sur des effets et des choses pour obtenir une poignée sur les classes/Met en œuvre/augment. Les exemples ici sont pour les classes de base (MooSlidesFx, MooSlidesFx.Elements) à partir de laquelle créer de nombreux effets avec un projet sur lequel je travaille, et deux classes enfants (MooSlidesFx.Fade, MooSlidesEffects.Elements.Fade) qui font réellement quelque chose.

http://paste.mootools.net/m6afc7746

La première classe, MooSlidesFx, définit les choses pour les autres, destinés à être mis en œuvre tout. La seconde classe, MooSlidesFx.Elements, étend également MooSlidesFx, mais au lieu d'animer simplement l'élément passé, elle va animer ses enfants dans l'ordre (ne recherchant pas de chaîne de leçon pour le moment, mais c'est la prochaine fois ma liste!), et ainsi certaines des méthodes sont redéfinies.

La troisième classe, MooSlidesFx.Fade fonctionne très bien. Il implémente MooSlidesFx, définit deux petites méthodes, et nous partons pour les courses.

Ensuite, le problème. Il semble comme je peux simplement mettre en œuvre à la fois MooSlidesFx.Elements et MooSlidesFx.Fade et POW !! J'ai un nouvel effet qui ne s'estompe pas dans l'élément, mais qui s'estompe chez ses enfants.

Pas si, merci pour toute aide!

vient ici une mère charge de code:

var MooSlidesFx = new Class({ 

    Implements: Options, 

     options: { 
      delay: 0, 
      duration: 500, 
      how: 'in', 
      transition: 'sine:in:out' 
     }, 

    initialize: function(el,options){ 
     this.setOptions(options); 
     this.el=$(el); 
     this.animation = this.setAnimation(el); 
    }, 

    animate: function(){ 

     this.animation.set($clear); 
     var calculations = this.calculate(this.el); 
     this.animation.set(calculations[0]); 

     var delayed = function(){ 
      this.animation.start(calculations[1]) 
     }.bind(this).delay(this.options.delay); 

    }, 

    getDuration: function(){ 
     return this.options.delay+this.options.duration 
    } 

}); 

MooSlidesFx.Elements = new Class({ 

    Extends: MooSlidesFx, 

     options: { 
      selector: false, 
      elementDelay: 200, 
      order: 'normal' 
     }, 

    animations: [], 

    initialize: function(el,options){ 
     console.log('Elements initialize'); 
     this.parent(options); 

     this.elements=this.el.getElements(this.options.selector); 

     this.elements.each(function(el,index){ 
      this.animations.include(this.setAnimation(el,index)); 
     }.bind(this)); 

    }, 

    animate: function(){ 

     var eachDelay = this.options.elementDelay; 
     var calculations=[]; 

     this.animations.each(function(animation,index){ 
      animation.set($clear); 
      calculations.include(this.calculate(index)); 
      animation.set(calculations[0]); 
     }.bind(this)); 

     var delayed = function(){ 
      this.elements.each(function(el,i){ 
       var go = function(){ 
        console.log('going '+i) 
        this.animations[i].start(calculations[i][1]); 
       }.bind(this).delay(d); 
       eachDelay = eachDelay + this.options.elementDelay; 
      }.bind(this)); 
     }.bind(this).delay(this.options.delay); 

    }, 

    getDuration: function(){ 
     return this.options.delay+this.options.duration+((this.elements.length-1)*this.options.elementDelay); 
    } 

}); 

MooSlidesFx.Fade = new Class({ 

    Implements: MooSlidesFx, 

    setAnimation: function(el){ 
     var animation = new Fx.Tween(el,{ 
      property: 'opacity', 
      duration: this.options.duration, 
      transition: this.options.transition, 
     }); 
     return animation; 
    }, 

    calculate: function(el){ 
     return (this.options.how=='in') ? [0,1] : [1,0]; 
    } 

}); 

MooSlidesFx.Elements.Fade = new Class({ 

    Implements: [MooSlidesFx.Fade,MooSlidesFx.Elements] 

    // TypeError: Result of expression 'this.caller._owner.parent' [undefined] is not an object. 
    // mootools-core.js (line 1173) 
}); 


MooSlidesFx.Elements.Fade = new Class({ 

    Implements: MooSlidesFx.Fade, 
    Extends: MooSlidesFx.Elements 

    // TypeError: Result of expression 'this.setAnimation' [undefined] is not a function. 
    // MooSlides.Fx.js (line 15) 
}); 


MooSlidesFx.Elements.Fade = new Class({ 

    Implements: [MooSlides.Fx.Fade, MooSlidesFx.Elements] 

    // line 49 is never logged, so Elements isn't ever initialized, acts just like MooSlidesFx.Fade 
}); 


/***** usage *****/ 

var fx = new MooSlidesFx.Elements.Fade('test',{ selector: 'li'}).animate(); 


/* 

HTML 

<ul id="test"> 
    <li>One</li> 
    <li>Two</li> 
    <li>Three</li> 
</ul> 

*/ 

Answer 1

Le problème est alors MooSlidesFx.Elements essayé d'étendre MooSlidesFx. Je ne sais toujours pas pourquoi, mais je m'en fous maintenant.

je réalise que je tendis MooSlidesFx dans MooSlidesFx.Elements et re-écrit chacune des méthodes. La seule réutilisation que j'ai pu en tirer était this.el et quelques options.

Alors ... Je les ai séparé en MooSlidesFx.Element et MooSlidesFx.Elements.

Puis j'ai créé une bibliothèque MooSlidesFx.lib et stockée la classe Fade là (MooSlidesFx.lib.Fade).

Maintenant, je peux:

MooSlidesFx.Fade = new Class({ 
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Element] 
}); 

MooSlidesFx.Fade.Elements = new Class({ 
    Implements: [MooSlidesFx.lib.Fade, MooSlidesFx.Elements] 
}); 

Et c'est incroyable. I < 3 MooTools. Maintenant, il est temps de construire la bibliothèque avec plus de classes d'effets!