There are two types of jquery plugin development:
One is the development of a class-level plug- in that adds a new global function to jquery, which is equivalent to adding a method to the jquery class itself. The global function of jquery is a function that belongs to the jquery namespace, and the other is the object-level plug-in development that adds a method to the jquery object.
The jquery plug-in development framework provided in this article combines both of these approaches, as shown in the code below:
//AMD Support(function(Factory) {//"Use strict"; if(typeofdefine = = = ' function ' &&define.amd) {//using AMD; Register as anon moduledefine ([' jquery '], factory); } Else { //no AMD; invoke directlyFactory ((typeof(jQuery)! = ' undefined ')?Jquery:window. Zepto); }}(function($) { "Use Strict"; varPluginns = ' InputBox ', pluginpfx= ' IP ', /*----------------------------------------VARS, CONSTANTS----------------------------------------*/totalinstances= 0,/*Plugin Instances Amount*/ /*----------------------------------------default options defaults parameter---------------------------------------- */Defaults={nparam:0 }, /*----------------------------------------METHODS Public Function----------------------------------------*/Methods={init:function(options) {varopts = $.extend (true, {}, defaults, options); /*Plugin Constructor*/ return This. each (function() { $ This= $( This); if(!$ This. Data (pluginpfx)) {/*prevent multiple instantiations*/ /*store options and create objects in jquery data*/ $ This. Data (pluginpfx, {idx:++totalinstances,/*Instance Index*/opt:opts/*Options*/});
var d = $this. Data (pluginpfx), o = d.opt; } }); }, Destroy:function(){ } }, /*----------------------------------------FUNCTIONS Private Function----------------------------------------*/_default=function(opts) {}; /*----------------------------------------PLUGIN SETUP----------------------------------------*/ /*Plugin Constructor Functions*/ /*Usage: $ (selector). Pluginns (); object Level*/$.fn[pluginns]=function(method) {if(Methods[method]) {returnMethods[method].apply ( This, Array.prototype.slice.call (arguments, 1)); } Else if(typeofmethod = = = "Object" | | !method) { returnMethods.init.apply ( This, arguments); } Else{$.error ("Method" + method + "does not exist!"); } }; /*usage: $.pluginns (); class-Level*/$[pluginns]=function(method) {if(Methods[method]) {returnMethods[method].apply ( This, Array.prototype.slice.call (arguments, 1)); } Else if(typeofmethod = = = "Object" | | !method) { returnMethods.init.apply ( This, arguments); } Else{$.error ("Method" + method + "does not exist!"); } }; /*Allow setting plugin default options. Usage: $.pluginns.defaults.nparam=5; To apply any changed default options on default selectors (below), use inside document ready FN*/$[pluginns].defaults=defaults;}));
The code above refers to the collation of the Open source project Jquery.datetimepicker plugin.
Continue to improve the update, please look forward to ...
Development of jquery Plugins