DmitryMakhnev 23 янв 2013 в 22:12

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

6 мин

4.2K

JavaScript * jQuery *

-24

Комментарии 22

Firz 23 янв 2013 в 22:22

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

DmitryMakhnev 23 янв 2013 в 23:38

Дополнил

lair 23 янв 2013 в 22:30

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

TROODON 23 янв 2013 в 23:05

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

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

matiouchkine 23 янв 2013 в 23:47

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

zerkms 23 янв 2013 в 23:58

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

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

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

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

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

zerkms 24 янв 2013 в 00:04

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

DjPhoeniX 24 янв 2013 в 02:58

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

LegoMushroom 24 янв 2013 в 03:35

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

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

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

});

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

LegoMushroom 24 янв 2013 в 03:59

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

homm 24 янв 2013 в 05:27

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

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

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

dom1n1k 24 янв 2013 в 06:07

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

DjPhoeniX 24 янв 2013 в 06:13

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

dom1n1k 24 янв 2013 в 06:18

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

DjPhoeniX 24 янв 2013 в 06:29

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

LegoMushroom 24 янв 2013 в 07:28

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

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

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

homm 24 янв 2013 в 07:33

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

LegoMushroom 24 янв 2013 в 08:02

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

homm 24 янв 2013 в 08:10

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

LegoMushroom 24 янв 2013 в 11:12

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

homm 24 янв 2013 в 11:17

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

Leksat 24 янв 2013 в 12:33

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий