Как оптимизировать код js?

Question

[itworlds]

Здравствуйте. Помогите пожалуйста оптимизировать код js для слайдера:

/* Индекс слайда по умолчанию */
var slideIndex = 1;
showSlides(slideIndex);

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(slideIndex += 1);
}

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/
function minusSlide() {
    showSlides(slideIndex -= 1);  
}

/* Устанавливает текущий слайд */
function currentSlide(n) {
    showSlides(slideIndex = n);
}

/* Основная функция слайдера */
function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("item");
    var dots = document.getElementsByClassName("slider-dots_item");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

Comments

[dollar]

У вас нормальный код, не переживайте.

Кстати, а что вы называете оптимизацией? Скорость? Размер? Я понимаю, если бы размер был 100 килобайт или если скрипт вешал бы страничку на 1 секунду. Но у вас этого нет. Так в чём проблема? Красивое оформление и удобство сопровождения тоже дорого стоит, так что не засматривайтесь на вытянутые в 1 строчку комбайны.

Answer 1

[dom1n1k]

В показанном коде много чего можно было бы улучшить. Но непонятны ваши цели и рамки задачи.
Навскидку:
0. Почему не используется какая-то библиотека? Не обязательно большая типа Slick, есть и варианты полегче.
1. Подумать, что будет, если слайдеров на странице будет более одного?
2. Написать jQuery-подобные функции addClass/removeClass (если не хотите использовать classList). Работать с " active" (с пробелом) опасно.
3. Вынести имена классов в константы. И использовать БЭМ ("item" может встретиться где угодно).
4. Может ли отличаться количество слайдов и точек? Судя по коду - нет, но зачем тогда два цикла?
5. Присваивать display: "block" тоже опасно, потому что там в теоретически может оказаться что-то другое (flex например).
6. Имя функции currentSlide плохое - вообще непонятно, что она делает. Геттер или сеттер?

Answer 2

[hzzzzl]

ну можно проверять что индекс не выходит за границы массива так, и в showSlides посылать просто 1 или -1, типа следующий слайд или предыдущий ... а так да, всё работает же и хорошо читается

/* Устанавливает текущий слайд */
function currentSlide() {
    showSlides();
}

/* Функция увеличивает индекс на 1, показывает следующй слайд*/
function plusSlide() {
    showSlides(+1);
}

/* Функция уменьшяет индекс на 1, показывает предыдущий слайд*/
function minusSlide() {
    showSlides(-1);  
}

/* Основная функция слайдера */
function showSlides(n = 0) {
    // ставим следующий слайд вот так
    slideIndex = (slideIndex + n) % slides.length < 0 
      ? slides.length - 1 
      : (slideIndex + n) % slides.length


    ....

Answer 3

[Victor Golovko]

Для чего вам оптимизация? Так же задача не понятна по слайдерy.
Если понадобится сделать второй слайдер на странице, то yже не рабочий код.