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

Урок по 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 симпатия

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

1 симпатия

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

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

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

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