понедельник, 12 марта 2012 г.

jQuery. Быстрый итератор quickEach

Если вам нужно часто работать с итераторами each в jQuery, и вам приходиться часто внутри него пользоваться $(this), то есть смысл немного оптимизировать код.

Пример: необходимо перебрать список li и что-то сделать с каждым элементом списка
var list = $("ul li");
list.each(function() {
 var el = $(this); // получаем объект jQuery из объекта DOM
 el.....  // Какое-то действие с объектом
});

Следует помнить, что всегда нужно использовать групповые функции над списками, перебирать по одному не оптимально. Но представим себе, что задача стоит так, что без перебора списка поэлементно ее нельзя решить. Тогда узким местом такого алгоритма будет операция получения jQuery объекта на основе контекста this. В методе $.each(), this не является объектом, jQuery - он указывает на текущий элемент DOM. Потому, его надо привести к объекту jQuery, а это есть ресурсоемкая операция.

Можно использовать оптимизированный итератор $.quickEach() описанный ниже, который сразу возвращает в this объект jQuery и его не нужно получать в цикле для каждого элемента DOM которые мы итерируем.

/**
 *  jQuery quick Each
 *
 *  Example:
 *  a.quickEach(function() {
 *      this; // jQuery object
 *  });
 */
jQuery.fn.quickEach = (function() {
    var jq = jQuery([1]);
    return function(c) {
        var i = -1, el, len = this.length;
        try {
            while (++i < len && (el = jq[0] = this[i]) && c.call(jq, i, el) !== false);
        } catch (e) {
            delete jq[0];
            throw e;
        }
        delete jq[0];
        return this;
    };
 }());
Пример использования:
// Стандартный итератор
list.each(function() {
 var el = $(this);
});

// Оптимизированный итератор:
list.quickEach(function() {
 var el = this; // jQuery object
});
Оригинальная статья находиться по адресу http://jsperf.com/jquery-each-vs-quickeach, где также можно ознакомиться с результатами замеров производительности обоих методов.

Комментариев нет:

Отправить комментарий