Detaillierte Erläuterung der Methoden „extend()' und „fn.extend()' in jQuery

Heim

Web-Frontend

js-Tutorial

Detaillierte Erläuterung der Methoden „extend()' und „fn.extend()' in jQuery_jquery

May 16, 2016 pm 03:56 PM

jquery

Diese beiden Methoden verwenden denselben Code. Eine wird zum Zusammenführen von Eigenschaften und Methoden für jQuery-Objekte oder gewöhnliche Objekte verwendet. Hier sind einige Beispiele für die grundlegende Verwendung

Der HTML-Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

<!doctype html>

<html>

<Kopf>

<title></title>

</head>

<body>

<img src=''/>

</body>

</html>

Schreiben Sie unten die Verwendung in js:

Zwei gewöhnliche Objekte zusammenführen

Code kopieren Der Code lautet wie folgt:

//Attribute für zwei gewöhnliche Objekte zusammenführen

var obj1={name:'Tom',age:22};

var obj2={name:'Jack',height:180};

console.log($.extend(obj1,obj2)); //Objekt {Name: „Jack“, Alter: 22, Größe: 180}

Eigenschaften oder Methoden zu jQuery-Objekten hinzufügen

Code kopieren Der Code lautet wie folgt:

$.extend({hehe:function(){alert('hehe');}});

$.hehe(); //alert('hehe')

Diese Verwendung ist sehr wichtig für das Hinzufügen von Instanzeigenschaften und -methoden sowie von Prototypeigenschaften und -methoden. Es handelt sich auch um die Methode zum Schreiben von jQuery-Plugins Methode in jQuery 1.7.1, um ihre eigenen Methoden und Eigenschaften zu erweitern

Code kopieren Der Code lautet wie folgt:

