探索器具/扩展在MooTools的
-
06-09-2019 - |
题
我工作的一些影响,事情得到一个类手柄/器具/扩展。这里的例子是从创建一个项目我的工作,和两个子类(MooSlidesFx.Fade,MooSlidesEffects.Elements.Fade),实际上做一些事情很多效果的基类(MooSlidesFx,MooSlidesFx.Elements)。
http://paste.mootools.net/m6afc7746
在第一级,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>
*/
解决方案
的问题是当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]
});
和这是惊人的。 I <3个MooTools的。现在是时候建立起来的图书馆有更多效果类!