81700

Is There any Performance Difference in the Ways of Writing a jQuery Plugin?

Question:

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

I've seen it done a couple of ways:

<strong>1. Using $.extend():</strong>

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

<strong>2. Your own function:</strong>

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

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)

Answer1:

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; };

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).

Recommend

  • PHP SwiftMailer or PEAR Mail
  • Compressing “n”-time object member call
  • TimePickerDialog widget in landscape mode (PreferenceScreen)
  • How to browse android SDK sources in Android studio 2.0
  • Is it possible to ask GIT, don't show a file?
  • How to generate an asynchronous reset verilog always blocks with chisel
  • Is there a difference between initializing a variable in the default constructor or inline? [duplica
  • VORA Tables in Zeppelin and Spark shell
  • Does “internal” visibility modifier in Kotlin work yet?
  • Extracting individual digits from a float
  • SQL query to group by maximal sets of a column having inner consecutive distances below a threshold
  • Parenthesis() and SQL Query Performance
  • Vigenere cipher not working
  • iOS Localization Doesn't Work with More Than 63 Files
  • Unable to play media with vlc ocx
  • Divide a $1 by 3 and adjusting 1 cent
  • How to create two column output from a single column
  • why calling cd shell command through system() or execvp() from a child process won't work?
  • How can we prepend rows to a react native list-view?
  • Can I use AllJoyn Framework for Wifi Direct in iOS?
  • BeautifulSoup difference between findAll and findChildren
  • How can I tell a form not to dispose a particular control when it closes?
  • Jquery Knockout: ko.computed() vs classic function?
  • Hash Code in SQL Server?
  • Intel-64 and ia32 atomic operations acquire-release semantics and GCC 5+
  • Java color detection
  • Read text file that is not in the main package in a runnable jar
  • Silverlight DependencyProperty.SetCurrentValue Equivalent
  • SharedPreferences or SQLite Database?
  • zope_i18n_compile_mo_files doesn't work on a Zeo configuration
  • OOP Javascript - Is “get property” method necessary?
  • Scrapy recursive link crawler
  • Q promise. Difference between .when and .then
  • How do I change content of ComboFieldEditor?
  • QLineEdit password safety
  • Why winpcap requires both .lib and .dll to run?
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Is there any way to bind data to data.frame by some index?
  • How can i traverse a binary tree from right to left in java?