Extension of jQuery object --extend

Anyone who has written a jquery plug-in knows that the jquery object can be extended through the extend provided by jquery, and this method can not only extend the jquery object, but also add new properties and methods to an object. This will be discussed later. introduce.

The methods of calling extend in different ways are also different:

• What is extended through $.extend() is a static method;

• What is extended through $.fn.extend() is the instance method.

Anyone who has written jQuery plug-ins should know that many times we use extend to add plug-ins to jQuery objects.

How to write the plug-in:

;(function($){
    $.fn.extend({
        Firstplus: function() {}
    });    //这样写的话插件的使用方法就是：$('div').Firstplus();

    $.extend({
        Secondplus: function() {}
    });    //这样写的话插件的使用方法就是：$.Secondplus();})($);

$.extend() and $.fn.extend() actually call the same function, so why are the functions they implement different?

jQuery.extend = jQuery.fn.extend = function() {}   //源码285行

Mainly because this method extends the incoming object to this.

$.extend(xx) this points to the jQuery object, so what is extended at this time is the jQuery object, which can be called directly through $.xx.

$.fn.extend(xx) this points to the prototyep of the jQuery object, so the prototype of the extended jQuery object at this time and the instantiated jQuery object can call all methods on the jQuyer prototype. Call directly through $().xx.

The following are three different uses of extend:

1.jQuery.extend( [ object ] )

>将传入的 object 扩展到 this 对象上

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

>将后面传入的 object1 到 objectN 扩展到 target 对象上

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

>如果传入了 deep 参数表示递归后面传入object1到objectN对象然后在扩展到target，这样同名的属性名就不会被覆盖了。

Look at the source code analysis in detail:

jQuery.extend = jQuery.fn.extend = function() {//定义了一些变量var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},  //target用来存储传入的第一个对象（目标对象）
    //这个target不仅表示要进行合并的目标对象，也可以表示要扩展到jquery上的对象
    i = 1,  //i用来表示target后面传入的对象是arguments的第几个参数
    length = arguments.length,   
    deep = false;  //deep变量表示，是否进行深度拷贝//先进行了一系列的if判断，来初始化参数，判断到底是要扩展jQuery还是对传入的对象进行扩展//如果第一个参数是布尔类型，则表示是否深度拷贝if ( typeof target === "boolean" ) {
    deep = target;
    target = arguments[1] || {};  //将目标对象置为传入的第二个参数，如果没有置为空对象
    // skip the boolean and the target
    i = 2;   //将i置为2}//如果target不是一个对象，将其置为空对象if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
    target = {};
}//如果arguments和i相等，表示要扩展的jquery对象，让target指向this//这个this具体指向什么之前已经探讨过了if ( length === i ) {  
    target = this;
    --i;  //且让i--，这时arguments[i]表示的才是要扩展到jquery上的对象}for ( ; i < length; i++ ) { //开始遍历传入的 arguments
    // 只有参数不为空时才执行后面的操作
    if ( (options = arguments[ i ]) != null ) {        // 对对象进行扩展，无论传入的target对象，还是jQuery对象，都使用同样的方法进行扩展
        for ( name in options ) {  //遍历传入的对象的属性
            src = target[ name ];
            copy = options[ name ];            //防止target和obj的某个属性指向的是同一对象进入死循环
            if ( target === copy ) {  
                continue;
            }            //是否进行深度拷贝
            //这里说的深度拷贝，和我们平时说的深度拷贝有点区别；这里指的当obj的某个属性是一个对象时，是否对这个属性继续遍历，如果不进行遍历的话，会直接覆盖target对象的同名属性
            if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {                if ( copyIsArray ) {  //如果要拷贝的obj属性为数组
                    copyIsArray = false;
                    clone = src && jQuery.isArray(src) ? src : [];

                } else {  //如果要拷贝的obj属性为对象
                    clone = src && jQuery.isPlainObject(src) ? src : {};
                }                // 进行递归，直到属性不再为一个对象或数组
                target[ name ] = jQuery.extend( deep, clone, copy );
            } else if ( copy !== undefined ) {//如果不进行深拷贝且当前obj的属性不为空
                //扩展target对象，且和当前obj属性名相同。
                target[ name ] = copy;
            }
        }
    }
}return target;   最后返回target对象，如果扩展的jquery对象，则返回的就是jquery对象
};

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

• Expand multiple objects to one object;

• Expand multiple objects into one object, and traverse the objects to be expanded to prevent objects with the same attribute name from being overwritten;

• Expand one Object to the jquery object;

• Expand an object to the jquery prototype object.

You can also see later that jq has extended many tool methods to jQuery objects through this method. It has to be said that the structure of jq is still very compact. A method is not only provided for external use,

is also used internally many times