Ведро и не ядро

[Firz]

Вы бы пару слов добавили, о чем вы вообще, хоть какой-то намек на вступление к самому посту.

[DmitryMakhnev]

Дополнил

[lair]

Опять оптимизация без заданной цели?

[TROODON]

$(function(){
    $('.testDiv').click(function(){
        $(this).toggleClass('isActiveTestDiv');
    });
});

Пусть на 10мс дольше, зато в 500 раз читабельнее.

[matiouchkine]

В стопиццот. И, что самое главное, не отвалится завтра, когда автору надоест поддерживать свое ведро.

[zerkms]

А теперь сравните цену разработки и поддержки.

Бизнесу всё равно, как у вас написано, но бизнесу не всё равно, сколько это займёт времени сейчас и завтра.

Решение на jquery — однострочное

$(this).toggleClass('isActiveTestDiv');

Себестоимость этой строки кода — менее доллара.

[zerkms]

PS: для сравнения производительности выложите на jsperf.com пожалуйста. Цифра 2мс не говорит практически ни о чём.

[DjPhoeniX]

У вас «самодельная» реализация getElementsByClassName будет давать ложные срабатывания. Используйте .split(' ')

[LegoMushroom]

А зачем вам 350 обрабочиков событий?

$(document.body).on('click', '.testDiv', function(){

$(this).toggleClass('isActiveState');

});

Сделает свое дело одним обработчиком, и не нужно ничего искать, никаких прохождений по DOM, время выполнения сиильно сократится. Если собрались супер оптимизировать, то это, как мне кажется, нужно учитывать? Хотелось бы увидеть тесты на jsperf. Спасибо за поиск.

[LegoMushroom]

уф! У Вас правда 20 Гб оперативной памяти??)

[homm]

А теперь правильное решение:

$(function(){
    $(document).on('click', '.testDiv', function(){
        var vedroCache = $(this);
        if (vedroCache.hasClass('isActiveTestDiv')){
            vedroCache.removeClass('isActiveTestDiv');
        } else{
            vedroCache.addClass('isActiveTestDiv');
        }
    });
});

0 мс на 350 тысячах дивов на любой машине. Я поменял местами 2 слова. Сколько времени понадобится в вашем решении, чтобы добиться того же?

[dom1n1k]

А почему такая разница? Ведь действительно два слова переставлены и смысл, вроде как, тот же самый.

[DjPhoeniX]

В первом случае обработчики ставятся на каждый элемент.
Во втором — один обработчик на документ, и уже в нём фильтрация объектов, на которые кликнули.

[dom1n1k]

Это я понял. Но разве фильтрация не должна отнимать дополнительное время?
По обывательской логике вариант автора статьи должен быть прожорливее по памяти, но примерно эквивалентен по скорости.

[DjPhoeniX]

По скорости выполнения они будут примерно одинаковы (разница будет в пользу первого, но вы её даже на миллисекундомере не засечёте).
А вот устанавливаться один обработчик будет явно быстрее, чем 350 000. Ну и в памяти один займёт меньше, чем несколько.

[LegoMushroom]

Вы уверенны, что

var vedroCache = $(this);
if (vedroCache.hasClass('isActiveTestDiv')){
vedroCache.removeClass('isActiveTestDiv');
} else{
vedroCache.addClass('isActiveTestDiv');
}

было бы правильным решением? Почему не $(this).toggleClass('isActiveState');?

[homm]

Без разницы. Это не влияет на скорость выполнения.

[LegoMushroom]

нет, случай с if все-таки быстрее, у меня на машине в Chrome 24 на 50%, FF 18 на 20% jsperf.com/toggleclass-vs-hasclass-removeclass. Читаемость сравнивать тяжело

[homm]

Непонятно что вы мерите. При одном нажатии на див пользователем toggleClass() выполниться ровно один раз. Даже если предположить, что пользователь может нажать 350 000 раз, затраты на toggleClass() будут исчезающе малы по сравнению с обработкой клика операционной системой, направлению в нужное окно, диспетчеризации браузером в нужный элемент, всплытием js-события и наконец последствиями собственно установки класса (reflow, repaint).

[LegoMushroom]

все верно, на время выполнения, в примере автора, нисколько не повлияет. Я просто пытаюсь понять зачем писать 8 строк вместо 1-ой

[homm]

Куда вероятнее вариант, что автор забыл про toggleClass(), чем что он пытался достичь какую-то выгоду.

[Leksat]

Всегда нужно помнить о главном правиле разработчика…
Но автору все равно спасибо. Теперь я знаю как надо вешать обработчики с помощью jQuery.