Jump to content
  • 0

Варианты реализации


s0rr0w
 Share

Question

Интересует следующий вопрос

Есть код

<div id="container"></div>
<div id="itemTpl"></div>

Нужно при помощи jQuery

1. Создать 10000 клонов "itemTpl", удалить из каждого клона id, в клон вставить итерацию в виде текста.

2. По клику на ссылку пройти по каждому клону и назначить ему style.color = "red";

Интересуют варианты реализации.

Link to comment
Share on other sites

Recommended Posts

  • 0
Да, что-то в этом есть :) В принципе, насколько я понимаю, в данном случае что SC, что jQuery делают примерно одно и тоже? То есть ползают по чайлдам контейнера, у них что-то меняют, только SC для изменения использует данные из атрибута элемента, так?

Делал я тут профайлинг (не только этого примера, но и компоненты грида, самописной, на jQuery). Поглядел на вызовы каких-то левых непонятных функций из фреймворка, почесал репу... переписал без jQuery. Скорость увеличилась в разы.

Основная потеря скорости идет от огромного количества вызовов .css(), .empty(). .empty() вообще крут -- он еще и анбинды делает, там вообще все небыстро. Если повесить хоть что-то (с помощью jQuery.bind()) на удаляемые элементы, скорость упадет еще больше, будет просто кошмар какой-то.

Тут нужно всегда искать баланс. Баланс между универсальностью и скоростью работы. Написать код, который будет заточен сугубо под статический HTML, и работать сверхбыстро - не проблема. Проблема начинается тогда, когда потребуется модификация данного кода. И тут начинаются грабли. Придется постоянно переписывать куски кода при любом чихе. Мало того, нужно внимательно еще и код проверять, чтобы не было багов, которые при таком подходе явно вылезут.

Я в итоге пришел к SC, после написанных тонн кода. И получил тот инструмент, который хорошо, на первый взгляд, сбалансирован.

Link to comment
Share on other sites

  • 0

SC работает по принципу - пойду в какой-то контейнер, найду заданные ноды, и если у ноды есть атрибут SC - разберу значение, потом, если совпадает имя события запуска с тем именем, что в ноде записано, запустить функцию-обработчик.

JQ работает по принципу - сначала найду с чем я буду работать, а потом буду работать с этим массивом нод

SC работает по принципу - кто удовлетворяет условиям запуска, тот и будет отрабатывать нужное действие.

Link to comment
Share on other sites

  • 0

по первому примеру

$("#container").find("div").each( function(){ $(this).css( "color", "red" ) } );

0_o, это очень далеко от jQuery

На jQuery это так выглядит так:

$("#container div").css( "color", "red" );

это в два раза медленее SC не потому, что выборку трудно сделать ( выборка $("#container div"); это 18мс в safari и 40мс в ie8), а потому, что .css( "color", "red" ) выполняет пачку проверок на кроссбраузерность и т.п. (это не зря потраченное время, это стабильность и безглючность).

Именно так и нужно писать.

Но если уж случилось 10000 итемсов (это все-таки исключительный случай, а не норма) jQuery прекрасно ускоряется, мы можем просто использовать ту же функцию, что и SC, причем скорость будет больше чем у SC:

$("#container div").each(function(){	
try {
this.style.color = "red";
} catch ( e ) { }
});

Но повторюсь, это крайний случай нет никаких причин отказывать от более надежного и читабельного .css( "color", "red" )

разница производительности в реальных условиях абсолютно не существенная.

по второму примеру

Добавим классы там где нужно (а как же :) чем class="clearThis" отличается от SC="sc_clear:exec", везде где можно добавить SC="sc_clear:exec" можно добавить и class="clearThis").

и догоним SC (в ie8 даже обгоним), а по первому проходу обгоним везде (я даже не знаю, что лучше 70 : 70 : 70 или 1500 : 50 : 50), причем код без каких либо оптимизаций:

$("#container div .setRed").css( "color", "red" );
$("#container div .addGreenClass").addClass('green');
$("#container div .clearThis").empty();
$("#container div .hideThis").addClass('hiddenBlock');

но плюс jquery в то, что для нее классы только опция, можно и без них, только чуть медленней, а как SC будет без своих SC="sc_clear:exec":

$('#container div u').addClass('hiddenBlock');
$('#container div span:first-child').css("color", "red");
$('#container div span:nth-child(2)').addClass('green');
$('#container div b').empty();

Глобального превосходства в скорости нет, имеется задержка при первом запуске, а главное код на jQuery компактнее, читабельнее, очевиднее и сосредоточен в одном месте, логика работает с представлением, а не перемешана с ним.

Link to comment
Share on other sites

  • 0
На jQuery это так выглядит так:

$("#container div").css( "color", "red" );

Ну тогда уже так, чтобы все было как надо:

$("#container > div").css( "color", "red" );

Работает .css() в разы медленнее простого навешивания.

