Здесь я сослался на библиотеку графиков javascript с открытым исходным кодом в соответствии с вашими требованиями к диаграмме слайдера.
Самой большой вещью, которую можно не упустить, являются события, и как Вы присваиваете им.
Например, возьмите этот сценарий (так как Вы не обеспечили один):
<div id="ajaxResponseTarget">
...
</div>
<script type="text/javascript">
$(someButton).observe('click', function() {
new Ajax.Updater($('ajaxResponseTarget'), someUrl, {
onSuccess: function() {
$$('#ajaxResponseTarget .someButtonClass').invoke('observe', 'click', function() {
...
});
}
});
});
</script>
Это создаст утечку памяти, потому что когда #ajaxResponseTarget
обновляется (внутренне, Prototype будет использовать innerHTML
) элементы с click
события будут удалены из документа без своих удаляемых событий. Во второй раз Вы нажимаете someButton
, у Вас затем будет вдвое больше обработчиков событий, и сборка "мусора" не может удалить первый набор.
Способ избежать этого состоит в том, чтобы использовать делегацию события:
<div id="ajaxResponseTarget">
...
</div>
<script type="text/javascript">
$('ajaxResponseTarget').observe('click', function(e) {
if(e.element().match('.someButtonClass')) {
...
}
});
$(someButton).observe('click', function() {
new Ajax.Updater($('ajaxResponseTarget'), someUrl);
});
</script>
Из-за пути события DOM работают, "щелчок" по .someButtonClass
будет стрелять также в #ajaxResponseTarget
, и Прототип делает это очень простым для определения, какой элемент был целью события. Никакие события не присвоены элементам в #ajaxResponseTarget
, таким образом, нет никакого пути к замене его содержания к событиям висячей строки от целей в.
Я могу быть неправым, но это кажется на создание закрытий вокруг объекта ответа. Каждый объект ответа будет отличаться, который приводит к увеличенному объему потребляемой памяти.