jQuery.extend({

noConflict: function( deep ) {

            if ( window.$ === jQuery ) {

               Fenster.$ = _$;

}

If ( deep && window.jQuery === jQuery ) {

               window.jQuery = _jQuery;

}

         jQuery zurückgeben;

},

// Ist das DOM einsatzbereit? Auf true setzen, sobald es auftritt.

isReady: false,

// Ein Zähler, um zu verfolgen, auf wie viele Artikel vorher gewartet werden muss

// Das Ready-Ereignis wird ausgelöst. Siehe #6781

bereitWarten: 1,

.....

In diesem Beispiel wird nur ein Objektparameter übergeben, daher wird dieser standardmäßig als das zusammenzuführende und zu ändernde Objekt betrachtet

Eigenschaften oder Methoden zu jQuery-Objektinstanzen hinzufügen

Code kopieren Der Code lautet wie folgt:

//Erweitertes Zusammenführen für jQuery-Instanzen

console.log($('img').extend({'title':'img'}));//[img, img#img.img, prevObject: jQuery.fn.jQuery.init[1], context : Dokument, Selektor: „img“, Titel: „img“, Konstruktor: Funktion…]

Fügen Sie nur die zusammenzuführenden Objekte zusammen und ändern Sie sie nicht.

Code kopieren Der Code lautet wie folgt:

var obj1={name:'Tom',age:22};

var obj2={name:'Jack',height:180};
console.log($.extend(obj1,obj2)); //Objekt {Name: „Jack“, Alter: 22, Größe: 180}
console.log(obj1); //Objekt {Name: „Jack“, Alter: 22, Größe: 180}

Standardmäßig wird das zusammenzuführende Objekt wie das zurückgegebene Ergebnis geändert. Wenn Sie nur ein zusammengeführtes Objekt erhalten, aber keines der ursprünglichen Objekte zerstören möchten, können Sie diese Methode verwenden

Code kopieren Der Code lautet wie folgt:

var obj1={name:'Tom',age:22};

var obj2={name:'Jack',height:180};

var empty={};

console.log($.extend(empty,obj1,obj2)); //Objekt {Name: „Jack“, Alter: 22, Größe: 180}

console.log(obj1); //Objekt {Name: „Tom“, Alter: 22}

Bei Verwendung rekursives Zusammenführen oder Deep Copy

Code kopieren Der Code lautet wie folgt:

var obj1={name:'Tom',love:{drink:'milk',eat:'bread'}};

var obj2={name:'Jack',love:{drink:'water',sport:'football'}};

console.log(($.extend(false,obj1,obj2)).love); //Object {drink: "water", sport: "football"}

console.log(($.extend(true,obj1,obj2)).love); //Object {drink: „water“, eat: „bread“, sport: „football“}

Detaillierte Informationen zur Verwendung finden Sie im Referenzhandbuch http://www.w3cschool.cc/manual/jquery/

Lassen Sie uns analysieren, wie es im 1.7.1-Quellcode implementiert ist:

Code kopieren Der Code lautet wie folgt:

jQuery.extend = jQuery.fn.extend = function() {

var-Optionen, Name, Quelle, Kopie, copyIsArray, Klon,

target = arguments[0] ||. {},

i = 1,

length = arguments.length,

tief = falsch;

...

}

Zunächst wird ein Satz von Variablen definiert. Da die Anzahl der Parameter unsicher ist, wird das Argumentobjekt direkt aufgerufen, um auf die übergebenen Parameter zuzugreifen

Variablenoptionen: Zeigt auf ein Quellobjekt.
Variablenname: Stellt einen Attributnamen eines Quellobjekts dar.
Variable src: Stellt den ursprünglichen Wert eines Attributs des Zielobjekts dar.
Variablenkopie: Stellt den Wert eines Attributs eines Quellobjekts dar.
Variable copyIsArray: Gibt an, ob die Variablenkopie ein Array ist.
Variablenklon: Stellt den Korrekturwert des Originalwerts beim Tiefenkopieren dar.
Variables Ziel: zeigt auf das Zielobjekt.
Variable i: repräsentiert den Startindex des Quellobjekts.
Variablenlänge: Gibt die Anzahl der Parameter an und wird zum Ändern des Variablenziels verwendet.
Variable tief: Gibt an, ob eine tiefe Kopie durchgeführt werden soll. Der Standardwert ist falsch.

Um die Code-Implementierung besser zu verstehen, finden Sie hier oben ein Beispiel zur Demonstration, um die Ausführung des Quellcodes zu beobachten

Code kopieren Der Code lautet wie folgt:

var obj1={name:'Tom',love:{drink:'milk',eat:'bread'}};

var obj2={name:'Jack',love:{drink:'water',sport:'football'}};

$.extend(true,obj1,obj2)

Quellcode-Analyse

Code kopieren Der Code lautet wie folgt:

// Bewältigen Sie eine Deep-Copy-Situation

If ( typeof target === "boolean" ) {

tief = Ziel;

target = arguments[1] ||. {};

// den Booleschen Wert und das Ziel überspringen

i = 2;

}

Bestimmen Sie, ob es sich um eine tiefe Kopie handelt. Wenn der erste Parameter ein boolescher Wert ist, geben Sie den Wert des ersten Parameters an und verwenden Sie dann den zweiten Parameter als Zielobjekt. Weisen Sie es einem leeren Objekt zu, ändern Sie den Index des Quellobjekts auf 2. In diesem Beispiel wird dies getan, weil der erste Parameter wahr ist und dann tief in den zweiten Parameter geändert wird ist obj1. Der Startindex des Quellobjekts ist 2, was bedeutet, dass mit dem dritten als Quellobjekt begonnen wird, das in diesem Beispiel obj2

ist.

Code kopieren Der Code lautet wie folgt:

// Groß- und Kleinschreibung behandeln, wenn das Ziel ein String oder etwas anderes ist (möglich in tiefer Kopie)

If ( typeof target !== "object" && !jQuery.isFunction(target) ) {

Ziel = {};

}

Das Hinzufügen benutzerdefinierter Attribute ist für Nicht-Objekt- und Funktionsdatentypen ungültig. Beispielsweise können Zeichenfolgen ihre eigenen Methoden und Attribute aufrufen.

Code kopieren Der Code lautet wie folgt:

// jQuery selbst erweitern, wenn nur ein Argument übergeben wird

If (length === i ) {

target = this;

​​​​—i;

}

Wenn das Längenattribut gleich dem Wert von i ist, bedeutet dies, dass es kein Zielobjekt gibt. Unter normalen Umständen sollte die Länge größer als der Wert von i sein. Verwenden Sie dies dann als Zielobjekt und reduzieren Sie es den i-Wert um eins, um den Längenwert zu erreichen, der größer als der i-Wert ist (1 größer als i)

Dies ist das Implementierungsprinzip der jQuery-Methode zum Erweitern von Attributen auf sich selbst, solange das Zielobjekt nicht in

übergeben wird

Zwei mögliche Situationen: $.extend(obj) oder $.extend(false/true,obj);

Code kopieren Der Code lautet wie folgt:

    für ( ; i < Länge; i ) {

        // Nur mit Nicht-Null-/undefinierten Werten umgehen

        if ( (options = arguments[ i ]) != null ) {

            // Erweitern Sie das Basisobjekt

            für (Name in Optionen) {

                src = target[ name ];

                copy = Optionen[Name];

                // Endlose Schleife verhindern

                if ( target === copy ) {

                    weiter;

                }

                // Rekursion, wenn wir einfache Objekte oder Arrays zusammenführen

                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                    if ( copyIsArray ) {

                        copyIsArray = false;

                        clone = src && jQuery.isArray(src) ? src: [];

                    } sonst {

                        clone = src && jQuery.isPlainObject(src) ? src : {};

                    }

                    // Originalobjekte niemals verschieben, sondern klonen

                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Keine undefinierten Werte einbringen

                } else if ( copy !== undefiniert ) {

                    target[ name ] = copy;

                }

            }

        }

    }

这个部分就是此方法的核心了,从arguments对象的第i个下标值开始循环操作首先过滤掉源对象是null或者是undefiniert的情况可以看到其实

源对象不一定真的就是对像,也可以是其他类型的值比如字符串比如这样写:

复制代码代码如下:

console.log($.extend({'name':'tom'},'aa'));   //Objekt {0: „a“, 1: „a“, Name: „tom“}

是不是感觉很奇怪啊？究竟是怎么实现的呢？下面接着看

过滤完之后开始进行for循环 src保存的是目标对象的某个键的值, copy属性保存的源对象的某个键的值，这两个键都是一样的

复制代码代码如下:

// Endlose Schleife verhindern

If (target === copy) {

                         weiter;

                }

Wenn ein bestimmter Attributwert des Quellobjekts das Zielobjekt ist, kann dies zu einer Endlosschleife und zum Absturz des Programms führen. Daher wird hier eine Einschränkung vorgenommen, um das Überspringen dieser Schleife zu ermöglichen. Beispiel:

Code kopieren Der Code lautet wie folgt:

var o = {};

o.n1 = o;

$.extend( true, o, { n2: o } );

// Ausnahme auslösen: 

// Nicht erfasster RangeError: Maximale Aufrufstapelgröße überschritten

Aber dies wird sich auch ungerechtfertigterweise auf einige normale Situationen auswirken, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

var obj1={a:'a'}

var obj2={a:obj1};

console.log($.extend(obj1,obj2)); //Object {a: "a"}

Diese Situation stellt auch sicher, dass der Quellobjektwert dem Zielobjekt entspricht, es stellt sich jedoch heraus, dass der Attributwert von a von obj1 nicht geändert wurde, da continue ausgeführt wird. Kommentieren Sie diesen Absatz unten in der Quelle aus Code vor der Ausführung von

Code kopieren Der Code lautet wie folgt:

Objekt {a: Objekt}

Zu diesem Zeitpunkt wurde es normalerweise geändert. Ich persönlich bin der Meinung, dass dieser Bereich verbessert werden muss

Dann gibt es ein if-Urteil, das darin besteht, zu unterscheiden, ob es sich um eine tiefe Kopie handelt. Schauen Sie sich zunächst nicht die tiefe Kopie an, sondern zuerst die allgemeine

Code kopieren Der Code lautet wie folgt:

target[ name ] = copy;

Solange die Kopie einen Wert hat, wird sie direkt auf das Zielobjekt kopiert. Auf diese Weise wird die Zusammenführung erreicht.

Nach der for-Schleife wird das neue Zielobjekt zurückgegeben, sodass das Zielobjekt endgültig geändert wird und das Ergebnis mit dem zurückgegebenen Ergebnis übereinstimmt.

Code kopieren Der Code lautet wie folgt:

// Das geänderte Objekt zurückgeben

Ziel zurückgeben;

};

