jQuery plug-in development study notes

jQuery plug-in development study notes

  Today I want to know about jQuery plug-in development, so I googled it. The two articles listed in the front are very good. The full analysis of jQuery plug-in development explains all aspects of plug-in development in detail, and provides a PDF for download. . The author read this article in detail today and took some notes.

1. Class-level plug-in development

  I understand it like this: jQuery is a class, $ is an alias of jQuery, and $('selector') is a jQuery object

  This kind of plug-in is similar to adding a static method to the jQuery class, and then we can use the plug-in like calling a static method in C#. There are two ways to add static methods:

jQuery.alert = function () {
    alrt("This is a jQuery prompt box");
}

jQuery.confirm = function () {
    confirm("This is a JQuery prompt box");
}

  The corresponding call: $.alrt(); $.confirm();

  The code for another method is as follows:

jQuery.extend({
    alert: function () {alrt("This is a jQuery prompt box"); },
    confirm: function () {confirm("This is a JQuery prompt box");}
});

  This is the function extension through the extend method provided by jQuery, and the calling method is the same as above.

  In addition, in order to avoid conflicts with other jQuery plugins, we can add our own namespace:

jQuery.sample = {
    alert: function () {alrt("This is a jQuery prompt box"); },
    confirm: function () {confirm("This is a JQuery prompt box");}
};

  Call after adding namespace: $.sample.alrt(); $.sample.confirm();

2. Object-level plug-in development

/*

Explanation of this writing:
var fn = function(para){
   //code...
}
fn(jQuery);

Define a method first, and then execute the method immediately
The advantage of this way of writing: when we write jQuery plug-ins, we can also use the $ alias, without causing conflict with prototype.

*/
(function ($) {
    $.fn.extend({
        hilight: function (options) {
            var opts = $.extend($.fn.hilight.defauts, options);
            this.css("color", opts.color).css("background-color", opts.bgcolor);
        }
    });

    $.fn.hilight.defauts = {
        color:'red',
        bgcolor:'white'
    };
})(jQuery);

  jQuery recommends this way of writing, and the benefits are in the comment section above.

  In this code, we expose the defaults, allowing users to directly access and set the defaults value. The advantage of this is that after setting the default value in one place, it can be used directly elsewhere without passing parameters every time. Of course, we can still pass parameters to change the default value set manually.

  We can also expose some methods that can be extended by others by exposing the same method as defaults; if you need to privatize a method or property, you only need to define it in the closure instead of providing the corresponding reference.

3. Summary

  jQuery provides two methods for developing plug-ins, namely:

    jQuery.fn.extend(object); Add a method to the jQuery object. What is fn? The original jQuery.fn = jQuery.prototype, jQuery.fn.extend(object) is an extension of jQuery.prototype, which is to add "member functions" to the jQuery class. Instances of the jQuery class can use this "member function".

    jQuery.extend(object); To extend the jQuery class itself. Add new methods to the class. It can be understood as adding static methods to jQuery.

  Finally, the corresponding pdf download is provided: "Full Analysis of jQuery Plug-in Development"

Reference: https://cloud.tencent.com/developer/article/1513597 jQuery plug-in development study notes-Cloud + Community-Tencent Cloud