Как можно улучшить эффективность и производительность кода, работающего с массивом?

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

document.onmousemove = function(e) {
    var slider1Value = $("#slider1").roundSlider("option", "value");
    var slider2Value = $("#slider2").roundSlider("option", "value");

    if (slider2Value === 5 && slider1Value === 10) { 
        updateValuesForConfiguration1();
    } else if (slider2Value === 10 && slider1Value === 10) { 
        updateValuesForConfiguration2();
    }
}

function updateValuesForConfiguration1() {
    $('.calc_nazvanie').html('BORRI INGENIO COMPACT <br> 10 kVA (BSS90)');
    $('.calc_descr').html('Мощность 10 000 Вт/Ва');
    $('.tovar_ibp').attr("href", "https://...");
    $('.kartinka_ibp').attr("src", "https://...");
    $('.calc_nazvanie2').html('VISION CP1270<br>7 AH 12V AGM');
    $('.calc_descr2').html('Оптимальное решение<br>12 В, 7 Ач, AGM, 10 лет');
    $('.calc_mnojitel_akb').html('30 x');
    $('.tovar_akb').attr("href", "https://....");
    $('.kartinka_akb').attr("src", "https://...");
}

function updateValuesForConfiguration2() {
    $('.calc_nazvanie').html('BORRI INGENIO COMPACT <br> 10 kVA (BSS90)');
    $('.calc_descr').html('Мощность 10 000 Вт/Ва');
    $('.tovar_ibp').attr("href", "https://....");
    $('.kartinka_ibp').attr("src", "https://....");
    $('.calc_nazvanie2').html('VISION CP1290E<br>9 AH 12V AGM');
    $('.calc_descr2').html('Оптимальное решение<br>12 В, 9 Ач, AGM, 10 лет');
    $('.calc_mnojitel_akb').html('30 x');
    $('.tovar_akb').attr("href", "https://...");
    $('.kartinka_akb').attr("src", "https://....");
}
  • 21 ноября 2023 г. 9:13
Ответы на вопрос 2
Для улучшения эффективности и производительности кода, работающего с массивом, можно использовать следующие подходы:

1. Кэширование значений слайдеров: вместо вызова функции получения значения слайдера каждый раз внутри обработчика события, можно сохранить значение в переменной и использовать его повторно. Это сэкономит некоторые ресурсы и ускорит выполнение кода.

2. Использование объекта для хранения конфигураций: вместо использования if-else условий для определения текущей конфигурации, можно создать объект, в котором ключами будут значения слайдеров, а значениями - функции для обновления значений. Такой подход сделает код более гибким и позволит легко добавлять новые конфигурации.

3. Оптимизация обновления DOM-элементов: если элементы с классами ".calc_nazvanie", ".calc_descr" и т.д. являются статичными и не меняются во время выполнения кода, можно сохранить ссылки на них в переменных и обращаться к ним напрямую, вместо поиска элементов по классу каждый раз при обновлении значений.

4. Использование универсальных классов и шаблонов: если элементы с классами ".calc_nazvanie", ".calc_descr" и др. имеют общую структуру и отличаются только некоторыми значениями, можно использовать шаблоны или универсальные классы для обновления значений. Например, можно использовать одну функцию для обновления текста и ссылки на элементы IBP и AKB.

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

var sliderValues = {};
var slider1Value, slider2Value;
var config = {
    "5-10": updateValuesForConfiguration1,
    "10-10": updateValuesForConfiguration2
};

document.onmousemove = function(e) {
    slider1Value = $("#slider1").roundSlider("option", "value");
    slider2Value = $("#slider2").roundSlider("option", "value");
    var configKey = slider2Value + "-" + slider1Value;

    if (config[configKey]) { 
        config[configKey]();
    }
}

function updateValuesForConfiguration1() {
    var ibpText = 'BORRI INGENIO COMPACT <br> 10 kVA (BSS90)';
    var ibpDescr = 'Мощность 10 000 Вт/Ва';
    var ibpLink = "https://...";
    var ibpImageUrl = "https://...";

    var akbText = 'VISION CP1270<br>7 AH 12V AGM';
    var akbDescr = 'Оптимальное решение<br>12 В, 7 Ач, AGM, 10 лет';
    var akbMnojitel = '30 x';
    var akbLink = "https://...";
    var akbImageUrl = "https://...";

    $('.calc_nazvanie').html(ibpText);
    $('.calc_descr').html(ibpDescr);
    $('.tovar_ibp').attr("href", ibpLink);
    $('.kartinka_ibp').attr("src", ibpImageUrl);
    $('.calc_nazvanie2').html(akbText);
    $('.calc_descr2').html(akbDescr);
    $('.calc_mnojitel_akb').html(akbMnojitel);
    $('.tovar_akb').attr("href", akbLink);
    $('.kartinka_akb').attr("src", akbImageUrl);
}

function updateValuesForConfiguration2() {
    var ibpText = 'BORRI INGENIO COMPACT <br> 10 kVA (BSS90)';
    var ibpDescr = 'Мощность 10 000 Вт/Ва';
    var ibpLink = "https://
'- BORRI INGENIO COMPACT 
10 kVA (BSS90)' - это название устройства. - Мощность устройства составляет 10 000 Вт/Ва. - Событие onmousemove реагирует на движение мыши. - Значение слайдера1 можно получить с помощью метода $("#slider1").roundSlider("option", "value"). - Значение слайдера2 можно получить с помощью метода $("#slider2").roundSlider("option", "value"). - Заголовок элемента с классом "calc_nazvanie" будет изменен на название устройства согласно выбранными значениями слайдеров. - Описание элемента с классом "calc_descr" будет изменено на описание устройства согласно выбранными значениями слайдеров.
Похожие вопросы