5 façons différentes de déclarer les fonctions dans jQuery

Dans cet article, nous examinons plusieurs façons de définir un bloc de fonctionnalités JavaScript.

Choisir la voie pour déclarer une fonction JavaScript peut être déroutante pour les débutants et il existe plusieurs options de syntaxe différentes. Chacun présente des avantages, des inconvénients et des utilisations appropriées qui peuvent vous rattraper.

1. Fonctions JavaScript régulières

Le premier moyen et le plus évident de déclarer une fonction dans JavaScript est d'utiliser une déclaration de fonction. Une fonction nommée MultipLy (), qui prend deux paramètres x et y, les multiplie et renvoie la valeur peut être implémentée avec la syntaxe suivante:

<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>

Les fonctions définies de cette manière (une déclaration de fonction) sont hissées au sommet de la portée actuelle. La console.log () pourrait être placée avant la fonction et elle fonctionnerait toujours.

2. Expressions de fonction JavaScript

La même fonction peut être écrite comme une expression qui définit explicitement une variable, comme le montre l'exemple suivant:

<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>

La fonction n'est pas hissée, donc elle ne peut être utilisée qu'après la définition.

3. Objet définitions de méthode littérale

Les fonctions

sont traitées de la même manière que tout autre type de valeur en JavaScript, vous pouvez donc en définir un dans un autre objet. Par exemple:

<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>

Encore une fois, cette méthode d'objet ne peut être appelée qu'après sa définition.

4. Fonctions flèches ES2015

Les fonctions Arrow ne nécessitent pas le mot clé de la fonction mais ne peuvent être affectées qu'à une variable ou utilisée de manière anonyme (comme dans un gestionnaire de rappel ou d'événements). Les paramètres enfermés dans des supports arrondis (()) sont suivis d'une flèche (=>) pour désigner une fonction dans le bloc de code suivant:

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

Puisque nous n'avons qu'une seule instruction, le retour est implicite et les supports peuvent être omis pour des fonctionnalités identiques avec une syntaxe plus courte:

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

Dans les cas où la fonction a un seul paramètre, ces supports peuvent également être supprimés:

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

bien que des supports sont toujours nécessaires pour un seul paramètre:

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

Les fonctions de flèche attribuent automatiquement cela à la valeur dans la portée extérieure immédiate, il n'est donc pas nécessaire d'utiliser .bind (this).

5. Fonctions d'extension jQuery

jQuery est une bibliothèque JavaScript, donc la création de fonctions est à peu près la même. Cependant, la fonctionnalité de JQuery peut être étendue en ajoutant vos propres méthodes personnalisées. La méthode jQuery.fn.Extend () étend l'objet Prototype jQuery ($ .fn) afin que la nouvelle fonctionnalité puisse être enchaînée à la fonction jQuery () principale.

Par exemple, le code suivant définit les nouvelles méthodes de vérification et décochez pour modifier les champs d'entrée de la case à cocher:

<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>

le garder fonctionnel

La syntaxe de fonction est souvent une question de préférence personnelle, mais essayez de vous assurer que votre code reste lisible. Il peut être préférable d'utiliser une déclaration de fonction que de vous confondre dans quelques semaines avec un méli-mélo intelligent mais illisible de flèches et de supports.

Questions fréquemment posées (FAQ) sur la déclaration des fonctions jQuery

Qu'est-ce qu'une déclaration de fonction jQuery?

Une déclaration de fonction jQuery est le processus de création d'une fonction personnalisée à l'aide de la bibliothèque jQuery. Ces fonctions peuvent être utilisées pour effectuer des tâches spécifiques, manipuler le DOM ou interagir avec des éléments sur une page Web.

Comment déclarer une fonction jQuery?

