Two ways of plug-in development in jquery

recently quite a lot of people write jquery, are about the expansion of jquery, the use of more than speaking, but about a detailed basis of the process is less, do the web development of the basic will use jquery, I based on the use of jquery to talk about plug-in development. jquery Plug-in development two ways: One is the extension of the way to develop plug-ins, jquery add new global functions (jquery's global function is a function of the jquery namespace), if you consider jquery as a class, Then it is equivalent to adding a method to the jquery class itself. The second is the way the object is extended to develop plug-ins, that is, the JQuery object Add method.

plug-in for class extensions

The most straightforward understanding of plug-in development for class extensions is to add class methods to the jquery class, which can be understood as adding static methods. The typical example is $. The AJAX () function, which defines the function in the jquery namespace. Plug-in development for class extensions can be extended in the following ways:

1. Add a global function

$.ltrim = function (str) {        return str.replace (/^\s+/, "");    };

　　Invocation mode

var  str= "  Remove left space"; Console.log ("Before removal:" +str.length+ "after removal:" +$.ltrim (str). length);

2. Add multiple global functions

    $.ltrim = function (str) {        return str.replace (/^\s+/, "");    };     $.rtrim = function (str) {        return str.replace (/\s+$/, "");    };

　The above kind if you write the global function is very good, if more than the use of $.extend (object) is recommended to use

  $.extend ({      ltrim:function (str) {        return str.replace (/^\s+/, "");    },    rtrim:function (str) {        Return Str.replace (/\s+$/, "");    }    );

3. Stand-alone 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.

$.myplugin={       ltrim:function (str) {        return str.replace (/^\s+/, "");    },    rtrim:function (str) { C19/>return str.replace (/\s+$/, "");    };

With a separate plug-in name, you can avoid conflicts of functions within namespaces by invoking the following methods:

  var  str= "  Remove left space";  Console.log ("Before:" +str.length+ "Call:" +$.myplugin.ltrim (str). length);

plug-in for object extensions

1. Add an object extension method

  $.fn.changecolor= function () {    this.css ("Color", "red");};   $.fn.changefont= function () {    this.css ("Font-size", "24px");};

　　Call Mode:

     $ (function () {       $ ("a"). Showcolor ();
      $ ("div"). Changefont ();    

　2. Add multiple Object extension methods

  (function ($) {      $.fn.changecolor= function () {    this.css ("Color", "red");};   $.fn.changefont=function () {    this.css ("Font-size", "24px");};  }) (JQuery);

　　Compatible notation (prevents the previous function from missing;):

;(function ($) {      $.fn.changecolor= function () {    this.css ("Color", "red");};   $.fn.changefont=function () {    this.css ("Font-size", "24px");};  }) (JQuery);

A jquery function is defined above, and 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.

3. Using $.fn.extend (object)

Off-topic, view the jquery source code (version 1.11.1) to see:

Jquery.fn = Jquery.prototype = {//The current version of the jQuery being Usedjquery:version,constructor:jquery,........... ...........},

jquery is a well-encapsulated class, such as a statement $ ("a") that generates an instance of the jquery class. JQuery.fn.extend (object) is actually an extension to the Jquery.prototype, which is to add a "member function" to the JQuery class. An instance of the jquery class can use this "member function".

  $.fn.extend ({  changecolor:function () {  this.css ("Color", "red"),},changefont:function () {    this.css (" Font-size "," 24px ");});

(function ($) {   $.fn.highlight = function (options) {     ////plugin parameter is controllable, the outside world can modify the default parameter     var defaults=$.extend ($. Fn.highlight.defaults, options);     Iterate through the function and change the style according to the parameter   return This.each (function () {        var elem = $ (this);         var markup = elem.html ();        Markup = $.fn.highlight.format (markup);        Elem.html (markup);        Elem.css ({            color:defaults.color,            fontSize:defaults.fontSize,            backgroundcolor: Defaults.backgroundcolor        });    };/ /parameter Default value $.fn.highlight.defaults={            color: "#556b2f",            backgroundcolor: "White",            fontSize: "48px"        };//formatted Font $.fn.highlight.format = function (txt) {    return "<strong>" + txt + "</strong>";};}) (jQuery);      $ (function () {        //call plug-in        $ ("a"). Highlight ({color: "Red", FontSize: "24px"});    

Summary

jquery The use of these two plug-in development, depending on the development process of the specific situation, the first kind of extension method is similar to C # Add a static method, the second object extension is based on their actual business and determined that your site in some places commonly used functions can certainly be written in a plug-in, For example, the view of the picture, the click of the sidebar, sometimes you can also study the online other people write plug-ins, you can learn a lot of things.

　　

Two ways of plug-in development in jquery