How to add custom jQuery functions

In this post you will learn how to add your own custom functions to jQuery. In essence, this is the same as creating jQuery plugin. Recently I wrote a template on how to extend jQuery and how to create your own functions. Since then I came across even smaller code snippet on how to add your own custom functions, in other words how to create plugins for jQuery.

So without further ado:

$.fn.myFunction = function() { 
  return $(this).addClass('changed');
}

// Now, you can use it like this
$('.changePlease').myFunction();

Even though, it is a shorter version, you are better off using the correct way. The correct way is to wrap your custom function code into the closure so that it does not interfere with surrounding code and does not cause issues with redefining existing variables.

Defining custom jQuery functions

(function($){

  $.fn.extend({
    myFunction: function() {
      return $(this).addClass('changed');
    }
  });

})(jQuery);

// OR equivalent

(function($){

  $.fn.myFunction = function() {
    return $(this).addClass('changed');
  }

})(jQuery);

By using the above recommended methods of creating custom jQuery functions, we are making sure that:

1. We do not assume that jQuery is not in jQuery.noConflict() mode. So our code does not require that $ refers to jQuery.
2. We can define custom variables without worrying about polluting global namespace. Since our code is defined in the closure, our variables will not overwrite global variables. Overwriting global variables may cause unexplainable unit test failures and unidentifiable bugs.

The two methods are technically the same. The $.fn.extend() method is basically merging our passed object with itself. Whereas, in the $.fn.custom_method = case we are explicitly defining property on the $.fn object. So in the essence, jQuery allows adding custom function by defining properties on $.fn object.

This means that we are not limited to custom functions, but also can define custom variables as well. It can be used as a global property holder. This properties are accessible from anywhere on in your code. So plugins can use it to exchange data between themselves.

Defining custom jQuery variables/properties

(function($){

  $.fn.extend({
    my_data: {
      version: "0.1",
      author:  "Author Name",
      url:     "http://www.example.com"
    }
  });

})(jQuery);

// OR equivalent

(function($){

  $.fn.my_data = {
    version: "0.1",
    author:  "Author Name",
    url:     "http://www.example.com"
  }

})(jQuery);

Now you can accesses it from anywhere where jQuery is accessible. That includes other jQuery plugins, custom functions and custom code.

console.log( $().my_data );

// Outputs
{ version: "0.1", author: "Author Name", url: "http://www.example.com" }

// Usage
document.location = $().my_data.url;

We can define new properties on $.fn, but it is better to define them on $ itself. Having said that, it is better namespace your data like it is showen in the example belove.

(function($){

  $.myApp = {
    version: "0.1",
    author:  "Author Name",
    url:     "http://www.example.com",
  }

})(jQuery);

// Usage
$.myApp.author;  // "Author Name"