Most of the companies wish to create great experience for their prospective end users but a few of them are willing to make changes required to deliver on that promise. Now, over the recent years plugin development has evolved to a great extent. Developers have no longer one way to write plugins, but many. However, certain patterns might work better for a particular problem or component than others. For example, some professionals may use jQuery UI widget factory as it is great for complex, flexible UI components while some may not. Some might like to structure their plugins more like modules while some might want their plugins to harness the power of prototypal inheritance.
A jQuery plugin is an extension to jQuery that encapsulates an ability or visual behavior. By doing this the plugin can be used later and in many different parts in a web application. The following post explains a few basics of jQuery plugin and which jQuery plugin pattern should you use?
Its Types
Plugins that works on element- A plugin that converts <select> element to an autocomplete. Such plugin is working on the select element. This kind of plugin is actually said to be an extension to the jQuery prototype (or $.fn):
Invocation of such plugins looks like:
$(‘#my-elem’).myPlugin();
Plugins that doesn’t work on element- Utilities of jQuery can be considered as a great example for such plugin. They are actually functions that located in the jQuery object (or $):
Invocation of such plugins looks like:
$.myPlugin();
Both the types can receive data as input, make DOM manipulations, make calculations, enables the user to interact them and much more.
Basics of jQuery plugin
Limit the Scope
While writing for a plugin, most of the jQuery developers suggest to limit the scope in order to prevent access to private variables and functions. Moreover, scopes may even help in preventing naming conflicts. Thus, in order to limit the scope of jQuery plugin development, wrap it with a function and invoke it. For e.g.
Plugin inside IIFE
(function() {
$.fn.myPlugin = function() {
… //plugin content
}
})();
The Dollar Sign
Did you know that the Dollar sign ($) is a synonym to jQuery library? Yes! The symbol defines jQuery and perhaps it is shorter and looks better than the word itself. Due to this many other libraries make use with the dollar sign as a synonym. Before using the plugin, a software developer needs to be sure that the plugin doesn’t collide with other libraries. Hence, passing jQuery as a parameter to the IIFE is a best practice.
Passing jQuery as a parameter to the IIFE
(function($) {
$.fn.myPlugin = function() { // Here we sure $ is jQuery
… // Plugin content
}
})(jQuery);
Most of the jQuery plugin development companies believe that the plugins feature a set of defined rules. And maybe this leads to the incredible diversity in terms of use and how these plugins are implemented.
Down below listed are some of the most popular patterns used by developers across the globe.
- A lightweight start- It is perfect as a generic template for beginners and above, uses a basic default object and a simple constructor for assigning the element to work with and extending options with defaults and a lightweight wrapper around just to avoid issues with multiple instantiations
- Widget factory- Mostly used to build complex, stateful plugins based on object-oriented principles. The majority of jQuery UI heavily relies on the widget factory as a base for components and this template covers almost all supported default methods such as triggering events.
- Widget factory + RequireJS- A very basic widget templating plugin that incorporates wrapping jQuery UI widgets inside RequireJS compatible modules.
- Widget factory for jQuery Mobile- The Plugin is most probably used to demonstrate best practices for building mobile widgets. Besides, it includes many of same concepts such as the widget factory boilerplate.
- Namespaced pattern- The jQuery plugin Pattern is mostly used to avoid collisions and improve code organization when working with components under another namespace.
- Best options- Globally/per-call overridable options for greater customization.
- Custom events- Whether publish or subscribe, the plugin is required for better application decoupling. It makes utmost use of the widget factory but could be applied to the generic template.
- Extended pattern- As the name implies, the plugin offers an extended range of options.
- Non Widget-factory widget- In if the jQuery developers wish to stay away from the widget factory, the plugin offers great coverage for creation, instantiation, and other best practices.
- Prototypal inheritance pattern- The plugin uses a bridge to generate a plugin from an object (literal). Moreover, it is quite useful for code organization, readability, functionality heavily based on DOM element selection.
The above mentioned are some of the most popular and time-saving design patterns and practices that can be employed to enhance plugin development process. Besides, while selecting one always be practical. Don’t use a pattern for the sake of it; rather spend some quality time in understanding the underlying structure.
Keep watching the space to know more regarding jQuery development company – eTatvaSoft.
