Комментарии 30
Спасибо за ваши «ковыряния», оказывается работать с jQuery.fragments приходится достаточно часто, учту его специфику на будущее и поправлю критические места в существующем коде.
+1
$.each(users, function(id, name) {
$('<span>', {
'id': 'user' + id,
'title': 'Пользователь ' + name,
'text': name // <- почему это сработает мы узнаем в другой части ;)
} ).appendTo(document.body);
} );
По мне так код всё ещё не очень, обновлять DOM в цикле… боюсь, что от таких манипуляций с более или менее большой коллекцией можно подвесить браузер, рекомендуют группировать элементы, я даже иногда пачками вставляю элементы с таймером, чтобы оно красиво отображалось.
+4
Ну, тут я хотел образно показать как можно чуть улучшить код.
Лучше во фрагмент положить, конечно. Сейчас сделаем, спасибо.
Лучше во фрагмент положить, конечно. Сейчас сделаем, спасибо.
0
Скажите, как именно делать это пачками?
0
document.createDocumentFragment(), туда надобавлять пачку, а потом сам фрагмент — добавить туда, куда хочется.
+2
А jQuery-подобный синтаксис есть для этого? Просто я обычно все добавляю в обычный массив, а потом делаю .append()
+1
К сожалению, в jQuery нет специального метода для создания фрагмента, поэтому делаем так —
$(document.createDocumentFragment())
. А там уже с ним как с обычной нодой, куда можно добавлять туда элементы.-1
$(document.createDocumentFragment())
Может вы еще числа с помощью jQuery будете скалыдывать?
void function(i) {
var fragment = document.createDocumentFragment();
while (i--)
fragment.appendChild(document.createElement('div'));
document.body.appendChild(fragment);
}(10);
Ну и при большом количестве элементом ставим setInterval
0
Спасибо!
0
Может вы еще числа с помощью 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. спасибо автору за статью. Вкусно и интересно.
+1
Предположим у нас 1000 элементов и нам необходимо их отобразить (без разбиения на страницы). Если вставлять их в цикле, то это будет долго и не исключено, что браузер выдаст сообщение о зависшем скрипте. Используя фрагмент улучшит ситуацию, но вставка и отрисовка дерева элементов тоже будет заметна пользователю (это время зависит от браузера). Можно использовать setInterval, брать например по 50 элементов (предпочтительно тут использовать шаблонизатор ) и вставлять их в документ. Интервал может быть 50 мс. Эффект который будет достигнут — это почти моментальное отображение первых элементов, в дальнейшем мы будем наблюдать плавный рост полосы прокрутки.
+1
Когда был еще молодым и зелёным, пробовал написать свой jQuery без поддержки старых браузеров, но как только начал углубляться в исходники, сразу же понял, что затея бессмысленная, уж слишком много нюансов уже учтено в ней. А знания получил хорошие. Спасибо вам, что проливаете свет на дизайн одной из самых популярных библиотек.
+2
В этом я с вами конечно согласен, но видать это был не единственный нюанс, сейчас уже и не вспомнить. Как правило такие библиотеки не такие популярные как сама jQuery и рано или поздно в ней тоже откажутся (уже в версии 2.0) от старых браузеров.
Но зато я готовлю статью про интересности knockoutjs.com, может получится что-то полезное.
Но зато я готовлю статью про интересности knockoutjs.com, может получится что-то полезное.
0
Важная деталь, добавлять скрипты в фрагмент-отстойник небезопасно.
Например, эта строка выдаст сообщение:
Тогда как эта не выдаст:
jQuery намеренно находит все скрипты, и выполняет их с помощью jQuery.globalEval. Довольно опасная и неочевидная штука, если вы хотите использовать фрагменты именно как отстойники.
Например, эта строка выдаст сообщение:
$('<div>').html('<script>alert(1)</script>');
Тогда как эта не выдаст:
$('<div>')[0].innerHTML = '<script>alert(1)</script>';
jQuery намеренно находит все скрипты, и выполняет их с помощью jQuery.globalEval. Довольно опасная и неочевидная штука, если вы хотите использовать фрагменты именно как отстойники.
+6
Спасибо, нашел интересные моменты.
Исправьте в своих статьях «И так» на «Итак», пожалуйста.
Исправьте в своих статьях «И так» на «Итак», пожалуйста.
+1
Во, вот это классно, люблю такие вещи почитать
P.S. Иногда даже знаешь что-то, понимаешь, но тааааак лень -_-
P.S. Иногда даже знаешь что-то, понимаешь, но тааааак лень -_-
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
jQuery изнутри — парсинг html