So erweitern Sie Mitgliedsvariablen beim Erweitern von jQuery-Objekten und implementieren it_jquery

Schauen wir uns zunächst einen Code an:

Kopieren Sie den Code Der Code lautet wie folgt:

jQuery.fn.extend(
{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this.myOwnMember; }
}
$("body").myOwnMember; //3
$("body").getMyOwnMember();
$("body" ).setMyOwnMember(4); //4
$("body").getMyOwnMember(); //3


Dieser Code erweitert ein Mitglied myOwnMember Zum jQuery-Objekt zwei Die Funktionen getMyOwnMember und setMyOwnMember werden verwendet, um den Wert von myOwnMember zurückzugeben bzw. festzulegen. Aber wir sehen, dass setMyOwnMember nicht funktioniert. Wenn wir MyOwnMember erneut abrufen, wird der Anfangswert zurückgegeben. Warum ist das so? Der Grund dafür ist, dass $("body") jedes Mal ein neues Objekt erstellt, sodass myOwnMember in $("body") jedes Mal der Anfangswert ist. Wenn wir den Code ändern in:

Kopieren Sie den Code Der Code lautet wie folgt:

jQuery .fn.extend (

{
myOwnMember: 3,
getMyOwnMember: function () { return this.myOwnMember; },
setMyOwnMember: function (v) { this.myOwnMember = v; return this .myOwnMember; }
}
var body = $("body"); //3
body.getMyOwnMember(); 3
body.setMyOwnMember(4); //4
body.getMyOwnMember(); //4


Dies ist der Effekt, den wir wollen, weil nur $("body") Es wird einmal erstellt und alle nachfolgenden Referenzen erfolgen über die Body-Variable. Bei der tatsächlichen Verwendung weist diese Methode jedoch immer noch Probleme auf, da es für mich unmöglich ist, auf die Body-Variable im globalen Bereich zu verweisen. In diesem Fall verwende ich immer noch $("body"), um den DOM-Knoten abzurufen. Wie können wir eine Was ist mit dem Wert der jQuery-Objekterweiterungsvariablen speichern? Die Lösung besteht darin, dass wir die Variablen nicht auf dem jQuery-Objekt, sondern auf dem Dom-Knoten speichern. Egal wie viele jQuery-Objekte auf einem Dom-Knoten erstellt werden, sie verweisen alle auf denselben Dom-Knoten. Also ändern wir den Code wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt: jQuery.fn. extension( { getMyOwnMember: function () { return this[0].myOwnMember; },

setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0]. myOwnMember; }

}
$("body").getMyOwnMember(); //undefiniert
$("body").setMyOwnMember(4 ); //4
$("body").getMyOwnMember(); //4