DmitryMakhnev Jan 24 2013 at 02:12

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

6 min

4.1K

JavaScript*jQuery*

-24

Comments 22

Firz Jan 24 2013 at 02:22

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

+11

DmitryMakhnev Jan 24 2013 at 03:38

Дополнил

lair Jan 24 2013 at 02:30

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

TROODON Jan 24 2013 at 03:05

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

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

+21

matiouchkine Jan 24 2013 at 03:47

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

+11

zerkms Jan 24 2013 at 03:58

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

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

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

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

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

zerkms Jan 24 2013 at 04:04

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

DjPhoeniX Jan 24 2013 at 06:58

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

LegoMushroom Jan 24 2013 at 07:35

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

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

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

});

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

+12

LegoMushroom Jan 24 2013 at 07:59

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

homm Jan 24 2013 at 09:27

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

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

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

+10

dom1n1k Jan 24 2013 at 10:07

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

DjPhoeniX Jan 24 2013 at 10:13

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

dom1n1k Jan 24 2013 at 10:18

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

DjPhoeniX Jan 24 2013 at 10:29

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

LegoMushroom Jan 24 2013 at 11:28

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

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

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

homm Jan 24 2013 at 11:33

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

LegoMushroom Jan 24 2013 at 12:02

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

homm Jan 24 2013 at 12:10

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

LegoMushroom Jan 24 2013 at 15:12

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

homm Jan 24 2013 at 15:17

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

Leksat Jan 24 2013 at 16:33

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

Show the best of all time