Step by step to teach you to write a jquery plugin tutorial (Plugin) _jquery

The plugin development of jQuery requires attention,
1. The explicit jquery namespace has only one.
2. Understand the options parameter to control the behavior of the plugin.
3. Provide public access to the default plugin settings.
4. Provide public access to the child functions.
5. Private functions are definitely private access
6. Support Metadata plugin.
I will explain the above conditions in one of the following examples, and after these things we will create a simple plugin that highlights text.

1. The explicit jquery namespace has only one

In our example, we'll name the plugin named Hilight,

That is, our plugin can be used in the following ways:

Why is there only one namespace for the plugin of jquery? It may be a design requirement, or it can be more readable, or for object-oriented design patterns.

2. Understand the options parameters to control plugin behavior.

Let's first clarify the color of foreground and background for our hilight plugin. We should be able to allow these two option to be passed to the plugin main function as the option object. For example:

The plug-in can now set the following properties:

3. Provide public access to the default plugin settings.

We can improve here, so that the above code can be set to expand. This allows users who use this plug-in to overload our option with the least amount of code. That's the benefit of getting started with function objects.

Users can now use one line of code in their script to set the foreground property:

With the above code, we can set the foregrounf color of a DOM control to blue.

4. Provide public access to child functions

This article is similar to the above, it is interesting to let your plugin have extended function. For example, in the plugin of lilight we can define a function as format, which defines the form of hilight text. Our plugin code will display the following:

Here we can easily support another option object to overload the default formatting with a callback function. That would be another nice way to support customization.

5. Private functions are definitely private access

It is certainly a very powerful feature that some of the option of public plugin can be customized. But you need to consider which part should be made public and which part should not be accessed externally, or it will break the result that you have encapsulated.

The Debug method here is not accessible from the outside because he is a private method in the plugin presentation.

6. Support Metadata plugin.

Using metadata plugin needs to see what type of plugin you have, which may make your plug-in more powerful. Personally, I prefer metadata plugin because it can accidentally let my plguin option pass the tag overload.

If the metadata plugin can successfully encapsulate to our plugin, then you can use the Lilight plugin using the tag below.

The final code is as follows:

Copy Code code as follows:

//
Create closure
//
(function ($) {
//
Plugin definition
//
$.fn.hilight = function (options) {
Debug (this);
Build main options before element iteration
var opts = $.extend ({}, $.fn.hilight.defaults, options);
Iterate and reformat each matched element
Return This.each (function () {
$this = $ (this);
Build element Specific Options
var o = $.meta? $.extend ({}, OPTs, $this. Data ()): opts;
Update element styles
$this. CSS ({
Backgroundcolor:o.background,
Color:o.foreground
});
var markup = $this. HTML ();
Call our Format function
Markup = $.fn.hilight.format (markup);
$this. HTML (markup);
});
};
//
Private Function for debugging
//
function Debug ($obj) {
if (window.console && window.console.log)
Window.console.log (' Hilight selection count: ' + $obj. Size ());
};
//
Define and expose our Format function
//
$.fn.hilight.format = function (TXT) {
Return ' <strong> ' + txt + ' </strong> ';
};
//
Plugin defaults
//
$.fn.hilight.defaults = {
Foreground: ' Red ',
Background: ' Yellow '
};
//
End of closure
//
}) (JQuery);