Как правильно обернуть инициализацию jqueryUI слайдера?

Question

[qbk17]

Есть такой вот слайдер:

// Значения
		var sliderVariables = {
	    	minValue: parseInt( $( ".price-slider__min" ).data( "range-slider-min" ) , 10 ),
	    	maxValue: parseInt( $( ".price-slider__max" ).data( "range-slider-max" ) , 10 )
	    }

	    // Инициализация слайдера
		$( ".price-slider" ).slider({
			range: true,
			min: sliderVariables.minValue,
			max: sliderVariables.maxValue,
			values: [ sliderVariables.minValue, sliderVariables.maxValue ],
			slide: function( event, ui ) {
				$( ".price-slider__min" ).attr( "value", ui.values[0] );
				$( ".price-slider__max" ).attr( "value", ui.values[1] );
			}
	    });

		// Инициализация начальных значений
		$( ".price-slider__min" ).attr( "value", $( ".price-slider" ).slider( "values", 0 ) );
		$( ".price-slider__max" ).attr( "value", $( ".price-slider" ).slider( "values", 1 ) );

А так же есть два события, которые изменяют положение ползунков в зависимости от введённых значений пользователем:

// Изменение положения ползунков в зависимости от значения поля (мин)
	    $( document ).on( "change", ".price-slider__min", function() {
	    	changePriceSliderFieldMin( $( this ) );
	    });

	    function changePriceSliderFieldMin( field ) {
			if ( 
				( field.attr( "value" ) > sliderVariables.maxValue )
				|| ( field.attr( "value" ) >  $( ".price-slider" ).slider( "values", 1 ) ) 
			) {
				field.attr( "value", $( ".price-slider" ).slider( "values", 1 ) );
				$( ".price-slider" ).slider( "values", 0, $( ".price-slider" ).slider( "values", 1 ) );
			} else if ( field.attr( "value" ) < sliderVariables.minValue ) {
				$( ".price-slider" ).slider( "values", 0, sliderVariables.minValue );
			} else {
				$( ".price-slider" ).slider( "values", 0, field.attr( "value" ) );
			}
		}

	    // Изменение положения ползунков в зависимости от значения поля (макс)
	    $( document ).on( "change", ".price-slider__max", function() {
	    	changePriceSliderFieldMax( $( this ) );
	    });

		function changePriceSliderFieldMax( field ) {
			if ( 
				( field.attr( "value" ) < sliderVariables.minValue )
				|| ( field.attr( "value" ) <  $( ".price-slider" ).slider( "values", 0 ) )
			) {
				field.attr( "value", $( ".price-slider" ).slider( "values", 0 ) );
				$( ".price-slider" ).slider( "values", 1, $( ".price-slider" ).slider( "values", 0 ) );
			} else if ( field.attr( "value" ) > sliderVariables.maxValue ) {
				field.attr( "value", sliderVariables.maxValue );
				$( ".price-slider" ).slider( "values", 1, sliderVariables.maxValue );
			} else {
				$( ".price-slider" ).slider( "values", 1, field.attr( "value" ) );
			}
		}

Мне при AJAX-запросе нужно будет неоднократно обновлять min и max значения, а так же реинициализировать сам слайдер. Можно как то Пример кода 1 обернуть в функцию (для простого вызова и обновления переменных в ней), чтобы в других функциях (changePriceSliderFieldMax и changePriceSliderFieldMin) не было проблем получения данных из $slider?

Answer 1

[Григорий Васильков]

Для начала
jQuery = $.noConflict(); // удалить глобалку jQ, делать сразу после запроса к файлу jquery.min.js
Некоторые древние деды нашей профессии любили свою главную библиотеку в доллар совать. Не важно - jquery это или нет. Бывает что две библиотеки одна заменяет другую и не работают потом обе.

потом вот так:

(function ($, App) {
  // ваш код
  $(function () {
    // ваш код после DOM-ready
  });
})(jQuery, App = window.App || {});

* тут у вас будет глобальная переменная App в которую можно что-нибудь класть. Например, готовые слайдеры или другие важные вещи, чтобы потом выводить их в консоль или связывать друг с другом

* важно помнить что высота некоторых элементов с overflow: hidden появится только через несколько секунд после загрузки страницы, когда все элементы будут отрисованы. То есть не спасает даже ondomready - нужно делать задержку на пару секунд или плакать в форум разрабам jQuery, давно пора это сделать уже

* иногда полезно работать с onload для <script src=""> чтобы поймать событие когда скрипт будет подключен к сайту, но еще до того как будет закончен ondomready

* и я вижу у вас в коде $(document).change() - не знаю что у вас там конкретно происходит, смотреть надо, но я бы на $(document) вешал только две вещи (вообще только две) - mousemove, mouseup - если они требуются. Mousemove - всевозможные ползунки, mouseup - отпускание зажатой ранее клавиши мыши для торопливого пользователя, который любит мышкой двигать с зажатой кнопкой.

Вешать onchange на документ... интересно, сколько сотен раз выполняется ваше действие?

Comments

[qbk17]

Так DOM будет обновляться и события слетатать, если делать через $( "selector" ).change()