编写jQuery插件的方式上是否存在性能差异?

问题描述

我很好奇，编写jQuery插件的方式(性能)有什么不同?

I'm curious, what are the (performance) differences in the ways that you can write a jQuery plugin, if any?

我看过它有两种方法:

1.使用$.extend():

1. Using $.extend():

(function($){
  $.fn.extend({
    newPlugin: function(){
      return this.each(function(){

      });
    }
  });
})(jQuery);

2.您自己的功能:

(function($){
  $.fn.newPlugin = function(){
      return this.each(function(){

      });
  }
})(jQuery);

恕我直言，第二种方法是更干净，更容易使用，但是用$.extend()编写它似乎有一些优势?还是我对此考虑过度，没有明显的区别，这只是个人喜好问题?

IMHO the second way is a bit cleaner and easier to work with, but seems like there could be some advantage to writing it with $.extend()? Or am I over-thinking this, there is no discernible difference and it's just a matter of personal preference?

(我原以为以前会问过这个问题，但我找不到它-如果在那儿，请引导我去找它)

(I would have thought this would have been asked before, but I can't find it -- if it's out there, please direct me to it)

推荐答案

好吧，请考虑当您执行$.extend时，您正在调用此方法:

well, consider that when you do $.extend you're calling this method:

jQuery.extend = jQuery.fn.extend = function() {
    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options, name, src, copy;

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
        target = {};
    }

    // extend jQuery itself if only one argument is passed
    if ( length === i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging object literal values or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || jQuery.isArray(copy) ) ) {
                    var clone = src && ( jQuery.isPlainObject(src) || jQuery.isArray(src) ) ? src
                        : jQuery.isArray(copy) ? [] : {};

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

但是，当您调用$.fn.newPlugin时，您只是在jQuery的原型对象上附加(或可能覆盖)数据，这几乎与$.fn.extend所做的完全相同...

but when you're calling $.fn.newPlugin, you're simply appending (or possibly overwriting) data on jQuery's prototype object, which is pretty much the exact same thing that $.fn.extend is doing anyways...

似乎很不言自明，哪种方法的开销较小(后者).

seems pretty self-explanatory which method has less overhead (the latter).

这篇关于编写jQuery插件的方式上是否存在性能差异?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！