JQuery plug-in development and jQuery. extend function details are different from jQuery. fn and jQuery. prototype. jquery. fn. extend

JQuery plug-in development and jQuery. extend function details are different from jQuery. fn and jQuery. prototype. jquery. fn. extend
I. jQuery plug-in development is divided into two types:

1. class level:
You can understand the class level as an extension of the jquery class. The most obvious example is $. ajax (...), which is equivalent to a static method.

Use the $. extend method when developing the extension method, that is, jQuery. extend (object );

$. Extend ({
Add: function (a, B) {return a + B ;},
Minus: function (a, B) {return a-B ;}
});

Var I = $. add (3, 2 );
Var j = $. minus (3, 2 );

2. Object level:
The object level can be understood as object-based extension, for example, $ ("# table"). changeColor (...); here, the changeColor is the object-based extension.
Use the $. fn. extend method when developing extension methods, that is, jQuery. fn. extend (object );

$. Fn. extend ({
Check: function (){
Return this. each ({
This. checked = true;
});
},
Uncheck: function (){
Return this. each ({
This. checked = false;
});
}
});

$ ('Input [type = checkbox] '). check ();
$ ('Input [type = checkbox] '). uncheck ();

3. Expansion

$. Xy = {
Add: function (a, B) {return a + B ;},
Minus: function (a, B) {return a-B ;},
VoidMethod: function () {alert ("void ");}
};
Var I = $. xy. add (3, 2 );
Var m = $. xy. minus (3, 2 );
$. Xy. voidMethod ();

Ii. jQuery. extend functions:

1. The extension prototype of jQuery is:
JQuery. extend (target, object1, object2,... objectN );
It means to merge object1, object2,... objectN into the target, and the returned value is the merged target. It can be seen that after the method is merged,
The target structure is modified. If you want to get the merged result but do not want to modify the target structure, you can use the following:
Var newObj = $. extend ({}, obj1, obj2, obj3. ..); // you can specify "{}" as the target parameter.
For example:
Var result = $. extend ({}, {name: "Tom", age: 21 },{ name: "Jerry", sex: "Boy "});
The merged result is as follows:
Result = {name: "Jerry", age: 21, sex: "Boy "}
That is to say, if the following parameter has the same name as the preceding parameter, the following parameter will overwrite the preceding parameter value.
2. Another extension prototype of jQuery is to omit the target parameter:
$. Extend (object );
The target parameter in the above extend method prototype can be omitted. If it is omitted, the method can only have one object parameter, the object is merged into the object that calls the extend method, for example:
2.1 $. extend (object), this method combines the object into the global object of jQuery, for example:
$. Extend ({
Hello: function () {alert ('hello ');}
});
Usage: $. hello ();
The hello () method is merged into the global object of jQuery, which is equivalent to the static method of jQuery;
2.2 $. fn. extend (object). This method combines the object into the jQuery instance object, for example:
$. Fn. extend ({
Hello: function () {alert ('hello ');}
});
Usage: $ ("# test"). hello ();
2.3 common extended instances:
$. Extend ({
Home :{}
});
This is to expand a home namespace in the jQuery global object.
$. Extend ($. home ,{
GetAddress: function () {alert ('haizhu district, Guangzhou City, Guangdong Province ');}
});
This is to extend the hello Method to the expanded jQuery home namespace.
3. The extend method of jQuery also has an overload prototype:
$. Extend (boolean, target, obj1, obj2, obj3 ,...);
The first parameter 'boolean' indicates whether to perform a deep copy. The other parameters are the same as described above. What is "Deep copy"? Let's look at an example:
Var result = $. extend (true ,{},
{Name: "John", location: {city: "Boston", country: "USA "}},
{Sex: "male", location: {province "GuangDong", country: "China "}}
);
The merged result is:
Result = {name: "John", sex: "male", location: {city: "Boston", province: "GuangDong", country: "China "}};
That is to say, it will merge nested sub-objects in the object. If the first boolean parameter is false, the merged result will be:
Result = {name: "John", sex: "male", location: {province "GuangDong", country: "China "}};

Iii. jQuery. fn and jQuery. prototype:
Let's take a look at jQuery's source code (jquery-1.7.js) is how to define:

<Span style = "font-family: Microsoft YaHei; font-size: 14px;"> (function (window, undefined) {var jQuery = (function () {// construct the jQuery object var jQuery = function (selector, context) {return new jQuery. fn. init (selector, context, rootjQuery);} // jQuery object prototype jQuery. fn = jQuery. prototype = {constructor: jQuery, init: function (selector, context, rootjQuery) {// something to do}; // Give the init function the jQuery prototype for later instantiation jQuery. fn. init. prototype = jQuery. fn; // merge the content to the first parameter. Most of the subsequent functions are extended using this function. // use jQuery. fn. most extended functions are called through jQuery. extended extension of the same name function jQuery. extend = jQuery. fn. extend = function () {}; // extension of the static method jQuery on jQuery. extend ({// something to do}); // here, the jQuery object is constructed, and the code behind it is the extension of jQuery or jQuery object return jQuery ;})(); window. jQuery = window. $ = jQuery ;}) (window); </span>

Here we can see:

var jQuery = function( selector, context ) {           return new jQuery.fn.init( selector, context, rootjQuery );       }

So what does jQuery. fn. init () return?

jQuery.fn = jQuery.prototype = {           constructor: jQuery,           init: function( selector, context, rootjQuery ) {              // something to do           }       };

Here, a javascript Object is returned.

Here is a problem.

jQuery.fn = jQuery.prototype

Then, the original jQuery object is assigned to jQuery. fn.

Let's look at the following:

jQuery.fn.init.prototype = jQuery.fn;

We can see that jQuery. fn is given to jQuery. fn. init. prototype.

Before that, jQuery. fn. init. prototype. the prototype is {}. In order to call the method outside init, this processing is done, and jQuery. fn is assigned to jQuery. fn. init. prototype. in this case, jQuery. fn. init. the prototype is jQuery's prototype object. fn (pay attention to jQuery = function (return new jQuery. fn. init ())).

There is a relationship like this:

jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype

After the assignment, when calling, when there is no method in init, it will be called in the prototype function, so you should understand the differences between them.

JQuery. extend (); jQuery. fn. extend ();

JQuery. extend () is a direct extension of jQuery. While jQuery. fn. extend () is obviously an extension prototype. This is why most methods in jQuery. fn. extend () come from jQuery. extend ().

Additional knowledge:

The plus sign in front of the js function, exclamation point, for example: + function (){}();

The plus sign can also be replaced !,~ And other unary operators, the effect is equivalent:

(Function () {console. log ("Foo! ");})();
// Or
(Function () {console. log ("Foo! ");}());

Without this plus sign, the parser considers the function as the beginning of a function declaration. After the function declaration is pre-processed, one () is left behind, which will lead to a syntax error. When the + sign is added before the function, it becomes a function expression. If the function expression is not pre-processed, () it becomes a function to be executed immediately.