Development of jquery Plugins

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