Basic knowledge of writing jquery plugins

Universal knowledge of jquery

Knowledge 1: When writing plugins with jquery, the core approach is as follows two:

Copy CodeThe code is as follows:

$.extend (object) can be understood to add a static method to jquery.

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

Basic definition and invocation:

Copy CodeThe code is as follows:
/* $.extend definition and invocation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend ({fun1:function () {Alert ("execution method One");}});
$.fun1 ();
/* $.fn.extend definition and invocation
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend ({fun2:function () {Alert ("execution Method 2");}});
$ (this). FUN2 ();
Equivalent to
$.fn.fun3 = function () {Alert ("execution method Three");}
$ (this). FUN3 ();

Knowledge 2:jquery (function () {}); differs from (function ($) {}) (JQuery):

Copy CodeThe code is as follows:
JQuery (function () {});
Equivalent
$ (document). Ready (function () {});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
(function ($) {}) (JQuery);
Equivalent
var fn = function ($) {};
FN (jQuery);

JQuery (function () {}) is the code in the execution method after a DOM element has been loaded.
(function ($) {}) (JQuery); An anonymous function is defined, where jquery represents the argument for this anonymous function. Often used in jquery plug-in development, the role of defining the plug-in's private domain.

Three: The development of jquery plug-in standard structure

1, define the scope: Define a jquery plugin, the first thing to do is to put the plugin code in a place that is not disturbed by the outside world. If you are professional, you need to define a private scope for this plugin. External code cannot directly access the code inside the plug-in. The code inside the plugin does not pollute global variables. The dependence of plug-in and running environment is decoupled in a certain role. Having said so much, how do you define a private scope for a plug-in?

Copy CodeThe code is as follows:
(function ($) {
}) (JQuery);

So far, one of the simplest jquery plugins has been completed. The call can be $ ("#domName") or $ ("Easyslider"), or $ (". Domname"). Easyslider ({}) or more ways to invoke the plugin.

3, set default value: Defines a jquery plug-in, just like defining a. NET control. A perfect plugin should be a more flexible attribute.  Let's take a look at this code: <asp:textbox id= "TextBox1" width= "" "Height=" runat= "" Server "></asp:TextBox>. The TextBox control has a width and height property that allows the user to freely set the height and width of the control when using a TextBox, or not to set a value because the control itself has a default value. When you are ready to develop a jquery plugin, there should be a default value when the user does not specify a property, and in jquery you can implement such a definition in two steps, as shown in the following code step03-a,step03-b.

Copy CodeThe code is as follows:
Step01 defining the scope of jquery
(function ($) {
Default Value properties for Step03-a plugins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method name for STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
}
}) (JQuery);

The people who do the procedure like to innovate, change the variable name, change a line ah these. When you see the use of var defaults = {} to represent a default property, when you write the jquery plugin to think differently, so with Var default01 ={}, var default02 ={} to represent the default properties. Then the default attribute names are varied and getting worse. It is recommended that when you write a jquery plugin, the default properties are defined by using the defaults variable to represent the default property, which makes the code more readable.

Someone saw this line of code: var options = $.extend (defaults, options), frowned, expressed puzzled. Let's start by looking at the following code:

Copy CodeThe 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);

By copying the code into the development environment and looking at the value of a,b,c,d, we understand the meaning of var options = $.extend (defaults, options). Represents the options to overwrite the value of the defaults and assigns the value to the options.
In a plug-in environment, the value that represents the user setting overrides the default value of the plug-in, or the default value of the plug-in if the user does not have a property that sets the default value.

4, support jquery selector: jquery selector, is a good feature of jquery, if our plug-in writing does not support the jquery selector, is indeed a great pity. In order to enable your jquery plugin to support multiple selectors, our code should be defined like this:

Copy CodeThe code is as follows:
Step01 defining the scope of jquery
(function ($) {
Default Value properties for Step03-a plugins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method name for STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 support for jquery selectors
This.each (function () {

});
}
}) (JQuery);

5, support for jquery link call: The top of the code looks perfect, in fact, it is not so perfect. Link calls are not supported so far. In order to achieve the effect of a link call, you must return each element of the loop

Copy CodeThe code is as follows:
Step01 defining the scope of jquery
(function ($) {
Default Value properties for Step03-a plugins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Extension method name for STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 support for jquery selectors
STEP5 supports chained calls
Return This.each (function () {

});
}
}) (JQuery);

Such a definition can support link invocation. For example, such calls are supported: $ (". Div"). Easyslider ({previd: "", Prevtext: ""}). css ({"Border-width": "1", "Border-color": "Red", " Border-bottom-style ":" Dotted "});

6, plug-in method: often implement a plug-in function requires a lot of code, it is possible to hundreds of lines, thousands of lines, even tens of thousands of lines. We structure this code and we have to use function. In the 1th has been said, in the plug-in definition of the method, the outside world can not directly call, I defined in the plug-in method also does not pollute the external environment. Now try to define some methods in the plugin:

Copy CodeThe code is as follows:
Step01 defining the scope of jquery
(function ($) {
Default Value properties for Step03-a plugins
var defaults = {
Previd: ' Prevbtn ',
Prevtext: ' Previous ',
NextID: ' Nextbtn ',
Nexttext: ' Next '
......
};
Step06-a Defining methods in plugins
var showLink = function (obj) {
$ (obj). Append (function () {return "(" + $ (obj). attr ("href") + ")"});
}

Extension method name for STEP02 plug-in
$.fn.easyslider = function (options) {
Step03-b Merge user custom properties, default properties
var options = $.extend (defaults, options);
STEP4 support for jquery selectors
STEP5 supports chained calls
Return This.each (function () {
Step06-b Defining methods in plugins
ShowLink (this);
});
}
}) (JQuery);

Step step06-a: Define a method called Showlink () in the plugin; This method can not be called directly outside the plugin, a bit like a private method in C # class, can only meet the internal use of plug-ins. Step Step06-b demonstrates how to invoke the inside of a plug-in method.

Basic knowledge of writing jquery plugins