Lassen Sie uns darüber sprechen, wie man mit Deep Copy umgeht

Stellen Sie zunächst sicher, dass Deep wahr ist, die Kopie einen Wert hat und ein Objekt oder Array ist (wenn es sich nicht um ein Objekt oder Array handelt, kommt Deep Copy nicht in Frage) und dann wird es von Arrays und Objekten verarbeitet Zuerst am Array:

Code kopieren Der Code lautet wie folgt:

if ( copyIsArray ) {
copyIsArray = false;
clone = src && jQuery.isArray(src) ?
} sonst { clone = src && jQuery.isPlainObject(src) ? }

Wenn der Wert des Arrays copyIsArray wahr ist, ändern Sie den Wert für das Quellobjektattribut der aktuellen Schleife. Wenn dies der Fall ist, beurteilen Sie, ob dies der Fall ist Wenn ja, ist es das Original. Wenn das Array unverändert bleibt, wird es zu einem Array, denn da das aktuelle Attribut des Quellobjekts das Array ist, muss das letzte Zielelement auch ein Array sein. Entweder ein Array oder ein Objekt. Ändern Sie die aktuellen Eigenschaften des Zielobjekts in ein Objekt.

Code kopieren Der Code lautet wie folgt: // Originalobjekte niemals verschieben, sondern klonen

