Extension de l'objet jQuery --extend

Quiconque a écrit un plug-in jquery sait que l'objet jquery peut être étendu via l'extension fournie par jquery, et cette méthode peut non seulement étendre l'objet jquery, mais également ajouter de nouvelles propriétés et méthodes à un objet. sera discuté plus tard.

Les méthodes d'appel de extend de différentes manières sont également différentes :

• Ce qui est étendu via $.extend() est une méthode statique ;

• Ce qui est étendu via $.fn.extend() est la méthode d'instance.

Quiconque a écrit des plug-ins jQuery doit savoir que nous utilisons souvent extend pour ajouter des plug-ins aux objets jQuery.

Comment écrire le plug-in :

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

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

$.extend() et $.fn.extend() appellent en fait la même fonction, alors pourquoi les fonctions qu'ils implémentent sont-elles différentes ?

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

Principalement parce que cette méthode étend l'objet entrant à ceci.

Le this de $.extend(xx) pointe vers l'objet jQuery, donc ce qui est étendu à ce moment est l'objet jQuery, qui peut être appelé directement via $.xx.

Le this de $.fn.extend(xx) pointe vers le prototype de l'objet jQuery, donc le prototype de l'objet jQuery étendu à ce moment et l'objet jQuery instancié peuvent appeler toutes les méthodes sur le prototype jQuyer . Appelez directement via $().xx.

Voici trois utilisations différentes de 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，这样同名的属性名就不会被覆盖了。

Voir le code source pour plus de détails Analyse :

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对象
};

Grâce à la fonction extend, on peut voir que la fonction extend implémente de nombreuses fonctions différentes à travers de nombreux jugements if :

• Développez plusieurs objets sur un objet ;

• Développez plusieurs objets en un seul objet et parcourez les objets à étendre pour éviter que les objets portant le même nom d'attribut ne soient écrasés

• Étend un objet à l'objet jquery

• Étend un objet à l'objet prototype jquery.

Vous pourrez également voir plus tard que jq a étendu de nombreuses méthodes d'outils aux objets jQuery via cette méthode. Il faut dire que la structure de jq n'est pas encore très compacte. uniquement prévu pour un usage externe, également utilisé plusieurs fois en interne