$('#container div u').addClass('hiddenBlock');
$('#container div span:first-child').css("color", "red");
$('#container div span:nth-child(2)').addClass('green');
$('#container div b').empty();

4 выборки? О_о Ох говноидея...

Link to comment
Share on other sites

  • 0
Глобального превосходства в скорости нет, имеется задержка при первом запуске, а главное код на jQuery компактнее, читабельнее, очевиднее и сосредоточен в одном месте, логика работает с представлением, а не перемешана с ним.

:) Смешавание логики и педставления - в этом нет ничего плохого. Знаете почему? Потому что это две неотъемлемые части.

У меня подход к работе с HTML совершенно другой. Структура HTML задает поведение компонента. Т.е. я могу менять лигику и поведение компонента, всего лишь перестраивая HTML. В одном месте.

И еще один пример из жизни.

Есть задание, например, при нажатии на кнопку "очистить" нужно

* очистить кусочек формы (не всю)

* убрать 5 сообщений об ошибках

* убрать два сообщения об успешном выполнении операции

* спрятать контейнер с результатами выполнения предыдущей операции.

На JQ это можно оптимизировать так. Задать нужным компонентам класс, например "clear", и прятать ноды, которые имеют этот класс. Очистку кусочка формы - написать отдельную функцию.

Но, половина из этих команд нужно выполнять и при сабмите информации - прятать сообщения об успешном выполнии и ошибки. Это значит, что нужно будет отделить эти ноды другим классом.

А я могу сделать это одним запросом. И у кого понятнее логика работы?

Кстати, в приведенном примере у меня всего один запрос, вместо 4х строчек кода у вас. Не понимаю, как это может быть читабельнее? :)

Мышление событийное куда удобнее, чем мышление функциональное.

4 выборки? О_о Ох говноидея...

Не совсем. В вашем примере выборок не меньше. Ведь каждый элементик внутри тоже нужно выбрать.

Link to comment
Share on other sites

  • 0

В примере Jenek'a:

Выбираем #container, в нем выбираем div'ы, в них выбираем соотв. эдемент и чего-то делаем. То есть каждый раз пробегаемся по 10К элементов, создаем из них объект jQuery. Потом, раз мы ссылку на объект не запомнили, он уходит в сад. И так 4 раза.

У меня:

Выбираем #container, в нем выбираем div'ы, далее в каждом диве что-то делаем.

Link to comment
Share on other sites

  • 0
Работает .css() в разы медленнее простого навешивания.

А разве я забыл об этом написать?

4 выборки? О_о Ох говноидея...

Ну, конечно.

				$("#container > div").each(function(){
$(this).addClass('hideU');
$(this).children('span:first')[0].style.color = 'red';
$(this).children('span:last').addClass('green');
$(this).children('b:first').empty();
});

результат: 1393 : 1256 : 1215 : 1178 : 1232

				$('#container div u').addClass('hiddenBlock');
$('#container div span:first-child').css("color", "red");
$('#container div span:nth-child(2)').addClass('green');
$('#container div b').empty();

результат: 550 : 341 : 342 : 341 : 376 : 344

				$("#container div .setRed").css( "color", "red" );
$("#container div .addGreenClass").addClass('green');
$("#container div .clearThis").empty();
$("#container div .hideThis").addClass('hiddenBlock');

результат: 440 : 278 : 281 : 280 : 313 : 279

SC

результат: 951 : 318 : 322 : 316 : 313 : 313

Link to comment
Share on other sites

  • 0
Потому что это две неотъемлемые части.

Это не мой подход, я пожалуй останусь при своем.

Неотъемлемость есть только в случае совсем уж веб-приложений вроде gMail и то спорно.

А я могу сделать это одним запросом. И у кого понятнее логика работы?

Кстати, в приведенном примере у меня всего один запрос, вместо 4х строчек кода у вас. Не понимаю, как это может быть читабельнее?

А 4 функции, которые делают всю работу, почему не считаете?

И еще один пример из жизни.

Пример на SC в студию (чтобы видеть, что нужно сделать).

Не совсем. В вашем примере выборок не меньше. Ведь каждый элементик внутри тоже нужно выбрать.

True :) и как показывает пример старт выборки затратная операция, лучше 4 раза по 10к элементов, чем 1 раз 10к + 30к раз по одному.

Link to comment
Share on other sites

  • 0

Таки да, Вы правы. Почитал, как они там у себя выбирают, эти товарищи. Действительно, стартовать 4 раза менее затратно. Неочевидно...

И все же странно, что выборка

$('#container > div > u').addClass('hiddenBlock')

работает медленнее, нежели

$('#container div u').addClass('hiddenBlock')

Link to comment
Share on other sites

  • 0
А 4 функции, которые делают всю работу, почему не считаете?

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

Пример на SC в студию (чтобы видеть, что нужно сделать).

Да был в примерах.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy