So verwenden Sie selbstausführende JS-Funktionen und jQuery-Erweiterungen

Dieses Mal werde ich Ihnen zeigen, wie Sie selbstausführende JS-Funktionen und jQuery-Erweiterungen verwenden. Welche Vorsichtsmaßnahmen gelten für selbstausführende JS-Funktionen und jQuery-Erweiterungen? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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.

Die selbstausführende Funktion verwendet ein Klammerpaar, um die

anonyme Funktion einzuschließen, und die Klammern (übergebene Parameter) werden sofort ausgeführt. Da die Funktion keinen Namen hat, werden eine absolute Isolierung des Bereichs und Konflikte zwischen Funktionsnamen erreicht. Die Grundform lautet wie folgt:

(function () {
  console.log('do something');
})();

Beispielsweise 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: , wird die selbstausführende Funktion sofort ausgeführt und dann wird die intern definierte Init-Funktion ausgeführt:

Allerdings erschweren die unmittelbaren Ausführungseigenschaften selbstausführender Funktionen 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.

Schauen wir uns zunächst die Grundform der Definition von jQuery-Erweiterungsmethoden an:

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

Auf diese Weise kann die oben definierte Methode über $.myMethod() oder jQuery.myMethod() aufgerufen werden.

Es gibt eine andere Möglichkeit, jQuery-Erweiterungsmethoden zu definieren: .fn

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

Die wie oben definierte Erweiterungsmethode muss über den jQuery-Selektor aufgerufen werden, beispielsweise über den

Tag-Selektor $("button").myMethod(args)

Nachdem wir die selbstausführenden JS-Funktionen und die jQuery-Erweiterungsmethoden verstanden haben, kombinieren wir die beiden.

Im Folgenden verwenden wir die Merkmale der sofortigen Ausführung selbstausführender Funktionen, um jQuery-Erweiterungsmethoden zu definieren:

(function (jq) {
  function init() {
    console.log('do something');
  }
  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

Beachten Sie, dass diese selbstausführende Funktion ein jQuery-Objekt als Parameter empfängt und dann intern eine Erweiterungsmethode myMethod für jQuery definiert, die die eigentliche Logikcode-Init-Funktion

ausführt Rufen Sie an:

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>
 $(function () {
  $.myMethod();
 });
</script>

Hinweis:

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 jQuery-Objekt als Parameter erhält und wird sofort ausgeführt jQuery Definieren Sie eine Erweiterungsmethode myMethod
und dann können wir die Init-Funktion ausführen, indem wir $.meMethod() oder jQuery.myMethod() aufrufen, nachdem die Seite geladen wurde. ​ ​  

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Ausführliche Erläuterung der Verwendung von Ref-Schritten in vue2

vue-resource interceptor zum Festlegen von Header-Informationen Detaillierte Schritt-für-Schritt-Erklärung

Ajax-Sendemethode für asynchrone Anfragen implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie selbstausführende JS-Funktionen und jQuery-Erweiterungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!