Basic knowledge of writing JQuery plug ins

  • 2020-03-30 00:00:54
  • OfStack

Popularize JQuery knowledge

Knowledge 1: when writing plug-ins with JQuery, the core methods are as follows:



$.extend(object)  Can be interpreted as JQuery  Add a static method. 
$.fn.extend(object)  Can be interpreted as JQuery Instance to add a method. 

Basic definition and invocation:



$.extend({ fun1: function () { alert(" Execution method 1 "); } });
$.fun1();

$.fn.extend({ fun2: function () { alert(" Execution method 2"); } });
$(this).fun2();
//Is equivalent to
$.fn.fun3 = function () { alert(" Execution method 3 "); }
$(this).fun3();

Knowledge 2:jQuery(function () {}); With   (function ($) {}) (jQuery); The difference between:


jQuery(function () { });
//The equivalent of
$(document).ready(function () { });

(function ($) { })(jQuery);
//The equivalent of
var fn = function ($) { };
fn(jQuery);

JQuery (function () {}); Is the code that executes a method after a DOM element is loaded.
(function ($) {}) (jQuery); Defines an anonymous function where jQuery represents the arguments of the anonymous function. Commonly used in JQuery plug-in development, it serves as a private domain for defining plug-ins.

Three: the development of JQuery plug-in standard structure

1, define scope: define a JQuery plug-in, the first thing to put the plug-in code in a place where the outside world does not interfere. To put it in a more technical way, define a private scope for the plug-in. External code cannot directly access code inside a plug-in. The code inside the plug-in does not pollute global variables. It decouples the dependency between the plug-in and the running environment in a certain way. Having said that, how do you define the private scope of a plug-in?


(function ($) {
})(jQuery);

So far, the simplest JQuery plug-in is complete. The plugin can be called by $("#domName").easyslider ({}), or $(".domname ").easyslider ({}), or more.

3, set default values: define a JQuery plug-in, just like defining a.net control. A perfect plug-in should have flexible properties. Let's look at this code: < Asp :TextBox ID="TextBox1" Width="20" Height="100" runat="server"> < / asp: TextBox> .   TextBox control has properties of Width and Height. When users use TextBox, they can set the Height and Width of the control freely, or they can not set the value, because the control itself has a default value. When preparing to develop a JQuery plug-in, there should be default values when the user does not specify the properties. In JQuery, such definition can be implemented in two steps, as shown in the following code step03-a and step03-b.


//Step01 define the scope of JQuery
(function ($) {
    //Step03-a plug-in's default value properties
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        // ... 
    };
    //Step02 plug-in extension method name
    $.fn.easySlider = function (options) {
        //Step03-b merge user-defined properties and default properties
        var options = $.extend(defaults, options);
    }
})(jQuery);

People who make programs like to innovate, change variable names, change lines and so on. When I saw the use of var defaults ={} to represent a default property, I thought it would be different when I wrote my own JQuery plug-in, so I used var default01 ={}, var default02 ={} to represent the default property. And then the default property names are all over the place, and it gets worse and worse. Therefore, it is recommended that when you write JQuery plug-ins and define default properties, you should use default variables to represent the default properties. Such code is more readable.

Someone sees this line of code: var options = $.extend(defaults, options) and frowns. Let's look at the following code first:


var obj01 = { name: " English name: Sam Xiao", age: 29, girlfriend: { name: "Yang", age: 29} }
var obj02 = { name: " Chinese name: XiaoJian", girlfriend: { name: "YY"} };
var a = $.extend(obj01, obj02);
var b = $.extend(true, obj01, obj02);
var c = $.extend({}, obj01, obj02);
var d = $.extend(true,{}, obj01, obj02);

Copy the code into the development environment and look at the values of a,b,c, and d to see what var options = $.extend(defaults, options) means. Represents options to override the defaults value and assign the value to options.
In the plug-in environment, it represents the value set by the user and overrides the default value of the plug-in. If the user does not set the default properties, leave the default values for the plug-in.


//Step01 define the scope of JQuery
(function ($) {
    //Step03-a plug-in's default value properties
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        // ... 
    };
    //Step02 plug-in extension method name
    $.fn.easySlider = function (options) {
        //Step03-b merge user-defined properties and default properties
        var options = $.extend(defaults, options);
        //Step4 support JQuery selectors
        this.each(function () {
        });
    }
})(jQuery);


//Step01 define the scope of JQuery
(function ($) {
    //Step03-a plug-in's default value properties
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        // ... 
    };
    //Step02 plug-in extension method name
    $.fn.easySlider = function (options) {
        //Step03-b merge user-defined properties and default properties
        var options = $.extend(defaults, options);
        //Step4 support JQuery selectors
        //Step5 supports chain calls
        return this.each(function () {
        });
    }
})(jQuery);

6, plug-in methods: often to implement a plug-in's functionality requires a lot of code, there may be hundreds of lines, thousands of lines, or even tens of thousands of lines. We have to structure this code with function. As stated in the first point, methods defined in the plug-in cannot be called directly from the outside, and the methods I defined in the plug-in do not pollute the environment. Now try to define some methods in the plug-in:


//Step01 define the scope of JQuery
(function ($) {
    //Step03-a plug-in's default value properties
    var defaults = {
        prevId: 'prevBtn',
        prevText: 'Previous',
        nextId: 'nextBtn',
        nextText: 'Next'
        // ... 
    };
    //Step06-a define the method in the plug-in
    var showLink = function (obj) {
        $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
    }
    //Step02 plug-in extension method name
    $.fn.easySlider = function (options) {
        //Step03-b merge user-defined properties and default properties
        var options = $.extend(defaults, options);
        //Step4 support JQuery selectors
        //Step5 supports chain calls
        return this.each(function () {
            //Step06-b define the method in the plug-in
            showLink(this);
        });
    }
})(jQuery);

Step step06-a: a method called showLink() is defined in the plug-in. This method cannot be called directly outside of the plug-in, and is somewhat like a private method in the C# class, which can only be used within the plug-in. Step step06-b demonstrates how to invoke the methods inside the plug-in.


Related articles: