Development of jQuery plug-ins and Development of jQuery plug-ins

Development of jQuery plug-ins and Development of jQuery plug-ins

There are two types of jQuery plug-in development:

One isClass-level plug-in developmentThat is, adding a new global function to jQuery is equivalent to adding a method to the jQuery class. JQuery's global functions belong to the jQuery namespace. The other isObject-level plug-in developmentTo add a method to the jQuery object.

The jQuery plug-in development framework provided in this article combines the above two methods. The Code is as follows:

// AMD support (function (factory) {// "use strict"; if (typeof define = 'function' & define. amd) {// using AMD; register as anon module define (['jquery '], factory);} else {// no AMD; invoke directly factory (typeof (jQuery )! = 'Undefined ')? JQuery: window. zepto) ;}( function ($) {"use strict"; var pluginNS = 'inputbox', pluginPfx = 'IP',/* -------------------------------------------- VARS, CONSTANTS parameters */totalInstances = 0,/* plugin instances amount * // * ------------------------------------------ default options default parameter limit */defaults = {nParam: 0 },/*-------- ------------------------------ METHODS public function ------------------------------------------ */methods = {init: function (options) {var opts = $. 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 handler */_ default = function (opts ){}; /* ---------------------------------------- plugin setup ------------------------------------------ * // * plugin constructor functions * // * usage: $ (selector ). pluginNS (); object level */$. fn [pluginNS] = Function (method) {if (methods [method]) {return methods [method]. apply (this, Array. prototype. slice. call (arguments, 1);} else if (typeof method = "object" |! Method) {return methods. init. apply (this, arguments);} else {$. error ("Method" + method + "does not exist! ") ;}};/* Usage: $. pluginNS (); Class level */$ [pluginNS] = function (method) {if (methods [method]) {return methods [method]. apply (this, Array. prototype. slice. call (arguments, 1);} else if (typeof method = "object" |! Method) {return methods. 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 ;}));

For the above Code, see the jQuery. datetimepicker plug-in of the open-source project.

 

Continuously improving and updating. Please wait...