This article is quoted from Iteye, is the old post ~ ~ Foreign Excellent article also has, today to see this man's bar, writing is in place ah, easy to understand.
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 following is a detailed description of the development of the two functions.
1, class-level plug-in development
The most straightforward understanding of plug-in development at the class level is to add a class method to the jquery class, which can be understood as adding a static method. The typical example is $. The AJAX () function, which defines the function in the jquery namespace. Plug-in development at the class level can be extended in the following ways:
1.1 Adding a new global function
to add a global function, we just need to define the following:
Jquery.foo = function () {
Alert (' This is a test. This was only atest. ');
};
1.2 Adding multiple global functions
add multiple global functions, which can be defined as follows:
Java Code
Favorite Code
Jquery.foo = function () {
Alert (' This is a test. This was only atest. ');
};
Jquery.bar = function (param) {
Alert (' This function takes a parameter, which is "' + param + '".);
};
Called when it is the same as a function: Jquery.foo (); Jquery.bar (); or $.foo (); $.bar (' Bar ');
1.3 Using Jquery.extend (object);
Jquery.extend ({
Foo:function () {
Alert (' This is a test. This was only atest. ');
},
Bar:function (param) {
Alert (' This function takes a parameter, which is "' + param+ '".);
}
});
1.4 Using namespaces
Although in the jquery namespace, we prohibit the use of a large number of JavaScript function names and variable names. However, it is still inevitable that some functions or variable names will conflict with other jquery plugins, so we are accustomed to encapsulating some methods into another custom namespace.
Jquery.myplugin ={
Foo:function () {
Alert (' This is a test. This was only atest. ');
},
Bar:function (param) {
Alert (' This function takes a parameter, which is "' + param + '".);
}
};
The function that takes the namespace is still the global function, the method that is used when calling:
$.myplugin.foo ();
$.myplugin.bar (' Baz ');
With this technique (using a separate plug-in name), we can avoid collisions of functions within namespaces.
2, Object-level plug-in development
Plug-in development at the object level requires two forms:,
Form 1:
(function ($) {
$.fn.extend ({
Pluginname:function (Opt,callback) {
Our plugin implementation code Goeshere.
}
})
}) (JQuery);
Form 2:
(function ($) {
$.fn.pluginname = function () {
Our plugin implementation code Goeshere.
};
}) (JQuery);
The above defines a jquery function, the parameter is $, and after the function definition is complete, the jquery argument is passed in. Call execution immediately. The advantage of this is that when we write a jquery plugin, we can also use this alias, without causing a conflict with prototype.
2.1 Declare a name under the jquery namespace
This is a single plug-in script. If your script contains multiple plugins, or reciprocal plugins (for example: $.fn.dosomething () and $.fn.undosomething ()), then you need to declare multiple function names. However, usually when we write a plugin, we try to use only one name to contain all of its contents. Our example plug-in is named "Highlight"
$.fn.hilight = function () {
Our plugin Implementationcode goeshere.
};
Our plug-in is called by this way:
$ (' #myDiv '). Hilight ();
But what if we need to decompose our implementation code into multiple functions? There are a number of reasons: design needs, easier or more readable implementations, and more in line with object-oriented. This is a real hassle, breaking down the functionality into multiple functions without adding extra namespaces. For the sake of recognizing and using functions as the most basic class object in JavaScript, we can do this. Just like any other object, a function can be specified as a property. So we have declared that "hilight" is a Property object of jquery, and any other property or function that we need to expose can be declared in the "hilight" function. Continue later.
2.2 Accept the options parameter to control plug-in behavior
Let's add features to our plug-in to specify the foreground and background colors. We might let the option pass to the plug-in function like an options object. For example:
Plugindefinition
$.fn.hilight =function (options) {
Vardefaults = {
Foreground: ' Red ',
Background: ' Yellow '
};
Extendour default options with thoseprovided.
var opts= $.extend (defaults, options);
Ourplugin implementation code Goeshere.
};
Our plug-in can be called this way:
$ (' #myDiv '). Hilight ({
Foreground: ' Blue '
});
2.3 Exposing the default settings for plugins
One of the improvements we should take with the above code is to expose the plugin's default settings. This makes it easier for plug-in users to overwrite and modify plugins with less code. Next we start using the function object.
Plugin definition
$.fn.hilight =function (options) {
Extendour default options with thoseprovided.
Notethat the first arg to extend are an empty object-
Thisis to keep from overriding our "Defaults" object.
var opts= $.extend ({}, $.fn.hilight.defaults,options);
Ourplugin implementation code Goeshere.
};
Plugin Defaults-addedas a property in our Pluginfunction
$.fn.hilight.defaults ={
Foreground: ' Red ',
Background: ' Yellow '
};
Now the user can include a line like this in their script:
This only needs to be called once and is not necessarily called in the ready block.
$.fn.hilight.defaults.foreground = ' Blue ';
Next we can use the plug-in method like this, as a result it sets the blue foreground color:
$ (' #myDiv '). Hilight ();
As you can see, we allow the user to write a line of code in the plugin's default foreground color. And users still have the option to overwrite these new defaults when they need them:
Overwrite the default background color of the plugin
$.fn.hilight.defaults.foreground = ' Blue ';
// ...
Call the plugin with a new default setting
$ ('. Hilightdiv '). Hilight ();
// ...
Override default settings by passing configuration parameters to plug-in methods
$ (' #green '). Hilight ({
Foreground: ' Green '
});
How JQuery writes plugins-the first step
