什么是jQuery $ .fly插件用于?

时间:2011-06-01 08:59:14

标签: javascript jquery performance jquery-plugins

我偶然发现了jQuery.fly() - flyweight pattern性能基准测试,在查看测试代码和the plugin code itself (also see below)之后,我无法确定它的用途是什么?我搜索过互联网,找不到有关插件本身的任何有用信息。

这是一种更有效的循环/迭代数组的方式,而不是在$(this)中使用.each吗?

  • 使用jQuery对象

    进行迭代
    a.each(function() {
        $(this);
    });
    
  • 使用jQuery.fly()

    进行迭代
    a.each(function() {
        $.fly(this);
    });
    
  • 在Firefox 4.0.1中快2倍
  • 在Chrome 12中快3倍

.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 个答案:

答案 0 :(得分:11)

免责声明:每次拨打fly时,您都会收到一个全局$.fly的实例,该实例会更改状态。如果将它存储在变量中,它将会中断。这是微观优化,除非进行适当的基准测试,否则不应使用。

优化:您可以证明使用$.fly的任何情况,因为使用$是一个瓶颈,然后正确的解决方案是不使用jQuery并在“vanilla JavaScript”

这个想法是调用jQuery很贵。为避免这种情况,您只需调用$()一次,然后将DOM节点注入其中。

这基本上有一个jQuery的全局实例,并交换DOM节点所在的内容。

Flyweight Pattern

  

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.contextthis.selector因此,使用该代码的任何代码或任何可通过使用这些代码进行优化的内部jQuery代码都未进行优化。

您需要彻底的基准测试和仔细测试,以便能够得出结论,不设置那些值得优化,并且共享一个jQuery对象不会导致代码中的细微错误/副作用。