paulshvorak
@paulshvorak
front-end

[code-review] JS галерея, какие замечания?

Доброго времени суток.
На даный момент работаю верстальщиком и параллельно изучаю js. Пытаюсь сам что-то писать. И вот моя последняя наработка : линк. Хотелось бы услышать замечания, как сделать лучше и вообще как дальше двигаться в обучении. Буду благодарен за всю критику и советы.
  • Вопрос задан
  • 354 просмотра
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen
JavaScript developer. IonDen.com
1. Вы подключили 'use strict'; в самом начале кода. Этим подключением вы можете потенциально сломать чей-то чужой код, который написан без учета новых правил. Ваша первая задача - инкапсулировать свой код. Перенесите внутрь Gallery.
2. Не хватает возможности подключать код как модуль: https://github.com/umdjs/umd
3.
throw new Error('I cant find gallery-element on this page');
- не нужно кидать ошибку тут. Ваш плагин должен тихо проверять есть ли нужные элементы, и, если их нет, тихо НЕ запускаться. Мало ли, вдруг его подключат на весь сайт, а галерея будет только на одной из страниц.
4. В остальном код выглядит немного сумбурно. Нет визуального разделения на части, разная функциональность не вынесена в отдельные функции, трудно понять логику и последовательность выполнения. Возможно не хватает немного комментариев. При расширении функциональности через какое-то время поддерживать этот код станет очень тяжело.
Ответ написан
@SuperOleg39ru
Front-end разработчик
Добрый день!

1) Для удобства оформите библиотеку как npm пакет.
И что бы этот пакет можно было использовать разными системами сборки, можно использовать формат определения модуля UMD

2) При создании экземпляра const gallery = new Gallery({}) - неплохо бы иметь доступ к управлению галереей через JS, например:
gallery.pause();
gallery.next();


Возможно вам захочется добавлять слайды на лету, это тоже отдельный метод.

3) Так же, можно добавить изменение настроек на лету, gallery.setOptions({})

В связи с этим можно сделать вывод, что нужен более объекто-ориентированный код, то есть вы создаете класс Gallery, который имеет методы для управления, сохраняет свойства себе в контекст (this), например:

var defaultOptions = {
  ...
}

privateMethod() {
  ...
}

function Gallery(options) {
  this.options = extend(defaultOptions, options);
  this.interval = this.createInterval();
  ...
}

Gallery.prototype.init = function() {
  ...
}

Gallery.prototype.next = function() {
  ...
}

Gallery.prototype.createInterval= function() {
  ...
}

function extend(a, b) {
  ...
}


То есть, всю логику вы разделяете на отдельные функции, которые являются методами класса Gallery, если нужен публичный доступ к этой логике, либо выносите эти методы и свойства наружу, если их нельзя менять пользователям.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы