Schrieb die gleiche Variable für mehrere Ereignisse mit Bindungswert selbst

Question

Sagen wir, wir haben 2 Variable, die in mehreren Ereignissen verwenden.

Aber jede Variable nimmt Wert vom Ereignis selbst.

Zum Beispiel

$('#el1').click(function() { 
    var a = $('#inp').val(); //same as a below event 
    var b = $(this).attr('for'); //same as b below event 
    data = { c1 : a, c2 : b }; 
}); 

$('#el2').click(function() { 
    var a = $('#inp').val(); // same as a above event 
    var b = $(this).attr('for'); // same as b above event 
    data = { f1 : a, f2 : b }; 
}); 

In obigem Code, die gleiche Variable für einige Ereignisse geschrieben. Jede Variable hat dasselbe Elementattribut, aber auch bindet einen anderen Wert, weil die Variable in ein anderes Ereignis eingefügt wird.

Sie wissen, wir brauchen nur dieselbe Variable auf einmal geschrieben. ohne dieselbe Variable zweimal in it-Ereignissen zu machen.

Dann wie ..?

Answer 1

Wenn Sie dies tun möchten, müssen Sie globale Variablen verwenden. This erläutert die Regeln für den JavaScript-Variablenbereich.

Im Allgemeinen sollten globale Variablen sparsam verwendet werden, um zu vermeiden, dass sie im Code durcheinander geraten. Außerdem gibt es Probleme mit dem, was Sie tun möchten.

Schauen wir zuerst b. Sie denken, dass sie die "gleiche Variable" sind. Aber sie sind nicht: this bezieht sich auf el1 in Ihrem ersten Ereignis, und es bezieht sich auf el2 in Ihrem zweiten Ereignis. Also, nur weil Sie sie mit demselben Code definieren, werden sie nicht den gleichen Wert haben. Sie müssen sie getrennt halten.

Nun nehmen wir Sie für a eine globale Variable erstellen tun, wie folgt aus:

var a = $('#inp').val(); 

$('#el1').click(function() { 
    var b = $(this).attr('for'); 
    data = { c1 : a, c2 : b }; 
}); 

$('#el2').click(function() { 
    var b = $(this).attr('for'); // same as b above event 
    data = { f1 : a, f2 : b }; 
}); 

Wenn Sie das tun, a wird den Wert Ihres inp Element am Zeitpunkt gleich, dass Sie die erklären Variable. Dieser Wert hat sich bis zu dem Zeitpunkt geändert, an dem Sie Ihr click Ereignis ausgelöst haben. Sie werden also einen Fehler haben, der sehr schwer zu finden sein wird, wenn Sie dies nicht verstehen.

Wenn Sie wirklich wollen, können Sie eine globale Variable wie folgt tun:

var a = $('#inp'); 

und dann in Ihrem Handler:

data = { c1 : a.val(), c2 : b } 

Dies wird zu Ihrem inp Element, da die Referenz arbeiten wird bleiben gleich, solange die Seite läuft. Aber val() wird sich ändern, so dass Sie es nicht einschließen können.

Während es einige Prozessorarbeit speichert, um zu vermeiden, das Element mehrfach zu erhalten, indem es einen Verweis auf es in einer Variablen speichert, müssen Sie gegen das Hinzufügen von Komplikationen zu Ihrem Code ausgleichen. Der Entwicklungsaufwand kann viel teurer sein als der Leistungsaufwand. (Wenn das nicht wahr wäre, würde niemand jQuery verwenden, da einfach altes Javascript schneller läuft und weniger Platz einnimmt.) Aus diesem Grund empfehle ich nicht, dies zu tun. Der einzige Grund, warum es sinnvoll ist, Ihre Variablen a und b überhaupt zu verwenden, ist, dass die Zeile, die Ihre data-Variable zuweist, leichter zu lesen ist. Daher ist es am besten, sie so zu lassen, wie sie sind.

Die beste Zeit, um eine Eigenschaft eines DOM-Elements in einer Variablen zu speichern, ist, wenn Sie in einer Schleife darauf verweisen, und es ändert sich nicht, während Sie sich in dieser Schleife befinden. In diesem Fall würde ich sagen, dass es die beste Vorgehensweise ist, dies zu tun.