Extended jQuery object -- extend

Anyone who knows about extension of jQuery objects who has written jquery plug-ins knows that extends provided by jquery can be used to expand jquery objects. In addition, this method can not only expand jquery objects, you can also add new attributes and methods to an object, which will be described later.

The methods for calling extend extensions in different ways are also different:

• The static method is extended through $. extend;

• The instance method is extended through $. fn. extend.

We should all know that we have written jQuery plug-ins. In many cases, extend is used to add plug-ins for jQuery objects.

Plug-in writing:

; (Function ($) {$. fn. extend ({Firstplus: function () {}}); // In this case, the plug-in is used: $ ('P '). firstplus (); $. extend ({Secondplus: function () {}}); // In this case, the plug-in is used: $. secondplus () ;}) ($ );

$. Extend () and $. fn. extend () call the same function. Why are their functions different?

JQuery. extend = jQuery. fn. extend = function () {}// source code 285

This method extends the passed object to this.

$. Extend (xx) this points to the jQuery object. Therefore, the jQuery object is extended and can be called directly through $. xx.

$. Fn. this of extend (xx) points to the prototyep of the jQuery object. Therefore, the extended jQuery object prototype can call all methods on the jQuyer prototype, you can directly use $ (). xx method.

Below are three different extend usage:

1. jQuery. extend ([object])

> Extend the passed object to this object.

2. jQuery. extend (target, [object1,... objectN])

> Extend the later input object1 to objectN to the target object.

3. jQuery. extend ([deep], target, [object1,... objectN])

> If the deep parameter is passed in, it means that after recursion, object1 is passed into the objectN object and then extended to the target object, so that the attribute names with the same name will not be overwritten.

For details, refer to the source code analysis:

JQuery. extend = jQuery. fn. extend = function () {// defines some variables var options, name, src, copy, copyIsArray, clone, target = arguments [0] | {}, // target is used to store the first input object (target object) // This target not only indicates the target object to be merged, it can also indicate that the object I = 1 to be extended to jquery is used to indicate that the object passed in after the target is the length = arguments parameter of arguments. length, deep = false; // The deep variable indicates whether to perform a deep copy. // a series of if Statements are performed first to initialize parameters, determine whether to extend jQuery or extend the passed object. // if the first parameter is of the boolean type, whether to copy if (typeof target === "Boolean") {deep = target; target = arguments [1] | |{}; // set the target object to the second parameter passed in, if no empty object is set // skip the boolean and the target I = 2; // set I to 2} // if the target is not an object, set it to an empty object if (typeof target! = "Object "&&! JQuery. isFunction (target) {target ={};}// if arguments and I are equal, it indicates the jquery object to be extended, let target point to this // the specific point of this has been discussed before if (length = I) {target = this; -- I; // and let I --, in this case, arguments [I] indicates the object to be extended to jquery} for (; I <length; I ++) {// start to traverse the passed arguments // the next operation if (options = arguments [I]) is executed only when the parameter is not empty. = Null) {// extends the object. No matter the input target object or jQuery object, the extension for (name in options) is performed in the same way) {// traverse the attributes of the passed object src = target [name]; copy = options [name]; // prevent a property of target and obj from pointing to the same object into an endless loop if (target = copy) {continue ;} // do you want to perform a deep copy? // The deep copy mentioned here is a little different from what we usually call deep copy. When an object has an attribute of obj, whether to continue traversing this property. if this property is not traversed, it will directly overwrite the property with the same name as the target object if (deep & copy & (jQuery. isPlainObject (copy) | (copyIsArray = jQuery. isArray (copy) {If (copyIsArray) {// if the obj attribute to be copied is array copyIsArray = false; clone = src & jQuery. isArray (src )? Src: [];} else {// If the obj attribute to be copied is the object clone = src & jQuery. isPlainObject (src )? Src: {};}// recursion until the attribute is no longer an object or array target [name] = jQuery. extend (deep, clone, copy);} else if (copy! = Undefined) {// If deep copy is not performed and the current obj attribute is not empty, // the target object is extended and has the same name as the current obj attribute. Target [name] = copy ;}}} return target; the target object is returned. If the expanded jquery object is returned, the jquery object is returned };

Through the extend function, we can see that the extend function has implemented many different functions through many if judgments:

• Extends multiple objects to one object;

• Expand multiple objects to one object and traverse the objects to be extended to prevent overwriting objects with the same name;

• Extends an object to a jquery object;

• Extends an object to the jquery prototype object.

Later, we can see that jq has extended many tool methods to jQuery objects through this method. I have to say that the jq structure is still very compact. A method is not only provided for external use, multiple internal use