How to create a basic plugin by jQuery

jQuery is a quite small yet fast JavaScript library that consists of a number of extensible and durable features, and commonly used as a single method that performs a series of operations on one selection.

For example, its easy-to-use API is consistent with all browsers and can easily enable HTML animation, DOM manipulation, and event handling. Thus, bringing a more effortless client-side scripting for software programmers. In this article, let’s see how to write a plugin with jQuery.

How jQuery works: jQuery Object Methods

Before starting to write your own plugins, you must pretty understand how jQuery works first. Take a look at this code:

This is a basic jQuery code, but do you know what’s happening behind the scenes? When you use the $ function to select elements, it gives back a jQuery object which contains all of the methods you’ve been using (.css(), .click(), etc.) and every element that fits your selector. These methods come from the $.fn object.

Chaining

To help your plugin survive in the real world, there are a couple of things you need to do for it. When you link 4 or 5 actions onto one selector, you’re coming to the chaining feature of jQuery. This feature is done by having all jQuery object methods return the original jQuery object again (exceptions: .width() only returns the width of the selected element, not chainable). Making your plugin method chainable just takes one line of code:

Protecting the $ Alias and Adding Scope

Since the $ variable is very popular among JavaScript libraries, a conflict in the use of $ may arise when more than one jQuery library is required. The solution to this problem is you must place the code inside the expression of the immediately invoked function. This is carried out by the passing of jQuery and then naming its parameter $.

Adding Private Methods and Variables

After the alias ($) matter is resolved, move on to the next step: adding private methods or variables. In JavaScript (this case is jQuery), functions contain several variables and other functions that can be mainly accessed from inside the function, thus making the elements private. For the best way to access private variables and methods, you must use Immediately invoked function expressions.

Remember adding a private variable and enabling its use is only possible by using the Immediately Invoked Function:

These private methods can solely be called from within the scope of the function and only other private methods or public methods have the authority to call them. This is also for accessing the private variables.

Adding Public Methods

Public methods can be accomplished by nearly the same process as what you just did with private methods. There’s just one difference between these 2, the execution of the method. The method becomes public when it is supplied with a ‘this’ operator. The purpose of adding such public methods could be either to perform a function or to access the public variables and methods from outside the scope of the function.

Accepting Options for Plugin Customization

In some cases, your plugins turn more complex as you continue to add to them. Hence, it is a smart idea to make your plugin be capable of accepting some options and make them customizable. The easiest way to do this, especially when there are a lot of options, is with an object literal.

Putting it All Together

Combining all techniques we’ve discussed, the result is the following small plugin as below:

As you can see, the syntax ‘each()’ is used to loop through a collection of elements. Also, the return value for this method is the ‘this.append()’ which accepts the callback. We will be able to see what element is being appended to in the collection whereupon it returns.

Hope our simple guidance for coding with JavaScript and this one – jQuery could help you be quite well-prepared and get ready to start the work by yourself. Now, let’s go code your own plugin, and don’t hesitate to share any of your confusion with Designveloper right down here in the comment box.