5 verschiedene Möglichkeiten, Funktionen in JQuery zu deklarieren

In diesem Artikel untersuchen wir verschiedene Möglichkeiten, einen Block der JavaScript -Funktionalität zu definieren.

Auswählen, in welchem ​​Weg eine JavaScript -Funktion deklariert werden kann, kann für Anfänger verwirrend sein, und es gibt verschiedene Syntaxoptionen. Jedes hat Vor-, Nachteile und angemessene Verwendungen, die Sie herausholen können.

1. Reguläre JavaScript -Funktionen

Die erste und offensichtlichste Möglichkeit, eine Funktion in JavaScript zu deklarieren, besteht darin, eine Funktionserklärung zu verwenden. Eine Funktion namens Multiply (), die zwei Parameter x und y nimmt, multipliziert sie und gibt den Wert mit der folgenden Syntax implementiert werden:

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

Auf diese Weise definierte

-Funktionen (eine Funktionserklärung) sind auf die Spitze des aktuellen Bereichs gehoben. Die Konsole.log () könnte vor der Funktion platziert werden und würde noch funktionieren.

2. JavaScript -Funktionsausdrücke

Die gleiche Funktion kann als Ausdruck geschrieben werden, der explizit eine Variable festlegt, wie im folgenden Beispiel gezeigt:

<span>const multiply = function(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

Die Funktion wird nicht gehoben, sodass sie erst nach der Definition verwendet werden kann.

3. Objektliteralmethodendefinitionen

Funktionen werden gleich behandelt wie bei jedem anderen Werttyp in JavaScript, sodass Sie eine in einem anderen Objekt definieren können. Zum Beispiel:

<span>const mathLib = {
</span>
  <span>// property
</span>  <span>PI: 3.14,
</span>
  <span>// multiply(x,y) method
</span>  <span>multiply: function(x<span>, y</span>) {
</span>    <span>return x * y;
</span>  <span>},
</span>
  <span>// divide(x,y) method
</span>  <span>divide: function(x<span>, y</span>) {
</span>    <span>return x / y;
</span>  <span>}
</span>
<span>}
</span>
<span>console.log( mathLib.multiply(2, 2) );
</span><span>// output: 4
</span>

wieder kann diese Objektmethode nur aufgerufen werden, nachdem sie definiert wurde.

4. ES2015 Pfeilfunktionen

Pfeilfunktionen erfordern nicht das Schlüsselwort für Funktionsfunktion, können jedoch nur einer Variablen oder anonym verwendet werden (z. B. in einem Rückruf- oder Ereignishandler). Die in abgerundeten Klammern (()) eingeschlossenen Parameter folgen von einem Pfeil (=>), um eine Funktion im nächsten Codeblock zu bezeichnen:

<span>const multiply = (x<span>, y</span>) => { return x * y; };
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

Da wir nur eine Aussage haben, ist die Rückgabe implizit und die Klammern können für die identische Funktionalität mit einer kürzeren Syntax weggelassen werden:

<span>const multiply = (x<span>, y</span>) => x * y;
</span>

In Fällen, in denen die Funktion einen einzelnen Parameter hat, können diese Klammern auch entfernt werden:

<span>const square = x => x ** 2;
</span>

Obwohl für einen einzelnen Parameter noch Klammern erforderlich sind:

<span>const estimatePI = () => 22 / 7;
</span>

Pfeilfunktionen weisen dies automatisch dem Wert im unmittelbaren äußeren Bereich zu, sodass keine .bind (this) verwendet werden muss.

5. JQuery -Erweiterungsfunktionen

jQuery ist eine JavaScript -Bibliothek, daher ist das Erstellen von Funktionen ähnlich. Die Funktionalität von JQuery kann jedoch durch Hinzufügen Ihrer eigenen benutzerdefinierten Methoden erweitert werden. Die Methode jQuery.fn.extend () erweitert das Objekt JQuery Prototype ($ .fn), so

Zum Beispiel definiert der folgende Code neue Überprüfungen und Deaktivierung von JQuery -Methoden, um das Kontrollkästchen -Eingangsfelder zu ändern:

<span>function multiply(x<span>,y</span>) {
</span>  <span>return x * y;
</span><span>}
</span>
<span>console.log( multiply(2, 2) );
</span><span>// output: 4
</span>

funktional

Funktionssyntax ist häufig eine Frage der persönlichen Präferenz, aber versuchen Sie, sicherzustellen, dass Ihr Code lesbar bleibt. Es ist vielleicht besser, eine Funktionserklärung zu verwenden, als sich in ein paar Wochen mit einem cleveren, aber unlesbaren Mishmash von Pfeilen und Klammern zu verwirren.

häufig gestellte Fragen (FAQs) zur Deklaration von JQuery -Funktionen

Was ist eine JQuery -Funktionserklärung? Diese Funktionen können verwendet werden, um bestimmte Aufgaben auszuführen, das DOM zu manipulieren oder mit Elementen auf einer Webseite zu interagieren. Verwenden Sie die $ .fn -Syntax, gefolgt vom Funktionsnamen. Zum Beispiel:

> $. >

Ja, Sie können JQuery -Funktionen außerhalb der Funktion von $ (Dokument) deklarieren. Es ist jedoch eine gute Praxis, Funktionen innerhalb der Funktion $ (document) zu definieren. 🎜>

Sobald Sie eine JQuery -Funktion deklariert haben, können Sie sie für ausgewählte DOM -Elemente verwenden. Zum Beispiel:

> $ ("#myelement"). JQuery -Funktion. Deklarieren Sie die Argumente in der Funktionserklärung und verwenden Sie sie in der Funktionskörper:

$. JQuery -Methoden mit meiner benutzerdefinierten Funktion? Stellen Sie sicher, dass Ihre Funktion das ausgewählte Element zurückgibt, um die Methode zu erfassen:

$. // Wichtig für die Methodenketten}; S). Anschließend können Sie Ihre gewünschten Manipulationen mit JQuery -Methoden darauf anwenden. kann deklarieren. Es wird jedoch empfohlen, Ihren Code organisiert zu halten und übermäßige Funktionserklärungen für Lesbarkeit und Wartung zu vermeiden. Basierend auf den Anforderungen Ihrer Anwendung. Genau wie bei anderen JavaScript -Funktionen können Sie bedingte Aussagen oder Schleifen verwenden, um Funktionen nach Bedarf zu erstellen.

Kann ich vorhandene jQuery -Funktionen überschreiben oder erweitern? Denken Sie daran, dass das Überschreiben integrierter JQuery-Funktionen unbeabsichtigte Konsequenzen haben kann. Daher ist es im Allgemeinen sicherer, die Funktionalität mit Ihren benutzerdefinierten Funktionen zu erweitern.

Der Hauptunterschied besteht darin, dass JQuery -Funktionen so konzipiert sind, dass sie direkt mit DOM -Elementen zusammenarbeiten, die mit JQuery -Selektoren ausgewählt wurden. Sie beinhalten häufig DOM -Manipulation oder Interaktion, während regelmäßige JavaScript -Funktionen eine breitere Auswahl an Aufgaben erledigen können. Verhindern Sie Konflikte mit anderen Bibliotheken oder Code. Zum Beispiel:

$. Fn.myplugin_myfunction = function () {// Ihr Funktionscode hier}; Einige Best Practices:

Definieren Sie Ihre Funktionen im $ (dokument). > Vermeiden Sie das Überschreiben oder Ändern von JQuery -Funktionen, um unerwartes Verhalten zu verhindern.

Das obige ist der detaillierte Inhalt von5 verschiedene Möglichkeiten, Funktionen in JQuery zu deklarieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!