Pour déclarer une fonction jQuery, vous Utilisez la syntaxe $ .fn, suivie du nom de la fonction. Par exemple:
> $. Fn.mycomyfunction = function () {// Votre code de fonction ici};

Puis-je déclarer des fonctions jQuery en dehors du $ (document) .ready () Fonction?

Oui, vous pouvez déclarer des fonctions jQuery en dehors de la fonction $ (document) .ready (). Cependant, c'est une bonne pratique de définir les fonctions à l'intérieur de la fonction $ (document) .ready () pour s'assurer que le Dom est complètement chargé avant de le manipuler.

Comment puis-je utiliser la fonction jQuery après l'avoir déclaré?

Une fois que vous avez déclaré une fonction jQuery, vous pouvez l'utiliser sur des éléments DOM sélectionnés. Par exemple:
> $ ("# myelement"). MyCustomFunction ();

Puis-je transmettre des arguments à ma fonction jQuery personnalisée?

Oui, vous pouvez transmettre des arguments à votre personnalité personnalisée? Fonction jQuery. Déclarez les arguments dans la déclaration de la fonction et utilisez-les dans le corps de fonction:
$. Fn.mycustomfunction = fonction (arg1, arg2) {// utiliser arg1 et arg2 ici};

Méthodes jQuery avec ma fonction personnalisée?

Oui, vous pouvez enchaîner d'autres méthodes jQuery avec votre fonction personnalisée. Assurez-vous que votre fonction renvoie l'élément sélectionné pour activer le chaînage de la méthode:
$. Fn.mycustomFunction = function () {// Votre code de fonction renvoie ici; // important pour le chaînage de méthode};

comment puis-je cibler des éléments spécifiques à l'intérieur de ma fonction jQuery personnalisée?

Dans votre fonction jQuery personnalisée, vous pouvez l'utiliser pour vous référer à l'élément DOM sélectionné ( s). Vous pouvez ensuite appliquer les manipulations souhaitées en utilisant des méthodes jQuery à ce sujet.

Y a-t-il une limite au nombre de fonctions jQuery que je peux déclarer?

Il n'y a pas de limite inhérente au nombre de fonctions jQuery que vous peut déclarer. Cependant, il est recommandé de garder votre code organisé et d'éviter les déclarations de fonctions excessives pour la lisibilité et la maintenance.

Puis-je déclarer les fonctions jQuery dynamiquement ou conditionnellement?

Oui, vous pouvez déclarer les fonctions jQuery dynamiquement ou conditionnellement? en fonction des besoins de votre application. Tout comme les autres fonctions JavaScript, vous pouvez utiliser des instructions ou des boucles conditionnels pour créer des fonctions au besoin.

Puis-je remplacer ou étendre les fonctions jQuery existantes?

Oui, vous pouvez remplacer ou étendre les fonctions jQuery existantes. Gardez à l'esprit que l'écrasement des fonctions JQuery intégrés peut avoir des conséquences imprévues, il est donc généralement plus sûr d'étendre les fonctionnalités en utilisant vos fonctions personnalisées.

Quelle est la différence entre déclarer une fonction JavaScript régulière et une fonction jQuery?

La principale différence est que les fonctions jQuery sont conçues pour fonctionner directement avec les éléments DOM sélectionnés à l'aide de sélecteurs jQuery. Ils impliquent souvent une manipulation ou une interaction DOM, tandis que les fonctions JavaScript régulières peuvent gérer une gamme plus large de tâches.

Puis-je l'espace de noms mes fonctions jQuery personnalisé empêcher les conflits avec d'autres bibliothèques ou code. Par exemple:

$. Fn.myplugin_myfonction = function () {// votre code de fonction ici};

y a-t-il les meilleures pratiques pour déclarer les fonctions jQuery?

Oui, voici Quelques meilleures pratiques:

Définissez vos fonctions à l'intérieur de la fonction $ (document) .ready () pour la préparation DOM.

Gardez vos fonctions modulaires et bien documentés.
Renvoyez-le pour la méthode chaînage le cas échéant.
Évitez d'écraser ou de modifier les fonctions JQuery de base pour éviter un comportement inattendu.
Utilisez des noms significatifs et suivez des conventions de dénomination cohérentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!