Javascript 探索MooTools中的实现/扩展

我正在研究一些特效和东西，以获得类/实现/扩展的句柄。这里的例子是基类（MooSlidesFx，MooSlidesFx.Elements），我正在处理的项目可以从这些基类创建许多效果，还有两个子类（MooSlidesFx.Fade，MooSlidesEffects.Elements.Fade），它们实际上做了一些事情

第一个类，MooSlidesFx，为其他人设置东西，设计用于实现

第二个类MooSlidesFx.Elements扩展了MooSlidesFx以实现类似的功能，但它不仅会为传入的元素设置动画，还会按顺序为其子元素设置动画（现在不寻找课程链，但它是我列表中的下一个！），因此一些方法被重新定义

第三节课，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>

*/

var MooSlidesFx=新类({
实现：选项，
选项：{
延迟：0，
持续时间：500，
如何：'在'，
转换：“正弦：输入：输出”
},
初始化：功能（el，选项）{
此选项。设置选项（选项）；
这个.el=$（el）；
this.animation=this.setAnimation（el）；
},
设置动画：函数（）{
this.animation.set（$clear）；
var计算=this.calculate（this.el）；
this.animation.set（计算[0]）；
var delayed=function（）{
this.animation.start（计算[1]）
}.bind（this.delay）（this.options.delay）；
},
getDuration:function（）{
返回this.options.delay+this.options.duration
}
});
MooSlidesFx.Elements=新类({
扩展：MooSlidesFx，
选项：{
选择器：false，
元素延迟：200，
命令：“正常”
},
动画：[]，
初始化：功能（el，选项）{
log（'Elements initialize'）；
本协议。母公司（期权）；
this.elements=this.el.getElements（this.options.selector）；
此.elements.each（函数（el，索引）{
包括（this.setAnimation（el，index））；
}.约束（这个）；
},
设置动画：函数（）{
var eachDelay=this.options.elementDelay；
var计算=[]；
此.animations.each（函数（动画、索引）{
动画.set（$clear）；
计算。包括（本。计算（指数））；
animation.set（计算[0]）；
}.约束（这个）；
var delayed=函数（）{
此。元素。每个（函数（el，i）{
var go=函数（）{
console.log（'going'+i）
this.animations[i].start（计算[i][1]）；
}.约束（本）。延迟（d）；
eachDelay=eachDelay+this.options.element延迟；
}.约束（这个）；
}.bind（this.delay）（this.options.delay）；
},
getDuration:function（）{
返回this.options.delay+this.options.duration+（（this.elements.length-1）*this.options.elementDelay）；
}
});
MooSlidesFx.Fade=新类({
工具：MooSlidesFx，
setAnimation:函数（el）{
var animation=new Fx.Tween（el，{
属性：“不透明度”，
持续时间：this.options.duration，
转换：this.options.transition，
});
返回动画；
},
计算：函数（el）{
return（this.options.how=='in'）？[0,1]：[1,0]；
}
});
MooSlidesFx.Elements.Fade=新类({
实现：[MooSlidesFx.Fade，MooSlidesFx.Elements]
//TypeError:表达式“this.caller.\u owner.parent”[undefined]的结果不是对象。
//mootools-core.js（第1173行）
});
MooSlidesFx.Elements.Fade=新类({
工具：MooSlidesFx.Fade，
扩展：MooSlidesFx.Elements
//TypeError:表达式“this.setAnimation”[undefined]的结果不是函数。
//moosiles.Fx.js（第15行）
});
MooSlidesFx.Elements.Fade=新类({
实现：[MooSlides.Fx.Fade，MooSlidesFx.Elements]
//第49行永远不会被记录，所以元素永远不会被初始化，就像MooSlidesFx.Fade一样
});
/*****用法*****/
var fx=new MooSlidesFx.Elements.Fade（'test'，{selector:'li'}）.animate（）；
/* 
HTML

一个
两个
三

*/

问题出在MooSlidesFx.Elements试图扩展MooSlidesFx时。仍然不知道为什么，但我现在不在乎

我意识到我在MooSlidesFx.Elements中扩展了MooSlidesFx，并重新编写了每个方法。我从中得到的唯一重用是this.el和一些选项

所以。。。我将它们分为MooSlidesFx.Element和MooSlidesFx.Elements

然后我创建了一个库MooSlidesFx.lib并将淡入淡出类（MooSlidesFx.lib.Fade）存储在那里

现在我可以：

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

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

---

这太神奇了。问题是当MooSlidesFx.Elements试图扩展MooSlidesFx时。仍然不知道为什么，但我现在不在乎

我意识到我在MooSlidesFx.Elements中扩展了MooSlidesFx，并重新编写了每个方法。我从中得到的唯一重用是this.el和一些选项

所以。。。我将它们分为MooSlidesFx.Element和MooSlidesFx.Elements

然后我创建了一个库MooSlidesFx.lib并将淡入淡出类（MooSlidesFx.lib.Fade）存储在那里

现在我可以：

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

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

---

这太神奇了。事实上，我想我需要重新定义MooSlidesFx。淡入淡出，不实现MooSlidesFx。然后编写一个实现Fade和MooSlidesFx的类，然后编写另一个实现Fade和MooSlidesFx.Elements的类。实际上，我认为我需要重新定义MooSlidesFx.Fade，而不必实现MooSlidesFx。然后编写一个类