Regardons d'abord un morceau de code :
jQuery.fn.extend(
{
myOwnMember : 3,
getMyOwnMember : function () { return this.myOwnMember; },
setMyOwnMember : function (v) { this.myOwnMember = v; return this.myOwnMember; }
}
$("body").myOwnMember; //3
$("body").getMyOwnMember( //3);
$("body" ).setMyOwnMember(4); //4
$("body").getMyOwnMember(); //3
Ce code étend un membre myOwnMember à l'objet jQuery, deux fonctions getMyOwnMember et setMyOwnMember sont utilisées respectivement pour renvoyer et définir la valeur de myOwnMember. Mais nous voyons que setMyOwnMember ne fonctionne pas. Lorsque nous récupérons MyOwnMember, la valeur initiale est renvoyée. Pourquoi est-ce ? La raison en est que $("body") crée un nouvel objet à chaque fois, donc myOwnMember dans $("body") est la valeur initiale à chaque fois. Si on change le code en :
jQuery .fn.extend (
{
myOwnMember : 3,
getMyOwnMember : function () { return this.myOwnMember; },
setMyOwnMember : function (v) { this.myOwnMember = v; renvoie ceci .myOwnMember; }
}
);
var body = $("body"); //3
body.getMyOwnMember( //); 3
body.setMyOwnMember(4); //4
body.getMyOwnMember(); //4
C'est l'effet que nous voulons, car $("body") seulement Il est créé une seule fois et toutes les références ultérieures sont effectuées via la variable body. Cependant, cette méthode pose toujours des problèmes en utilisation réelle, car il m'est impossible de référencer la variable body dans la portée globale. Dans de nombreux cas, j'utilise toujours $("body") pour obtenir le nœud DOM. comment pouvons-nous enregistrer une variable d'extension d'objet jQuery ? La solution est que nous ne sauvegardons pas les variables sur l'objet jQuery, mais sur le nœud dom. Peu importe le nombre d'objets jQuery créés sur un nœud dom, ils pointent tous vers le même nœud dom. On change donc le code comme suit :
jQuery.fn. extend(
{
getMyOwnMember: function () { return this[0].myOwnMember; },
setMyOwnMember: function (v) { this[0].myOwnMember = v; return this[0]. myOwnMember; }
}
);
$("body").getMyOwnMember(); ); //4
$("body").getMyOwnMember(); //4