1
У меня есть следующий код, который связывает eventListeners:Динамически разрывания eventListeners (вывоз мусора)
// this code is part of a larger object
_boundEventsTracker: [],
_$bindEvents: function(){
var self = this;
this.actions.forEach(function(acs){
acs = acs.split(' ');
var find = document.querySelector(acs[1]);
if(find!=null){
// make sure we only bind events once
if(self._boundEventsTracker.indexOf(acs[1]) == -1){
find.addEventListener(acs[0], function(e){
self.functions[acs[2]].call(self, e);
});
self._boundEventsTracker.push(acs[1]);
}
} else {
/* could not bind
this is usually because the element resides on a partial page */
}
});
console.log("Events:");
console.log(this._boundEventsTracker.length);
},
this.actions может выглядеть следующим образом, например:
actions: [
'click .settings toggleSidebar',
],
На hashchange я динамически загрузить страницу а затем назовите метод _$bindEvents (_$load является основанной на обещании оберткой для XMLHttpRequest):
window.addEventListener('hashchange', function(e){
self._$load(e).then(function(content){
document.querySelector('.pageArea').innerHTML=content; // <- populate here
self._$bindEvents();
}});
Это дает следующее преимущество: всякий раз, когда хешбанг изменяется, загружается новое представление, html обрабатывается в основном представлении, а затем события привязаны к элементам, которые находятся в этом конкретном частичном представлении.
1 Необходимо ли отключать eventListeners, когда вид позже уничтожается (очищается)?
2 Есть ли проблемы с производительностью при загрузке многих eventListeners в память?