MooToolsでの実装/拡張の調査

Question

クラス/実装/拡張のハンドルを取得するために、いくつかのエフェクトや作業を進めています。ここでの例は、私が作業しているプロジェクトで多くのエフェクトを作成するベースクラス（MooSlidesFx、MooSlidesFx.Elements）と、実際に何かする2つの子クラス（MooSlidesFx.Fade、MooSlidesEffects.Elements.Fade）です。

http://paste.mootools.net/m6afc7746

最初のクラス、MooSlidesFxは、単に実装されるように設計された、他の人のために何かを設定します。

2番目のクラスMooSlidesFx.Elementsは、MooSlidesFxを同様に実装するように拡張しましたが、渡された要素をアニメーション化するのではなく、順番に子をアニメーション化します（今レッスンチェーンを探しませんが、私のリスト！）、いくつかのメソッドが再定義されています。

3番目のクラスのMooSlidesFx.Fadeは素晴らしい動作をします。それはMooSlidesFxを実装し、2つの小さなメソッドを定義し、我々はレースに出ます。

次に問題です。私はちょうどMooSlidesFx.ElementsとMooSlidesFx.FadeとPOWの両方を実装することができるように、はと思われます！私は要素に褪せていない新しいエフェクトを持っていますが、むしろそれは子供たちがずらりと並んでいます。

ご協力ありがとうございます。ここで

は、コードの母親負荷が来る：

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

MooSlidesFx.ElementsがMooSlidesFxを拡張しようとしたときに問題でした。それでも理由はわかりませんが、今は気にしません。

私はMooSlidesFx.ElementsでMooSlidesFxを拡張し、すべてのメソッドを書き直したことに気付きました。私がそれから得た唯一の再利用はthis.elといくつかのオプションでした。

だから私はそれらをMooSlidesFx.ElementとMooSlidesFx.Elementsに分けました。

次に、ライブラリMooSlidesFx.libを作成し、そこにFadeクラス（MooSlidesFx.lib.Fade）を保存しました。

今私ができるだけ：

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

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

そして、それは驚くべきことです。 I < 3 MooTools。今度はより多くのエフェクトクラスを使ってライブラリを構築しましょう！