Mir wurde gesagt, dass ich öffentliche Variablen und Konflikte vermeiden soll. Es ist besser, das gesamte Plugin in einer anonymen Funktion zu platzieren. Ich habe versucht, dies zu tun, aber Funktionen funktionieren nicht mehr.
Hier ist ein einfaches Beispiel:
(function($) {
function changeIt() {
$("button").text("off");
}
}(jQuery));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeIt()">On</button>Die Funktion wird von einem HTML-Element ausgeführt. Da sie sich jedoch in einer anderen Funktion befindet, kann das Element sie nicht finden.
1- Wie kann ich es zum Laufen bringen?
2- Ist es ein guter Ansatz, um sicherzustellen, dass öffentliche Variablen abgedeckt und als private angenommen werden?
Vielen Dank
5 Antworten
Inline-Ereignisse, die für Elemente definiert wurden, haben nur Zugriff auf den globalen Bereich. Wenn Sie diese Funktion aus dem globalen Bereich in den von der anonymen Funktion erstellten Bereich verschoben haben, war sie für das Inline-Ereignis nicht mehr zugänglich.
Sie haben zwei Möglichkeiten:
Verwenden Sie keine Inline-Ereignisse mehr
(function($) {
function changeIt() {
$("button").text("off");
}
$("button").click(changeIt);
}(jQuery));
Oder definieren Sie es global
//(function($) {
function changeIt() {
$("button").text("off");
}
//}(jQuery));
Dies hat mit dem Umfang zu tun. Die Funktion changeIt existiert nur innerhalb der Funktion ($). Wenn Sie es dem öffentlichen Bereich hinzufügen möchten, ist es am besten, ein Objekt als Prototyp der Funktionen zu erstellen.
Dies liegt daran, dass sich die Funktion nicht mehr im globalen Objekt befindet und der Ereignishandler onclick im HTML-Element sie daher nicht nach Namen finden kann.
Ändern Sie Ihr HTML in
<button id="mybutton">On</button>
Und dein Code an
(function($) {
$("#mybutton").click(function(){
$("#mybutton").text("off");
});
}(jQuery));
Und es wird funktionieren, weil der Handler nicht namentlich nachgeschlagen werden muss
Da changeIt nicht im globalen Bereich gefunden wird (window im Fall eines Browsers), wird die Funktion nicht mit einem Klick ausgelöst. Tatsächlich sollte Ihre Konsole eine Ausnahme anzeigen wie: "Nicht erfasster Referenzfehler: changeIt ist nicht definiert".
Um dies zu beheben und Ihre Funktionsstruktur beizubehalten, legen Sie den Handler im Handler "onload" fest:
(function($) {
$('#myBtn').on('click', function () {
$("button").text("off");
});
}(jQuery));<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myBtn">On</button>(function($) {}(jQuery)); -> Dadurch wird ein privater Bereich erstellt. Grundsätzlich wird Ihre Funktion nicht in window, sondern in diesem privaten Bereich definiert.
<button onclick="changeIt()">On</button> -> Dies versucht, changeIt von window auszuführen, was undefined sein wird.