Блог

Главная - Вопросы по программированию - Интеграция различных свойств в функцию fn

Интеграция различных свойств в функцию fn

#jquery #properties #prototype #transition

#jquery #свойства #прототип #переход

Вопрос:

Я создал следующую функцию (для использования с гениальным плагином jquery-transit от Rico StCruz):

 $.fn.translateLeftTop = function( left, top, duration, easing ) {
    var $this  = $(this);
    var currentLeftPx = parseInt( $this.css('left') );
    var currentTopPx = parseInt( $this.css('top') );
    var parentWidth = $this.parent().width();
    var parentHeight = $this.parent().height();
    // final left layout destination in px
    var finalLeftPx = parentWidth/100 * left; 
    var finalTopPx = parentHeight/100 * top;
    // actual distances to final left/top layout destination in px
    var distanceLeftPx = currentLeftPx - finalLeftPx;
    var distanceTopPx = currentTopPx - finalTopPx;

    $this.transition( { x: -distanceLeftPx, y: -distanceTopPx }, duration, easing, function() {
        $this.stop(true).css( { left: left  '%', top: top  '%', x: 0, y: 0 } );
    } ); 
}

Вместо этого я бы с удовольствием использовал его следующим образом:

 $("#element").translateLeftTop( { left: '5%', top: '5%' }, 500, 'easeOutSine' )

и держите его открытым для обоих значений или только одного по коду, так что также

  $("#element").translateLeftTop( { left: '5%' }, 500, 'easeOutSine' )

или

  $("#element").translateLeftTop( { top: '5%' }, 500, 'easeOutSine' )

было бы полезно.

Ответ №1:

Ваша функция принимает 3 параметра, а не 4, как вы ее описали.

В настоящее время у вас function( left, top, duration, easing ){... есть, но вместо этого вы хотите иметь function( options, duration, easing ) where options — это объект.

Затем вы можете получить доступ к свойствам top left или чему-либо еще, что вы хотите от options объекта. Однако перед его использованием необходимо проверить, существует ли это свойство. Например, чтобы проверить top , существует ли свойство, прежде чем использовать его в функции, вы можете сделать:

 if (options.hasOwnProperty('top')) {
    // do something with options.top
}

Ответ №2:

Спасибо! Я тоже об этом думал. Но в этом случае мне пришлось бы сделать 3 полные версии последней части кода ($this.transition …), Одну с 2 свойствами параметров, одну только с первым и одну только со вторым. Я боюсь, что это станет ужасным фрагментом кода. 🙁

Кто-нибудь знает, как, например, jquery решает такого рода функции, например, с помощью их функции .animate() . Я не могу себе представить, что в них есть бесконечные случаи if else, потому что animate() принимает намного больше параметров, и предоставление таким образом всех комбинаций было бы практически невозможно. Вы понимаете, что я имею в виду?

Метки: