jquery Plugin Development Full analysis

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 Add a new global function

To add a global function, we just need to define the following:

function () {   alert (' This is a test. This was only a test. ' );  };  

1.2 add multiple global functions

Add multiple global functions, which can be defined as follows:

    function () {       alert (' This is a test. This was only a test. ' );      };       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 Use Jquery.extend (object);　

    jquery.extend ({          function() {          alert (' This is a test. This was only a test. '           },          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 a test. '               },              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 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 goes here.        }     })     

Form 2:

(function($) {       function() {          // our plugin Implementation code goes here.      };     }) (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 in the JQuery name space under the declaration of a name

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"

    function () {          // Our Plugin implementation code goes here.         };        Our plug-in is called by:      $ (' #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 Options parameters to control the behavior of the plug- in

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:

    //Plugin definition$.fn.hilight =function(options) {varDefaults ={foreground:' Red ', background:' Yellow '          }; //Extend Our default options with those provided.       varopts =$.extend (defaults, options); //Our plugin implementation code goes here.     }; Our plug-in can be called this way: $ (' #myDiv '). Hilight ({foreground:' Blue '        }); 

2.3 exposing the default settings for plug-ins

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) {//Extend Our default options with those provided.   //Note that the first arg to extend are an empty object-  //This was to keep from overriding our "Defaults" object.   varopts =$.extend ({}, $.fn.hilight.defaults, options); //Our plugin implementation code goes here. }; //plugin defaults-added as a property on our plugin function$.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, the 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 '

});

2.4 appropriate exposure to some functions

This section will step-by-step to the previous code by extending your plugin in an interesting way (while letting others expand your plugin). For example, the implementation of our plug-in can define a function called "format" to format the highlighted text. Our plugin now looks like this, and the default format method implementation section is below the Hiligth function.

    //Plugin definition$.fn.hilight =function(options) {//iterate and reformat each matched element      return  This. each (function() {            var$ This= $( This); // ...            varMarkup = $ This. html (); //Call our Format functionMarkup =$.fn.hilight.format (markup); $ This. HTML (markup);        });        }; //define our Format function$.fn.hilight.format =function(TXT) {return' <strong> ' + txt + ' </strong> ';     }; 

It's easy to support other properties in the options object by allowing a callback function to override the default settings. This is another great way to modify your plugin. The technique shown here is to further effectively expose the format function so that he can be redefined. Through this technique, other people are able to pass their own settings to overwrite your plugin, in other words, so that other people can also write plugins for your plugin.
Considering the useless plugins we've created in this article, you might want to know when it's going to be useful. A real example is the cycle plugin. This cycle plugin is a slide show plugin that he can support many internal transformations to scroll, slide, fade, etc. In practice, however, there is no way to define the effects of each type that might be applied to a sliding change. That's where extensibility is useful. The cycle plugin exposes "transitions" objects to the user, allowing them to add their own transformation definitions. The plugin defines it like this:

$.fn.cycle.transitions = {

// ...

};

This technique enables others to define and transfer the transform settings to the cycle plugin.

2.5 Keep private Functions private

This technique exposes a part of your plugin to be overwritten is very powerful. But you need to think carefully about the parts of your implementation that are exposed. Once exposed, you need to keep any changes to the parameters or semantics in your mind that might undermine backwards compatibility. A rationale is that if you are not sure whether you are exposing specific functions, then you may not need to do that.

So how do we define more functions without cluttering up namespaces and not exposing implementations? This is the function of the closure. To demonstrate, we will add another "debug" function to our plugin. This debug function will format the output of the selected element to the Firebug console. In order to create a closure, we will wrap the entire plug-in definition in a function.

(function($) {      //Plugin definition$.fn.hilight =function(Options) {Debug ( This); // ...      }; //Private function for debugging  functionDebug ($obj) {if(Window.console &&window.console.log) Window.console.log (' Hilight selection count: ' +$obj. Size ());    }; //  ...    }) (JQuery);

Our "Debug" method cannot be entered from outside closures, so it is private to our implementation.

2.6 Support Metadata Plugins

On the basis of the plugin you are writing, adding support for the metadata plugin will make him more powerful. Personally, I like this metadata plugin because it allows you to use a little "markup" overlay plugin option (this is useful when creating an example). And it's very easy to support it. Update: Comments have a bit of tuning recommendations.

$.fn.hilight =function(options) {// ...      //build main options before element iteration  varopts =$.extend ({}, $.fn.hilight.defaults, options); return  This. each (function() {        var$ This= $( This); //build element Specific options    varo = $.meta? $.extend ({}, opts, $ This. Data ()): opts; //...    

These changes do something: it's a test of whether the metadata plugin is installed if it is installed, it can expand our options object by extracting the metadata as the last parameter to the Jquery.extend, then it will overwrite any other option settings. Now we can drive the behavior from "markup" if we choose "Markup":

The call can be written like this: Jquery.foo (); or $.foo ();

<!--  Markup--    <div class= "hilight {background: ' Red ', foreground: ' White '}" >      has ANice day!    </div>    <div class= "hilight {foreground: ' Orange '}" > has      aNice day!    </div>    <div class= "hilight {background: ' green '}" > has      aNice day!    </div>    Now we can highlight which Div uses only one line of script:  $ ('. Hilight '). Hilight ();    

2.7 Integration
Here's the code to get our example done:

//Create a closed package(function($) {      //definition of plug-in$.fn.hilight =function(Options) {Debug ( This); //build main options before element iteration    varopts =$.extend ({}, $.fn.hilight.defaults, options); //iterate and reformat each matched element    return  This. each (function() {          $ This= $( This); //build element Specific options      varo = $.meta? $.extend ({}, opts, $ This. Data ()): opts; //Update element Styles$ This. css ({backgroundcolor:o.background, color:o.foreground}); varMarkup = $ This. html (); //Call our Format functionMarkup =$.fn.hilight.format (markup); $ This. HTML (markup);      });      }; //Private Function: Debugging  functionDebug ($obj) {if(Window.console &&window.console.log) Window.console.log (' Hilight selection count: ' +$obj. Size ());      }; //define the exposure format function$.fn.hilight.format =function(TXT) {return' <strong> ' + txt + ' </strong> ';      }; //plug -in defaults$.fn.hilight.defaults ={foreground:' Red ', background:' Yellow '      }; // closing closure}) (JQuery);

This design has allowed me to create a powerful plug-in that conforms to specifications. I hope it will help you to do the same.

3 , Summary

jquery has two methods for developing plug-ins, namely:

JQuery.fn.extend (object); Adds a method to a jquery object.
Jquery.extend (object); To extend the jquery class itself. Adds a new method to the class.

3.1 JQuery.fn.extend (object);

What's the FN thing? If you look at the jquery code, it's not hard to find.

Jquery.fn = Jquery.prototype = {

Init:function (Selector, context) {//....

//......

};

The original Jquery.fn = Jquery.prototype. It's certainly not strange to prototype. Although JavaScript does not have a clear class concept, it is more convenient to use a class to understand it. jquery is a well-encapsulated class, such as we use the statement $ ("#btn1") to generate an instance of the jquery class.

JQuery.fn.extend (object); The extension to Jquery.prototype is to add "member functions" to the jquery class. An instance of the jquery class can use this "member function".

For example, we want to develop a plugin, make a special edit box, when it is clicked, then alert the contents of the current edit box. You can do this:

$.fn.extend ({

Alertwhileclick:function () {

$ (this). Click (function () {

Alert (This). Val ());

});

}

});

$ ("#input1"). Alertwhileclick (); On the page: <input id= "INPUT1" type= "text"/>

$ ("#input1") is a jquery instance, and when it calls the Member method Alertwhileclick, it implements the extension, which pops up the contents of the current edit each time it is clicked.

3.2 Jquery.extend (object);　

Adding a class method to the jquery class can be understood as adding a static method. Such as:

$.extend ({

Add:function (A, b) {return a+b;}

});

Adds a "static method" for jquery to add, which can then be used where jquery is introduced, $.add (3,4); Return 7

jquery Plugin Development Full analysis