Для чего используется плагин jQuery $ .fly? - PullRequest
9 голосов
/ 01 июня 2011

Я наткнулся на jQuery.fly () - эталонный образец производительности тест производительности и после просмотра кода тестирования и самого кода плагина (также см. Ниже) , я не могу понять, какая польза от этого? Я искал в интернете и не могу найти никакой полезной информации о самом плагине.

Является ли это более эффективным способом циклического повторения массива, чем использование $(this) в .each?

  • Итерация с использованием объекта jQuery

    a.each(function() {
        $(this);
    });
    
  • Итерация с использованием jQuery.fly ()

    a.each(function() {
        $.fly(this);
    });
    
  • почти в 2 раза быстрее в Firefox 4.0.1
  • почти в 3 раза быстрее в Chrome 12

.fly

(function($) {

    var fly  = $(),
        push = Array.prototype.push;

    $.fly = function(elem) {
        var len = fly.length,
            i;
        if ($.isArray(elem)) {
            fly.length  = 0;
            i           = push.apply(fly, elem);
        } else {
            if (elem instanceof $) {
                return elem;
            }
            if (typeof elem == "string") {
                throw "use jQuery()";
            }
            fly[0]     = elem;
            fly.length = i = 1;
        }
        // remove orphaned references
        while (i<len) {
            delete fly[i++];
        }

        return fly;
    };

})(jQuery);

1 Ответ

11 голосов
/ 01 июня 2011

Отказ от ответственности: Вы получаете экземпляр глобального fly, который меняет состояние каждый раз, когда вы вызываете $.fly.Если вы сохраните его в переменной, он сломается.Это микрооптимизация, и ее нельзя использовать, если не будет проведен соответствующий тест.

Оптимизация: Любая ситуация, в которой вы можете оправдать использование $.fly, поскольку использование $ является узким местом, тогда правильное решениезаключается в том, чтобы не использовать jQuery и не выполнять манипуляции с DOM в "vanilla JavaScript"

Идея состоит в том, что вызов jQuery стоит дорого.Чтобы избежать этого, вы вызываете $() один раз, а затем внедряете в него DOM-узлы.

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

Pattern Flyweight

Flyweight - это объект, который сводит к минимуму использование памяти путем совместного использования как можно большего количества данных с другими подобными объектами

Это достигается за счет наличия только одного объекта jQuery.

    var len = fly.length,
        i;
    // if elem is array push all dom nodes into fly.
    if ($.isArray(elem)) {
        // empties fly
        fly.length  = 0;
        i           = push.apply(fly, elem);
    } else {
        // if already $ then return it
        if (elem instanceof $) {
            return elem;
        }
        // dont use selectors
        if (typeof elem == "string") {
            throw "use jQuery()";
        }
        // set dom node.
        fly[0]     = elem;
        fly.length = i = 1;
    }
    // remove any elements further in the array. 
    while (i<len) {
        delete fly[i++];
    }

    return fly;

Дальнейший отказ от ответственности: Этот код не устанавливает this.context, this.selector, поэтому любой код, который использует этот или любой другойвнутренний код jQuery, который можно оптимизировать, используя его, не оптимизирован.

Вам необходимо провести тщательный бенчмаркинг и тщательное тестирование, чтобы прийти к выводу, что не установка этих параметров заслуживает оптимизации и что совместное использование одного объекта jQuery не вызывает незначительных ошибок / побочных эффектов в вашем коде.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...