Step by step teach you to write a jQuery plug-in tutorial (Plugin) _ jquery

I will explain the above conditions one by one in the following example. After these conditions are completed, we will create a simple plug-in that highlights the text. Notes for jQuery plug-in development,
1. It is clear that jQuery has only one namespace.
2. Understand that the options parameter is used to control the plugin behavior.
3. Set public access permissions for the default plugin.
4. Provide public access permissions for sub-functions.
5. Private functions are definitely private access
6. Support for metadata plugin.
I will explain the above conditions one by one in the following example. After these conditions are completed, we will create a simple plug-in that highlights the text.

1. It is clear that jQuery has only one namespace.

In our example, we will name the plug-in hilight,

That is, our plugin can be used through the following method:

Why does jQuery plug-in have only one namespace? It may be the design requirement, or it is more readable, or for an object-oriented design model.

2. Understand the options parameter to control the plugin behavior.

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

Now the plug-in can set the following attributes:

3. Set public access permissions for the default plugin.

Here we can improve it to make the above Code settings scalable. In this way, users using this plug-in can use the least code to reload our option. This is the benefit of using function objects.

Now users can use a line of code in their scripts to set the foreground attribute:

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

4. Provide public access permissions for sub-functions

This clause is similar to the above, and it is interesting to make your plug-in have extended functions. For example, in lilight plugin, we can define a function as format and the form of hilight text. Our plugin code will display the following:

Here we can easily support another option object to reload the Default formatting through a callback function. That would be another good way to support customization.

5. Private functions are definitely private access

Some options of the Public plugin can be customized, which is of course a very powerful function. However, you need to consider which part should be made public and which part should not be accessed externally. Otherwise, the encapsulated results will be broken.

The debug method cannot be accessed from outside because it is a private method in the plugin display.

6. Support for metadata plugin.

To use Metadata Plugin, you need to check the type of your plugin. It may make your plug-in more powerful. Personally, I prefer metadata plugin because it can even make the option of my plguin reload by marking.

If metadata plugin can be successfully encapsulated into our plug-in, you can use the following mark to use this lilight plug-in.

The final code is as follows:

The Code is 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
Export this.css ({
BackgroundColor: o. background,
Color: o. foreground
});
Var markup = javasthis.html ();
// Call our format function
Markup = $. fn. hilight. format (markup );
Export 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''+ Txt +'';
};
//
// Plugin defaults
//
$. Fn. hilight. defaults = {
Foreground: 'red ',
Background: 'yellow'
};
//
// End of closure
//
}) (JQuery );