Правила создания виджетов

Здесь мы рассмотрим принципы решения задач в разделе.

ООП

Виджет, или иначе говоря, графический компонент является ярко выраженной сущностью. Поэтому он должен создаваться с использованием ООП, иметь внутренний и внешний интерфейс:

function Widget(elem) { 
  // виджет получает либо элемент elem
  // либо объект с параметрами opts
  var self = this;

  // приватный метод
  function privateMethod() { self... }

  // публичный метод
  this.publicMethod = function() { ... }
}

Использование:

// создать
var widget = new Widget(document.getElementById('menu'));

// вызвать публичный метод
widget.publicMethod();

Фреймворк

В реальных проектах, как правило, используют фреймворки.

Здесь, в учебнике, мы не ограничиваем себя конкретным выбором фреймворка. Оказывается, и на обычном JavaScript вполне можно писать.

Но некоторые функции, которые мы разбирали в учебнике, всё же будут полезны.

Они содержатся в мини-библиотеке.

Для поиска элементов допустимо использование querySelector и querySelectorAll с селекторами CSS2.1. Таким образом, виджеты будут работать во всех современных браузерах, исключая IE<8.

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

Интеграция через события

Виджеты должны удобно интегрироваться с внешним кодом. Для этого используйте либо коллбэки, либо события.

Для генерации событий к вашим услугам мини-объект Eventer. Он также описан в мини-библиотеке.

Ленивая генерация

Если виджет должен создавать DOM-структуру — пусть делает это максимально поздно.

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

Это правило относится к любым операциям, требующим существенных вычислений.

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

Вообще, если что-то можно сделать потом и есть шанс, что это не понадобится — лучше это делать потом.

Стиль кода

Все виджеты пишем так, как писали бы для реального проекта.

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