How to become an author
Search
Write a publication
Pull to refresh

Comments 30

Спасибо за ваши «ковыряния», оказывается работать с jQuery.fragments приходится достаточно часто, учту его специфику на будущее и поправлю критические места в существующем коде.
Total votes 1: ↑1 and ↓0+1
Всегда пожалуйста, заходите к нам еще.
Total votes 1: ↑1 and ↓0+1
$.each(users, function(id, name) {
    $('<span>', {
        'id': 'user' + id,
        'title': 'Пользователь ' + name,
        'text': name  // <- почему это сработает мы узнаем в другой части ;)
    } ).appendTo(document.body);
} );

По мне так код всё ещё не очень, обновлять DOM в цикле… боюсь, что от таких манипуляций с более или менее большой коллекцией можно подвесить браузер, рекомендуют группировать элементы, я даже иногда пачками вставляю элементы с таймером, чтобы оно красиво отображалось.
Total votes 4: ↑4 and ↓0+4
Ну, тут я хотел образно показать как можно чуть улучшить код.
Лучше во фрагмент положить, конечно. Сейчас сделаем, спасибо.
Total votes 2: ↑1 and ↓10
Скажите, как именно делать это пачками?
This comment wasn’t rated yet0
document.createDocumentFragment(), туда надобавлять пачку, а потом сам фрагмент — добавить туда, куда хочется.
Total votes 2: ↑2 and ↓0+2
А jQuery-подобный синтаксис есть для этого? Просто я обычно все добавляю в обычный массив, а потом делаю .append()
Total votes 1: ↑1 and ↓0+1
К сожалению, в jQuery нет специального метода для создания фрагмента, поэтому делаем так — $(document.createDocumentFragment()). А там уже с ним как с обычной нодой, куда можно добавлять туда элементы.
Total votes 1: ↑0 and ↓1-1
$(document.createDocumentFragment())

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

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

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

Total votes 2: ↑1 and ↓10
Может вы еще числа с помощью 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. спасибо автору за статью. Вкусно и интересно.
Total votes 1: ↑1 and ↓0+1
Странно вообще что такого в API нет. Спасибо за отзыв :)
Долго думал на тему того, что же ответить harmony'сту и ответил «спасибо», спорить с такими людьми — неблагодарное дело.
Total votes 1: ↑1 and ↓0+1
Ну лично я тоже противник пихания jQuery повсюду, но считаю, что он должен применяться там, где ему место.
Total votes 1: ↑1 and ↓0+1
Я тоже противник, о чем уже писал, но топик — именно про jQuery
Total votes 1: ↑1 and ↓0+1
Предположим у нас 1000 элементов и нам необходимо их отобразить (без разбиения на страницы). Если вставлять их в цикле, то это будет долго и не исключено, что браузер выдаст сообщение о зависшем скрипте. Используя фрагмент улучшит ситуацию, но вставка и отрисовка дерева элементов тоже будет заметна пользователю (это время зависит от браузера). Можно использовать setInterval, брать например по 50 элементов (предпочтительно тут использовать шаблонизатор ) и вставлять их в документ. Интервал может быть 50 мс. Эффект который будет достигнут — это почти моментальное отображение первых элементов, в дальнейшем мы будем наблюдать плавный рост полосы прокрутки.
Total votes 1: ↑1 and ↓0+1
Когда был еще молодым и зелёным, пробовал написать свой jQuery без поддержки старых браузеров, но как только начал углубляться в исходники, сразу же понял, что затея бессмысленная, уж слишком много нюансов уже учтено в ней. А знания получил хорошие. Спасибо вам, что проливаете свет на дизайн одной из самых популярных библиотек.
Total votes 2: ↑2 and ↓0+2
Ну почему же бессмысленная идея :) Вот, к примеру, Atom.JS от TheShock, а вот Zepto.js.
Большинство из нюансов в библиотеке — от поддержки старых браузеров.
Total votes 2: ↑2 and ↓0+2
В этом я с вами конечно согласен, но видать это был не единственный нюанс, сейчас уже и не вспомнить. Как правило такие библиотеки не такие популярные как сама jQuery и рано или поздно в ней тоже откажутся (уже в версии 2.0) от старых браузеров.
Но зато я готовлю статью про интересности knockoutjs.com, может получится что-то полезное.
This comment wasn’t rated yet0
Ух ты, как раз начал ковыряться в knockoutjs, на уровне туториала с оф. сайта. Ваша статья пришлась бы как нельзя кстати!
Total votes 1: ↑1 and ↓0+1
В таком случае, сейчас самое время, чтобы закончить и опубликовать её.
This comment wasn’t rated yet0
Не стоит забывать о Qwery (+ Bonzo, Bean) которые быстрей и меньше по размеру.
Total votes 1: ↑1 and ↓0+1
Не знал о таких, спасибо.
This comment wasn’t rated yet0
Важная деталь, добавлять скрипты в фрагмент-отстойник небезопасно.

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

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

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

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

jQuery намеренно находит все скрипты, и выполняет их с помощью jQuery.globalEval. Довольно опасная и неочевидная штука, если вы хотите использовать фрагменты именно как отстойники.
Total votes 6: ↑6 and ↓0+6
Важных деталей много и до этой мы тоже дойдем, всему свое время :) Спасибо.
This comment wasn’t rated yet0
Следующая часть будет как раз посвещена html и прочим методам, работающим через domManip. Именно там отслеживаются скрипты (ну, еще при работе с ajax).
This comment wasn’t rated yet0
Спасибо, нашел интересные моменты.
Исправьте в своих статьях «И так» на «Итак», пожалуйста.
Total votes 1: ↑1 and ↓0+1
Заходите к нам еще, очень рад тем, кто читает!
Поправлю, спасибо.
Total votes 2: ↑1 and ↓10
Мы — это все хабрапользователи, которым интересно узнать и обсудить, что же происходит внутри jQuery.
Total votes 2: ↑1 and ↓10
Во, вот это классно, люблю такие вещи почитать
P.S. Иногда даже знаешь что-то, понимаешь, но тааааак лень -_-
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr