jQueryオブジェクトの拡張 --extend

jquery プラグインを書いたことがある人なら誰でも、jquery が提供する extend を通じて jquery オブジェクトを拡張できることを知っています。また、このメソッドは jquery オブジェクトを拡張するだけでなく、オブジェクトに新しいプロパティやメソッドを追加することもできます。後で紹介します。

さまざまな方法で extend を呼び出す方法も異なります。

• $.extend() を通じて、静的メソッドが拡張されます。

• $.fn.extend() を通じて、インスタンス メソッドが拡張されます。

jQuery プラグインについて書いたことがある人なら誰でも、jQuery オブジェクトにプラグインを追加するために extend を使用することが多いことを知っているはずです。

プラグインの書き方:

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

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

$.extend() と $.fn.extend() は実際には同じ関数を呼び出しますが、実装する関数が異なるのはなぜですか?

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

主な理由は、このメソッドが受信オブジェクトを this に拡張するためです。

$.extend(xx) これは jQuery オブジェクトを指しているため、この時点で拡張されるのは jQuery オブジェクトであり、$.xx を通じて直接呼び出すことができます。

$.fn.extend(xx) これは jQuery オブジェクトのプロトタイプを指しているため、この時点で拡張された jQuery オブジェクトのプロトタイプ、およびインスタンス化された jQuery オブジェクトは、jQuyer プロトタイプのすべてのメソッドを直接呼び出すことができます。 $( ).xx を渡しました。

extend の 3 つの異なる使用法を次に示します:

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，这样同名的属性名就不会被覆盖了。

ソース コード分析を具体的に見てみましょう:

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

extend 関数を通して、extend 関数が多くの if を通じて多くの異なる関数を実装していることがわかります。判断:

• 複数のオブジェクトを 1 つのオブジェクトに拡張し、同じ属性名を持つオブジェクトが上書きされないように拡張するオブジェクトをスキャンします。オブジェクトを jquery オブジェクトに拡張します。

• オブジェクトを jquery プロトタイプ オブジェクトに拡張します。

• また、jq がこのメソッドを通じて多くのツール メソッドを jQuery オブジェクトに拡張していることがわかります。jq の構造は依然として非常にコンパクトであると言わざるを得ません。メソッドは外部使用のために提供されているだけではありません。内部で複数回使用されました