Подписка на события через миксины

Вопрос-ответ JavaScript
1

Урок по js от сюда
Рассматривается подход подписки событий через миксины
var eventMixinOn = {

  /**
   * Подписка на событие
   * Использование:
   *  menu.on('select', function(item) { ... }
   */
  on: function(eventName, handler) {
    if (!this._eventHandlers) this._eventHandlers = {};
    if (!this._eventHandlers[eventName]) {
      this._eventHandlers[eventName] = []; // *** почему массив а не ссылка на функцию обработчик 'handler'
    }
    this._eventHandlers[eventName].push(handler);   
  }
}

Вот как я понимаю выполнимую подписку:

  • передается имя события и функция обработчик

  • если не существует внутренее свойство _eventHandlers то оно создается (если его нет то мы выполняем первую подписку)

  • далее выполняется проверка - если во внутреннем свойстве _eventHandlers нет свойства eventName то ему присваивается значение пустого массива

  • в this._eventHandlers[eventName] запушивается ссылка на функцию обработчик

Не понимаю зачем создавать массив и запушивать в него функцию обработчик вместо того что бы передать в свойство this._eventHandlers[eventName] сразу ссылку на функцию обработчик, вот так
this._eventHandlers[eventName] = handler
Подскажите почему используется запись
if (!this._eventHandlers[eventName]) {
this._eventHandlers[eventName] = [];
}
this._eventHandlers[eventName].push(handler);

а не this._eventHandlers[eventName] = handler
Спасибо

1 лайк
2

Хороший вопрос. Так делают для того чтобы не усложнять код (тем, что содержимое массива может быть изменено в двух местах). По опыту могу сказать что это правильный подход, и с таким кодом проще разбираться и его проще поддерживать.

1 лайк
3

Спасибо Дима, для меня это не простой вопрос, сейчас хочу разобраться с созданием кастомных событий(создать свой аналог on jquery), подскажи пожалуйста материал который мог бы мне помочь, сам думаю смотреть исходники jquery. Спасибо

4

Это должно помочь.

Если ты хочешь сделать продвинутую систему событий (со всплатием-погружением, копированием обработчиков при копировании узлов дерева), как это делает jQuery, разумеется, тебе понадобится построить нечто сложнее.

5

Массив для того, чтоб можно было навесить несколько обработчиков на один и тот же элемент