{"id":1111,"date":"2014-10-20T15:00:27","date_gmt":"2014-10-20T12:00:27","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=1111"},"modified":"2014-11-07T17:07:16","modified_gmt":"2014-11-07T15:07:16","slug":"things-i-learned-creating-a-jquery-plugin-part-ii","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/things-i-learned-creating-a-jquery-plugin-part-ii\/","title":{"rendered":"Things I learned creating a jQuery Plugin (Part II)"},"content":{"rendered":"

This post is the continuation of the series\u00a0Things I learned creating a jQuery Plugin<\/a>.<\/p>\n

In the first part we have seen how the structure of a jQuery plugin must be, the plugin entry point (so called wrapper function) and how we can control the\u00a0behavior\u00a0of a method as a getter or setter.<\/p>\n

Define default options<\/h2>\n

Your plugin more probably will accept different set of options to allow some configuration. For these reason it is important to define a set of default options which will be applied in cases where no options are specified by the user. Place it within the jQuery wrapper function is a good practice:<\/p>\n

\r\n\/\/\r\n\/\/ Default options\r\n\/\/\r\n$.fn[pluginName].defaults = {\r\n    opt_A: ""\r\n}; <\/pre>\n
Encapsulate your plugin code<\/h2>\n
A good practice is to encapsulate the logic of our plugin within a function, this way our plugin\u2019s entry point function can easily initialize or call the right method.<\/p>\n
For example, in a really simple wrapper function, that simply initializes a plugin\u2019s instance on each selected element, we could write something like:<\/p>\n
\r\n$.fn[pluginName] = function(options) {\r\n    return this.each(function() {\r\n        new Plugin(this, options);\r\n    });\r\n} <\/pre>\n
The plugin constructor<\/h3>\n
The main part of your plugin is the constructor function. Usually this function is responsible to initialize the plugin, store a reference to the selected element or merge the passed options with the default ones:<\/p>\n
\r\nfunction Plugin(element, options) {\r\n    \/\/ Store references to the selected element\r\n    this.el = element;\r\n    this.$el = $(element);\r\n\r\n    \/\/ Merge passes options with defaults\r\n    this.options = $.extend({}, $.fn[pluginName].defaults, options);\r\n\r\n    \/\/ ...other code here...\r\n\r\n    \/\/ Initialize the plugin instance\r\n    this.init();\r\n} <\/pre>\n
Prototype your plugin<\/h3>\n
Once the Plugin<\/code> function is defined we can modify its prototype adding all the desired methods we want for our plugin.<\/p>\n
There are a couple of methods are a good practice to implement:<\/p>\n