javascript - 探索 MooTools 中的实现/扩展

Question

我正在研究一些效果和东西来处理类/实现/扩展。这里的示例是基类(MooSlidesFx、MooSlidesFx.Elements)，我可以通过基类(MooSlidesFx、MooSlidesFx.Elements)为我正在处理的项目创建许多效果，以及两个实际执行某些操作的子类(MooSlidesFx.Fade、MooSlidesEffects.Elements.Fade)。

http://paste.mootools.net/m6afc7746

第一个类 MooSlidesFx 为其他人设置了一些东西，旨在实现。

第二个类 MooSlidesFx.Elements 扩展了 MooSlidesFx 以同样实现，但不仅仅是为传入的元素设置动画，它还会按顺序为其子元素设置动画(现在不寻找类(class)链，但它是我的下一个)列表!)，因此重新定义了一些方法。

第三个类，MooSlidesFx.Fade 效果很好。它实现了 MooSlidesFx，定义了两个小方法，然后我们就开始比赛了。

那么问题来了。 似乎我可以同时实现 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]
});

这太棒了。我<3 MooTools。现在是时候构建包含更多效果类的库了!