Backbone Просмотр события или пузыри

Question

У меня есть родительский вид, который содержит, скажем, 400 видов детей. Если я зарегистрирую 2 события на просмотр, это будет 800 событий, для которых DOM будет отменять.

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

Что такое оптимизация и эффективность.

Заранее спасибо

Answer 1

<div id="parent"> 
    <div id="child1" class="child"/> 
    <div id="child2" class="child"/> 
    <div id="child3" class="child"/> 
    .... 
    .... 
    <div id="child400"/> 
</div> 

Если выше структура, мой родитель магистральный вид будет, как показано ниже, и, очевидно, я создам слушатель моего родительского вида. Почему нам нужно иметь одну и ту же функцию прослушивания при 400 дочерних представлениях?

ParentView = Backbone.View.extend({ 
    el: "#parent", 

    events: { 
     "click .child": "clickEventHandler" 
    }, 

    clickEventHandler: function(event){ 
     //You can access child like this. 
     var $target = $(event.currentTarget); 
    } 
}); 

Answer 2

Что вы ищете называется event delegation, и да, это хорошо масштабируется, в то время как подключить нагрузку слушателей к отдельным элементам этого не делает. По моему опыту, вы занимаете худшую часть производительности при настройке обработчиков.

Another answer on SO также относится к последствиям производительности и ссылки на this test on jsPerf (в настоящее время недоступно, поскольку jsPerf закрыт для капитального ремонта).

Возможно, более полезными являются эти две демонстрации: создание 1000 элементов с помощью базовой линии, один раз with event delegation, в другой раз without.

Как видно из демонстрации, влияние значимо. В демонстрации установлены три события: mousedown, mouseup, click - и время для создания страницы примерно удваивается в демоверсии без участия делегата.

С другой стороны, если вы посмотрите на исходный код, вы увидите, что некоторые вещи могут стать немного сложнее при использовании делегирования. Легко получить доступ к данным модели, когда вы привязываете обработчик к отдельному представлению элементов (this.model.get("number")). Если вы используете делегирование, вы должны использовать косвенные способы. Итак, как всегда, - компромисс. Пока вы смотрите только на производительность, но нет.