Basic knowledge of writing JQuery plug-ins

Basic knowledge of writing JQuery plug-ins_jquery

WBOY

Release： 2016-05-16 17:12:37

Original

1012 people have browsed it

Popularize JQuery knowledge

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

Copy code The code is as follows:

$.extend(object) can be understood as adding a static method to JQuery.

$.fn.extend(object) can be understood as adding a method to the JQuery instance.

Basic definition and call:

Copy code The code is as follows:

/* $.extend definition and call
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun1 : function () { alert("Execution method one"); } });
$.fun1();
/* $.fn.extend Definition and call
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun2: function () { alert("Execute method 2"); } });
$(this).fun2();
//Equivalent to 
$.fn.fun3 = function () { alert("Execute Method 3"); }
$(this).fun3();

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

Copy code The code is as follows:

jQuery(function () { });
 //Equivalent to
$(document).ready(function () { });
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) { })(jQuery);
//Equivalent to 
var fn = function ($) { };
fn (jQuery);

jQuery(function () { }); is the code in the execution method after a DOM element is loaded.
(function ($) { })(jQuery); defines an anonymous function, where jQuery represents the actual parameters of this anonymous function. Usually used in JQuery plug-in development, it plays the role of defining the private domain of the plug-in.

Three: Develop JQuery plug-in standard structure

1. Define the scope: To define a JQuery plug-in, you must first place the code of the plug-in in a place that is free from external interference. To put it in more professional terms, you need to define a private scope for this plug-in. External code cannot directly access the code inside the plug-in. Code inside the plug-in does not pollute global variables. To a certain extent, it decouples the dependence between plug-ins and the running environment. Having said all that, how do you define the private scope of a plug-in?

Copy code The code is as follows:

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

Up to now, one of the simplest JQuery plug-ins has been completed. When calling, you can call this plug-in in $("#domName").easySlider({}), or $(".domName").easySlider({}) or more.

3. Set default value: Define a JQuery plug-in, just like defining a .net control. A perfect plug-in should have relatively flexible properties. Let's look at this code: . The TextBox control has Width and Height properties. When using TextBox, the user can freely set the Height and Width of the control, or not set a value, because the control itself has a default value. When preparing to develop a JQuery plug-in, when the user does not specify an attribute, there should be a default value. In JQuery, such a definition can be implemented in two steps, see the following code step03-a, step03-b.

Copy code The code is as follows:

//step01 Define the scope of JQuery
( function ($) {
//step03-a plugin’s default value attribute
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
}; //step03-b Merge user-defined attributes, default attributes
var options = $.extend(defaults, options);
}
})(jQuery);

Programmers like to innovate, such as changing variable names, changing lines, etc. When I saw var defaults = {} used to represent a default attribute, I thought about being different when I wrote the JQuery plug-in, so I used var default01 ={} and var default02 ={} to represent the default attribute. Then the default attribute names are all kinds and getting worse. Therefore, it is recommended that when writing a JQuery plug-in, when defining default properties, use the defaults variable to represent the default properties. Such code is more readable.

Someone saw this line of code: var options = $.extend(defaults, options) and frowned, expressing confusion. Then let’s look at the following code first:

Copy code The code is as follows:

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 to the development environment, look at the values of a, b, c, and d respectively, and you will understand the meaning of var options = $.extend(defaults, options). Indicates that options overrides the value of defaults and assigns the value to options.
In the plug-in environment, it means that the value set by the user overrides the default value of the plug-in; if the user does not set the attribute with a default value, the default value of the plug-in is still retained.

4. Support JQuery selector: JQuery selector is an excellent feature of JQuery. If our plug-in is written not to support JQuery selector, it is indeed a big regret. In order to make our JQuery plug-in support multiple selectors, our code should be defined like this:

Copy code The code is as follows:

5. Support JQuery link calling: The above code seems perfect, but in fact it is not so perfect. Link calls are not supported so far. In order to achieve the effect of link calling, each element of the loop must be returned

Copy code The code is as follows://step01 Define the scope of JQuery

( function ($) {

//step03-a plugin’s default value attribute
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
}; //step03-b Merge user-defined attributes, default attributes
var options = $.extend(defaults, options);
//step4 Support JQuery selector
//step5 Support chain call
return this.each(function () {

});
}
})(jQuery);

Such a definition can support link calls. For example, it supports calls like this: $(".div").easySlider({prevId:"",prevText:""}).css({ "border-width": "1", "border-color": "red ", "border-bottom-style": "dotted" });

6. Methods in plug-ins: Implementing the functions of a plug-in often requires a large amount of code, which may be hundreds, thousands, or even tens of thousands of lines. We need to use functions to structure this code. As mentioned in the first point, the methods defined in the plug-in cannot be directly called by the outside world. The methods I defined in the plug-in do not pollute the external environment. Now try to define some methods in the plug-in:

Copy code The code is as follows:

//step01 Define the scope of JQuery
( function ($) {
//step03-a plugin’s default value attribute
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn ',
nextText: 'Next'
};
};
//step06-a Define the method in the plug-in (obj).append(function () { return "(" $(obj).attr("href") ")" });
}

//step02 extension method name of plug-in $.fn.easySlider = function (options) {

//step03-b merge user-defined attributes, default attributes
var options = $.extend (defaults, options);
//step4 supports JQuery selector
//step5 supports chain call
return this.each(function () {
//step06-b is defined in the plug-in Method
showLink(this);
});
Step06-a: A method called showLink() is defined in the plug-in; this method cannot be called directly outside the plug-in. It is a bit like a private method in a C# class and can only be used within the plug-in. Step step06-b demonstrates how to call methods inside the plug-in.