web-dev-qa-db-fra.com

Pourquoi une variable JavaScript commencerait-elle par un signe dollar?

Je vois assez souvent JavaScript avec des variables commençant par un signe dollar. Quand/pourquoi choisiriez-vous de préfixer une variable de cette manière?

(Je ne parle pas de la syntaxe $('p.foo') que vous voyez dans jQuery et autres, mais de variables normales comme $name et $order)

javascriptnaming-conventions
987
Ken

Une utilisation très courante dans jQuery consiste à distinguer les objets jQuery stockés dans des variables des autres variables. Par exemple, je définirais

var $email = $("#email"); // refers to the jQuery object representation of the dom object
var email_field = $("#email").get(0); // refers to the dom object itself

Je trouve cela très utile pour écrire du code jQuery et facilite la visualisation des objets jQuery ayant un ensemble de propriétés différent.

1353
jonstjohn

Dans les 1ère, 2ème et ème édition d'ECMAScript , l'utilisation de noms de variable avec un préfixe $ a été explicitement déconseillée par la spécification, sauf dans le contexte du code généré automatiquement:

Le signe dollar ($) et le trait de soulignement (_) sont autorisés n'importe où dans un identifiant. Le signe dollar est destiné à être utilisé uniquement dans du code généré mécaniquement.

Cependant, dans la version suivante (le 5th Edition , qui est actuelle), cette restriction a été supprimée et le passage ci-dessus remplacé par

Le signe dollar ($) et le trait de soulignement (_) sont autorisés n’importe où dans un IdentifierName .

En tant que tel, le signe $ peut maintenant être utilisé librement dans les noms de variables. Certains cadres et bibliothèques ont leurs propres conventions sur la signification du symbole, notées dans d'autres réponses ici.

240
cic

