Getting started with jQuery plug-in development

This article describes in detail how to use the jQuery plug-in for development, what to pay attention to, what preparations are available, and how to understand the basic jquery syntax. Preface

JQuery plugin development includes two types:

1. Add a static method to jQuery

2. Add a method to the jQuery prototype

Add a static method to jQuery

1. Add a new global function directly

jQuery.foo = function() {alert('This is a test. This is only a test.');}

2. Use jQuery. extend (object)

jQuery.extend({foo: function() {alert('This is a test. This is only a test.');},bar: function(param) {alert('This function takes a parameter, which is "' + param +'".');}});

You can call some global configuration plug-ins in the plug-in so that you can directly reference the plug-in javascript without calling

Add a method to the jQuery prototype

This is the most common method in Plug-in development.

Simplest form

(function($){           $.fn.pluginName = function() {              // code        };     })(jQuery);

Context

In the immediate scope of the plug-in function, the keyword "this" points to the jQuery object that calls the plug-in and does not need to be wrapped in $.

(Function ($) {$. fn. pluginName = function () {// There is no need to write $ (this), because "this" is the jQuery object};}) (jQuery );

Keep chain call

To maintain chained calls, the plug-in should return this.

Set default parameters and expose them

(function($){    $.fn.pluginName = function(options) {            var opts = $.extend({}, $.fn.hilight.defaults, options);          };      $.fn.pluginName.defaults = {            foo: 'bar'       };                      })(jQuery);

In this way, you can use both passing parameters and modifying $. fn. pluginName. defaults to modify the default parameters.

Expose some public functions

(function($){    $.fn.pluginName = function(options) {            var opts = $.extend({}, $.fn.pluginName.defaults, options);          };      $.fn.pluginName.defaults = {            foo: 'bar'       };      $.fn.pluginName.foo = function() {            return 'bar';        };                  })(jQuery);

In this way, you can call a public function or modify it.

Safer closure syntax

;(function($,window,document,undefined){    $.fn.pluginName = function() {              // code        };})(jQuery,window,document);

";" Is added to prevent errors caused by the previous Code ";". In addition, window and document are used to ensure that system variables such as window have a local reference in the plug-in, it can increase the access speed and compress these variables internally. undefined aims to prevent others from mistakenly modifying undefined and causing plug-in bugs.

More

Blog from netizens

(Function () {var Plugin, privateMethod; // Private method of the plug-in/*** here is a self-running Singleton mode. **/Plugin = (function () {/*** the instantiation part of the plug-in. The Code called during initialization can be placed here */function Plugin (element, options) {// merge the default parameters and user-defined parameters of the plug-in into a new obj. this. settings = $. extend ({}, $. fn. plugin. defaults, options); // assign the dom jquery object to the plug-in for later calling this. $ element = $ (element);}/*** the public method of the plug-in. It is equivalent to an interface function and is used to call */Plugin externally. prototype. doSomething = function () {/*** Method Content */}; return Plugin;}) ();/*** private method of the plug-in */privateMethod = funct Ion () {};/*** the key here is * defining a plug-in */$. fn. plugin = function (options) {var instance; instance = this. data ('plugin');/*** determines whether the plug-in has been instantiated. if it has already been instantiated, the instantiated object */if (! Instance) {return this. each (function () {// cache the instantiated plug-in the dom structure (in memory) return $ (this ). data ('plugin', new plugin (this, options) ;}) ;}if (options = true) return instance;/*** Elegance: if the plug-in parameter is a string, the string method of the plug-in is called. * For example, $ ('# id '). plugin ('dosomething ') actually calls $ (' # id ). plugin. doSomething (); * doSomething is the interface just defined. * This method is common in juqery ui plug-ins. */If ($. type (options) = 'string') instance [options] (); return this ;};/*** default value of the plug-in */$. fn. plugin. defaults = {property1: 'value', property2: 'value'};/*** Elegance: instantiate the plug-in using data-xxx. * In this way, you do not need to display the call on the page. */$ (Function () {return new Plugin ($ ('[data-plugin]') ;}). call (this );

The above is a detailed description of jQuery plug-in development. For more information, see other related articles in the first PHP community!