@return1 янв 2013 в 22:58

jQuery изнутри — парсинг html

6 мин

66K

JavaScript * jQuery * Веб-разработка *

Туториал

+80

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

@tsmar 1 янв 2013 в 23:08

Спасибо за ваши «ковыряния», оказывается работать с jQuery.fragments приходится достаточно часто, учту его специфику на будущее и поправлю критические места в существующем коде.

@return 1 янв 2013 в 23:15

Всегда пожалуйста, заходите к нам еще.

@eforce 1 янв 2013 в 23:18

$.each(users, function(id, name) {
    $('<span>', {
        'id': 'user' + id,
        'title': 'Пользователь ' + name,
        'text': name  // <- почему это сработает мы узнаем в другой части ;)
    } ).appendTo(document.body);
} );

По мне так код всё ещё не очень, обновлять DOM в цикле… боюсь, что от таких манипуляций с более или менее большой коллекцией можно подвесить браузер, рекомендуют группировать элементы, я даже иногда пачками вставляю элементы с таймером, чтобы оно красиво отображалось.

@return 1 янв 2013 в 23:21

Ну, тут я хотел образно показать как можно чуть улучшить код.
Лучше во фрагмент положить, конечно. Сейчас сделаем, спасибо.

@qmax 2 янв 2013 в 00:56

Скажите, как именно делать это пачками?

@return 2 янв 2013 в 01:04

document.createDocumentFragment(), туда надобавлять пачку, а потом сам фрагмент — добавить туда, куда хочется.

@radist2s 2 янв 2013 в 04:40

А jQuery-подобный синтаксис есть для этого? Просто я обычно все добавляю в обычный массив, а потом делаю .append()

@return 2 янв 2013 в 10:02

К сожалению, в jQuery нет специального метода для создания фрагмента, поэтому делаем так — $(document.createDocumentFragment()). А там уже с ним как с обычной нодой, куда можно добавлять туда элементы.

@monolithed 2 янв 2013 в 17:59

$(document.createDocumentFragment())

Может вы еще числа с помощью jQuery будете скалыдывать?

void function(i) {
  var fragment = document.createDocumentFragment();
  
  while (i--)
    fragment.appendChild(document.createElement('div'));
  
  document.body.appendChild(fragment);
}(10);

Ну и при большом количестве элементом ставим setInterval

@return 2 янв 2013 в 18:06

Спасибо!

@TheShock 3 янв 2013 в 22:59

Может вы еще числа с помощью jQuery будете скалыдывать?

Вот не согласен с вами. Из одной крайности в другую — или только JQuery или совсем без него. Если у нас всё приложение на этом фреймворке, то глупо не юзать интерфейс jQuery. Особенно, если мы весь код пишем не в одной функции и у нас есть абстракции, которые могут сами создавать объекты:

var fragment = document.createDocumentFragment();
  
while (i--)
    fragment.appendChild(generateDiv()); // <== returns JQuery object here
  
document.body.appendChild(fragment);

В данном случае я бы наоборот порекомендовал не отступать от библиотеки и возможно, даже, выделил бы создание интерфейса в отдельный метод:

jQuery.fragment = function () {
  return new jQuery(document.createDocumentFragment());
}

var $fragment = $.fragment();
  
while (i--)
    $fragment.append(generateDiv()); // <== returns any object here
  
$fragment.appendTo('body');

ps. спасибо автору за статью. Вкусно и интересно.

@return 3 янв 2013 в 23:09

Странно вообще что такого в API нет. Спасибо за отзыв :)
Долго думал на тему того, что же ответить harmony'сту и ответил «спасибо», спорить с такими людьми — неблагодарное дело.

@TheShock 3 янв 2013 в 23:13

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

@return 3 янв 2013 в 23:15

Я тоже противник, о чем уже писал, но топик — именно про jQuery

@eforce 2 янв 2013 в 08:34

Предположим у нас 1000 элементов и нам необходимо их отобразить (без разбиения на страницы). Если вставлять их в цикле, то это будет долго и не исключено, что браузер выдаст сообщение о зависшем скрипте. Используя фрагмент улучшит ситуацию, но вставка и отрисовка дерева элементов тоже будет заметна пользователю (это время зависит от браузера). Можно использовать setInterval, брать например по 50 элементов (предпочтительно тут использовать шаблонизатор ) и вставлять их в документ. Интервал может быть 50 мс. Эффект который будет достигнут — это почти моментальное отображение первых элементов, в дальнейшем мы будем наблюдать плавный рост полосы прокрутки.

@arXangel 2 янв 2013 в 06:48

Когда был еще молодым и зелёным, пробовал написать свой jQuery без поддержки старых браузеров, но как только начал углубляться в исходники, сразу же понял, что затея бессмысленная, уж слишком много нюансов уже учтено в ней. А знания получил хорошие. Спасибо вам, что проливаете свет на дизайн одной из самых популярных библиотек.

@return 2 янв 2013 в 09:58

Ну почему же бессмысленная идея :) Вот, к примеру, Atom.JS от TheShock, а вот Zepto.js.
Большинство из нюансов в библиотеке — от поддержки старых браузеров.

@arXangel 2 янв 2013 в 10:04

В этом я с вами конечно согласен, но видать это был не единственный нюанс, сейчас уже и не вспомнить. Как правило такие библиотеки не такие популярные как сама jQuery и рано или поздно в ней тоже откажутся (уже в версии 2.0) от старых браузеров.
Но зато я готовлю статью про интересности knockoutjs.com, может получится что-то полезное.

@satellight 3 янв 2013 в 11:18

Ух ты, как раз начал ковыряться в knockoutjs, на уровне туториала с оф. сайта. Ваша статья пришлась бы как нельзя кстати!

@arXangel 3 янв 2013 в 12:08

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

@RubaXa 2 янв 2013 в 10:09

Не стоит забывать о Qwery (+ Bonzo, Bean) которые быстрей и меньше по размеру.

@return 2 янв 2013 в 10:17

Не знал о таких, спасибо.

@alisey 2 янв 2013 в 08:21

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

Например, эта строка выдаст сообщение:

$('<div>').html('<script>alert(1)</script>');

Тогда как эта не выдаст:

$('<div>')[0].innerHTML = '<script>alert(1)</script>';

jQuery намеренно находит все скрипты, и выполняет их с помощью jQuery.globalEval. Довольно опасная и неочевидная штука, если вы хотите использовать фрагменты именно как отстойники.

@return 2 янв 2013 в 09:25

Важных деталей много и до этой мы тоже дойдем, всему свое время :) Спасибо.

@return 2 янв 2013 в 14:11

Следующая часть будет как раз посвещена html и прочим методам, работающим через domManip. Именно там отслеживаются скрипты (ну, еще при работе с ajax).