Question

I’m writing a jQuery plugin, and I was wondering how to make sure that I don’t ever overwrite a future jQuery native method.

For example, my plugin is called Foo and usage is $('selector').foo().

jQuery 2.6 has noticed the popularity of Foo and decided that it will include it in the core package. It too is used via $('selector').foo().

I don’t want my Foo to overwrite jQuery’s native Foo (or else clash).

This is what I came up with…

(function($) {

  // If jQuery adds this method, we don't want to overwrite it
  if (typeof $.foo === 'function') {
    return;
  };

  $.fn.foo = function() {
     // Foo
  };  

})(jQuery);

Would this be the best way to do it?

Answer 1

You can skip the if statements and build definition-checking into your function declaration.

(function($){

  $.fn.foo = $.fn.foo || function () {
    // only used if $.fn.foo is undefined
  }

})(jQuery)