Comme d'autres l'ont mentionné, le signe dollar est destiné à être utilisé par du code généré mécaniquement. Cependant, cette convention a été brisée par certaines bibliothèques JavaScript très populaires. JQuery, Prototype et MS AJAX (AKA Atlas) utilisent tous ce caractère dans leurs identificateurs (ou en tant qu'identificateur complet).

En bref, vous pouvez utiliser le $ à tout moment. (L’interprète ne se plaindra pas.) La question est de savoir quand vouloir pour l'utiliser?

Personnellement, je ne l'utilise pas, mais je pense que son utilisation est valide. Je pense que MS AJAX l'utilise pour indiquer qu'une fonction est un alias pour un appel plus verbeux.

Par exemple:

var $get = function(id) { return document.getElementById(id); }

Cela semble être une convention raisonnable.

58
Benry

Dans le contexte de AngularJS, le préfixe $ est utilisé uniquement pour les identifiants dans le code de la structure. Les utilisateurs de la structure sont priés de ne pas l'utiliser dans leurs propres identifiants:

Espaces de nommage angulaires $ et $$

Pour éviter les collisions de nom accidentelles avec votre code, Angular préfixe les noms d'objets publics avec $ et les noms d'objets privés avec $$. Veuillez ne pas utiliser le préfixe $ ou $$ dans votre code.

Source: https://docs.angularjs.org/api

53
Travis

J'étais la personne qui a créé cette convention en 2006 et qui en a fait la promotion sur la liste de diffusion de jQuery, alors laissez-moi vous raconter une partie de l'histoire et de la motivation qui l'entoure.

La réponse acceptée donne cet exemple:

var $email = $("#email"); // refers to the jQuery object representation of the dom object
var email_field = $("#email").get(0); // refers to the dom object itself

Mais cela ne l'illustre pas vraiment. Même sans le $, nous aurions toujours deux noms de variable différents, email et email_field. C'est beaucoup bien ici. Pourquoi aurions-nous besoin de lancer un $ dans l'un des noms alors que nous avons déjà deux noms différents?

En fait, je n’aurais pas utilisé email_field ici pour deux raisons: names_with_underscores ne sont pas du code JavaScript idiomatique et field n’a pas vraiment de sens pour un élément DOM. Mais j'ai suivi la même idée.

J'ai essayé différentes choses, parmi lesquelles quelque chose de très similaire à l'exemple:

var email = $("#email"), emailElement = $("#email")[0];
// Now email is a jQuery object and emailElement is the first/only DOM element in it

(Bien entendu, un objet jQuery peut comporter plusieurs éléments DOM, mais le code sur lequel je travaillais comportait de nombreux sélecteurs id. Dans ce cas, la correspondance était de 1: 1.)

J'ai eu un autre cas où une fonction a reçu un élément DOM en tant que paramètre et a également besoin d'un objet jQuery pour cela:

// email is a DOM element passed into this function
function doSomethingWithEmail( email ) {
    var emailJQ = $(email);
    // Now email is the DOM element and emailJQ is a jQuery object for it
}

Eh bien, c'est un peu déroutant! Dans l'un de mes bits de code, email est l'objet jQuery et emailElement est l'élément DOM, mais dans l'autre, email est l'élément DOM et emailJQ est Objet jQuery.

Il n'y avait pas de cohérence et je n'arrêtais pas de les mélanger. De plus, il était un peu gênant de devoir créer deux noms différents pour la même chose: un pour l’objet jQuery et un autre pour l’élément DOM correspondant. Outre email, emailElement et emailJQ, j'ai continué d'essayer d'autres variantes.

Ensuite, j'ai remarqué un schéma commun:

var email = $("#email");
var emailJQ = $(email);

Puisque JavaScript traite $ simplement comme une autre lettre pour les noms, et comme je reçois toujours un objet jQuery à la suite d'un appel $(whatever), le modèle s'est finalement créé pour moi. Je pouvais prendre un appel $(...) et juste enlever quelques caractères, et cela donnerait un joli joli nom:

$("#email")$(email)

Strikeout n'est pas parfait, mais vous pouvez avoir l'idée: avec certains caractères supprimés, ces deux lignes finissent par ressembler à:

$email

C'est alors que j'ai réalisé que je n'avais pas besoin de créer une convention comme emailElement ou emailJQ. Il y avait déjà une convention de Nice qui me fixait: retirez quelques caractères d'un appel $(whatever) et il se transformera en $whatever.

var $email = $("#email"), email = $email[0];
// $email is the jQuery object and email is the DOM object

et:

// email is a DOM element passed into this function
function doSomethingWithEmail( email ) {
    var $email = $(email);
    // $email is the jQuery object and email is the DOM object
    // Same names as in the code above. Yay!
}

Je n'ai donc pas à inventer deux noms différents tout le temps, mais je peux simplement utiliser le même nom avec ou sans préfixe $. Et le préfixe $ rappelait gentiment que j’avais affaire à un objet jQuery:

$('#email').click( ... );

ou:

var $email = $('#email');
// Maybe do some other stuff with $email here
$email.click( ... );
22
Michael Geary

Stevo a raison, la signification et l’utilisation du signe dollar (en Javascript et sur la plate-forme jQuery, mais pas en PHP) est totalement sémantique. $ est un caractère qui peut être utilisé dans le cadre d'un nom d'identifiant. De plus, le signe dollar n’est peut-être pas la chose la plus "bizarre" que vous puissiez rencontrer en Javascript. Voici quelques exemples de noms d'identificateurs valides:

var _       = function() { alert("hello from _"); }
var \u0024  = function() { alert("hello from $ defined as u0024"); }
var Ø       = function() { alert("hello from Ø"); }
var $$$$$   = function() { alert("hello from $$$$$"); }

Tous les exemples ci-dessus vont fonctionner.

Essayez les.

20
Javascript jQuery Dollar Sign

Le caractère $ n'a aucune signification particulière pour le moteur JavaScript. C'est juste un autre caractère valide dans un nom de variable comme a-z, A-Z, _, 0-9, etc ...

7
Stevo

Comme _ au début d’un nom de variable est souvent utilisé pour indiquer une variable privée (ou au moins une variable destinée à rester privée), je trouve $ pratique pour ajouter devant mes propres alias brefs à bibliothèques de code générique.

Par exemple, lorsque jQuery est utilisé, je préfère utiliser la variable $J (au lieu de $) et utiliser $P lorsque vous utilisez php.js, etc.

Le préfixe le distingue visuellement des autres variables telles que mes propres variables statiques, ce qui me permet d'affirmer que le code fait partie d'une bibliothèque ou d'une autre et qu'il est moins susceptible de créer des conflits ou de confondre les autres une fois qu'ils connaissent la convention.

En outre, il n’encombrera pas le code (ni ne nécessitera une frappe supplémentaire), contrairement à un nom entièrement spécifié répété pour chaque appel de bibliothèque.

J'aime penser que cela ressemble à ce que les touches de modification font pour élargir les possibilités des touches simples.

Mais ceci est juste ma propre convention.

2
Brett Zamir

Comme je l'ai constaté au cours des 4 dernières années, cela permettra à quelqu'un d'identifier facilement si la variable pointant sur une valeur/un objet ou un élément DOM encapsulé dans jQuery

Ex:
var name = 'jQuery';
var lib = {name:'jQuery',version:1.6};

var $dataDiv = $('#myDataDiv');

dans l'exemple ci-dessus, lorsque je vois la variable "$ dataDiv", je peux facilement dire que cette variable pointe vers un élément DOM encapsulé dans jQuery (dans ce cas, il s'agit de div). et aussi je peux appeler toutes les méthodes jQuery sans renvoyer l'objet comme $ dataDiv.append (), $ dataDiv.html (), $ dataDiv.find () au lieu de $ ($ dataDiv) .append ().

J'espère que ça peut aider. alors enfin, je veux dire que ce sera une bonne pratique de suivre cela, mais pas obligatoire.

2
Naga Srinu Kapusetti

Bien que vous puissiez simplement l'utiliser pour préfixer vos identifiants, il est censé être utilisé pour le code généré, tel que les jetons de remplacement dans un modèle, par exemple.

0
Ryan Abbott

${varname} n'est qu'une convention de dénomination utilisée par les développeurs jQuery pour distinguer les variables contenant des éléments jQuery.

Plain {varname} est utilisé pour stocker des éléments généraux tels que des textes et des chaînes. ${varname} contient les éléments renvoyés par jQuery.

Vous pouvez utiliser plain {varname} pour stocker des éléments jQuery également, mais comme je l’ai dit au début, cela le distingue des variables simples et le rend beaucoup plus facile à comprendre (imaginez-le confondant pour une variable simple et recherchez comprendre ce qu’il contient).

Par exemple :

var $blah = $(this).parents('.blahblah');

Ici, blah stocke un élément jQuery renvoyé.

Ainsi, lorsque quelqu'un verra le $blah dans le code, il comprendra qu'il ne s'agit pas simplement d'une chaîne ou d'un nombre, mais d'un élément jQuery.

0
Satyabrata Mishra