Dieser Artikel stellt hauptsächlich selbstausführende Funktionen von JavaScript und jQuery-Erweiterungsmethoden im Detail vor. Ich hoffe, dass er für alle hilfreich ist.
Normalerweise schreiben wir den JS-Code in eine separate JS-Datei und fügen die Datei dann in die Seite ein. Manchmal treten jedoch nach der Einführung Probleme mit Variablennamen oder Funktionsnamen auf, die mit anderen JS-Codes in Konflikt stehen. Wie kann man dieses Problem lösen? Bereichsisolierung. In JS wird der Bereich nach Funktionen unterteilt, um das Problem von Konflikten zwischen Variablennamen und Funktionsnamen zu vermeiden. Dies ist jedoch nicht sicher, da sich die gekapselte Funktion selbst mit anderen Funktionen überschneiden kann -ausführende Funktion.
Eine selbstausführende Funktion ist eine anonyme Funktion, die in ein Paar Klammern eingeschlossen ist (Übergabe von Parametern), um sie sofort auszuführen. Da die Funktion keinen Namen hat, werden eine absolute Isolierung des Bereichs und Konflikte zwischen Funktionsnamen erreicht. Die Grundform ist wie folgt:
(function () {
console.log('do something');
})();Zum Beispiel haben wir etwas JS-Logik in die Datei custome.js geschrieben und sie in die Funktion init gekapselt. Wir umschließen die selbstdefinierte Funktion init mit einer selbstausführenden Funktion, wie unten gezeigt.
(function () {
function init() {
console.log('execute init...');
}
init();
})();Wenn wir custome.js in HTML einführen: , die selbstausführende Funktion Wird sofort ausgeführt und führt dann die intern definierte Init-Funktion aus:
Die Eigenschaften der sofortigen Ausführung selbstausführender Funktionen erschweren jedoch den Aufruf. Durch die Definition von jQuery-Erweiterungsmethoden können Sie dieses Problem lösen und die Initiative ergreifen, selbstausführende Funktionen aufzurufen und auszuführen.
Zunächst betrachten wir die Grundform der Definition von jQuery-Erweiterungsmethoden:
jQuery.extend({
'myMethod': function () {
console.log('do something');
}
});Auf diese Weise über $.myMethod() oder jQuery. myMethod() Sie können die oben definierte Methode aufrufen.
Es gibt eine andere Möglichkeit, jQuery-Erweiterungsmethoden zu definieren: .fn
jQuery.fn.extend({
'myMethod': function () {
console.log('do something');;
}
});Die auf die oben beschriebene Weise definierte Erweiterungsmethode muss den jQuery-Selektor übergeben Aufruf, beispielsweise über den Tag-Selektor $("button").myMethod(args)
Nachdem wir die selbstausführenden JS-Funktionen und die jQuery-Erweiterungsmethoden verstanden hatten, kombinierten wir die beiden.
Im Folgenden verwenden wir die Funktion der sofortigen Ausführung der selbstausführenden Funktion, um die jQuery-Erweiterungsmethode zu definieren:
(function (jq) {
function init() {
console.log('do something');
}
jq.extend({
'myMethod': function () {
init();
}
})
})(jQuery);Erklärung, diese selbstausführende Funktion Die ausführende Funktion empfängt das jQuery-Objekt als Parameter und definiert dann intern eine Erweiterungsmethode myMethod für jQuery, die den eigentlichen Logikcode der Init-Funktion ausführt.
Aufruf:
<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>
$(function () {
$.myMethod();
});
</script>Beschreibung:
Nachdem die jQuery-Datei eingeführt wurde, ist das jQuery-Objekt global verfügbar.
Die benutzerdefinierte JS-Datei custome.js wird dann eingeführt, in der die selbstausführende Funktion das erhält jQuery-Objekt als Parameter, wird sofort ausgeführt und intern für jQuery definiert. Eine Erweiterungsmethode myMethod
Dann können wir die Init-Funktion ausführen, indem wir $.meMethod() oder jQuery.myMethod() aufrufen, nachdem die Seite geladen ist.
Verwandte Empfehlungen:
Selbstausführende Funktionen in JS-Funktionen
Vergleich verschiedener Schreibweisen für selbstausführende js-Funktionen_Javascript-Fähigkeiten
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der selbstausführenden JavaScript-Funktionen und der jQuery-Erweiterungsmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
