Как оптимизировать множественный вызов JS плагина с разными настройками?

Question

[Андрей Верх]

Первый раз столкнулся с такой задачей, что один плагин, на странице применяется много раз, с незначительным отличием настроек. Встал вопрос, как можно оптимизировать код. Возможно как-то в цикле пройтись или что-то подобное...

На конкретном примере:
1. Взял плагин nouislider
2. На одной странице вызов 5ти разных slider элементов
3. У каждого slider'а куча одинаковых настроек, но разные инпуты и параметры min и max.
4. Как избавится от однотипного кода? Если можно, с примером.

Например, такой код нужно 5 раз повторить к разным инпутам и с разным start:

var keypressSlider = document.getElementById('keypress');
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];

noUiSlider.create(keypressSlider, {
	start: [20, 80],
	connect: true,
	direction: 'rtl',
	tooltips: [true, wNumb({ decimals: 1 })],
	range: {
		'min': [0],
		'10%': [10, 10],
		'50%': [80, 50],
		'80%': 150,
		'max': 200
	}
});

keypressSlider.noUiSlider.on('update', function( values, handle ) {
	inputs[handle].value = values[handle];
});

Заранее спасибо :)

Answer 1

[Bowen]

Попробуйте так

// var keypressSlider = document.getElementById('keypress');
var keypressSlider = document.getElementsByClassName(keypress);
var input0 = document.getElementById('input-with-keypress-0');
var input1 = document.getElementById('input-with-keypress-1');
var inputs = [input0, input1];
var defCfg = {
	start: [20, 80],
	connect: true,
	direction: 'rtl',
	tooltips: [true, wNumb({ decimals: 1 })],
	range: {
		'min': [0],
		'10%': [10, 10],
		'50%': [80, 50],
		'80%': 150,
		'max': 200
	}
};

function __extends(a, b) {
	var c = {};
	for (var v in a) {
		c[v] = a[v];
	}
	for (var v in b) {
		c[v] = b[v];
	}
	return c;
}

for (var i = 0; i < keypressSlider.length; i++) {
	var data = JSON.parse(keypressSlider[i].dataset.cfg),
		params = __extends(defCfg, data);
	noUiSlider.create(keypressSlider[i], params);
}

keypressSlider.noUiSlider.on('update', function(values, handle) {
	inputs[handle].value = values[handle];
});

Каждому элементу можете задать свои параметры: data-cfg='{"key":"values"}'

Comments

[Андрей Верх]

Спасибо. Идею уловил :)

Только там у меня ещё EventListener на каждый инпут....надеюсь всё "подцепится" и заработает.