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

[tsmar]

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

[return]

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

[eforce]

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

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

[return]

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

[qmax]

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

[return]

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

[radist2s]

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

[return]

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

[monolithed]

$(document.createDocumentFragment())

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

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

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

[return]

Спасибо!

[TheShock]

Может вы еще числа с помощью 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]

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

[TheShock]

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

[return]

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

[eforce]

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

[arXangel]

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

[return]

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

[arXangel]

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

[satellight]

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

[arXangel]

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

[RubaXa]

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

[return]

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

[alisey]

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

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

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

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

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

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

[return]

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

[return]

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

[bruha]

Спасибо, нашел интересные моменты.
Исправьте в своих статьях «И так» на «Итак», пожалуйста.

[return]

Заходите к нам еще, очень рад тем, кто читает!
Поправлю, спасибо.

[RubaXa]

Извиняюсь за вопрос, но «нам» это кто?

[return]

Мы — это все хабрапользователи, которым интересно узнать и обсудить, что же происходит внутри jQuery.

[nDiviD]

Во, вот это классно, люблю такие вещи почитать
P.S. Иногда даже знаешь что-то, понимаешь, но тааааак лень -_-