Target[ name ] = jQuery.extend( deep, clone, copy );

Führen Sie dann rekursiv den aktuellen Attributwert des Quellobjekts (bei dem es sich um ein Array oder Objekt handelt) und das aktuelle Attribut des geänderten Zielobjekts zusammen und weisen Sie das zurückgegebene neue Array oder Objekt dem Zielobjekt zu, um letztendlich ein tiefes Kopieren zu erreichen.

Aber es gibt hier ein ziemlich seltsames Phänomen, wie dieses:

Code kopieren Der Code lautet wie folgt:

console.log($.extend({a:1},'aa')); //Objekt {0: "a", 1: "a", a: 1}

Das ursprüngliche Quellobjekt ist nicht unbedingt das Objekt e, und die Zeichenfolge kann geteilt und mit dem Zielobjekt zusammengeführt werden. Es stellt sich heraus, dass die for...in-Schleife mit Zeichenfolgen arbeitet

Code kopieren Der Code lautet wie folgt:

var str='aa';

for(var name in str){ 

console.log(name);

console.log(str[name])

}

Dies ist auch möglich, es wird die Zeichenfolge aufteilen und entsprechend dem numerischen Index lesen, jedoch im Quellcode

Code kopieren Der Code lautet wie folgt:

if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) )

ist auf Arrays und Objekte beschränkt. Hat es also beim Deep Copying keine Auswirkung?

Nach meinem Test ist auch Deep Copying möglich, da der kopierte Wert im Quellcode in eine anonyme Funktion umgewandelt wurde

Alert(jQuery.isPlainObject(copy)); //true

Warum es sich um eine Funktion handelt, habe ich noch nicht herausgefunden und werde es später der Lösung überlassen!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn