Mootools에서 도구/확장

Question

수업/구현/확장에 대한 처리를 얻기 위해 몇 가지 효과와 작업을 수행하고 있습니다. 여기서 예제는 내가 작업중 인 프로젝트를 통해 많은 효과를 만들기 위해 기본 클래스 (Mooslidesfx, Mooslidesfx.elements)와 실제로 무언가를하는 두 개의 어린이 클래스 (mooslidesfx.fade, mooslideseffects.fade)를위한 것입니다.

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>

*/

Answer 1

문제는 mooslidesfx.elements가 mooslidesfx를 확장하려고 시도했을 때였습니다. 아직도 이유를 모르지만 지금은 신경 쓰지 않습니다.

나는 mooslidesfx.elements에서 mooslidesfx를 확장하고 모든 방법을 다시 작성했다는 것을 깨달았습니다. 내가 얻은 유일한 재사용은 이것입니다 .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]
});

그리고 그것은 놀랍습니다. 나는 <3 mootools. 이제 더 많은 효과 수업을 통해 도서관을 구축 할 시간입니다!