Pourquoi une variable JavaScript commence-t-elle par un signe de dollar ?

Question

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

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

Answer 1

Utilisation très courante dans jQuery est de distinguer jQuery des objets stockés dans des variables à partir d'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 jQuery et permet de voir facilement jQuery qui ont un ensemble différent de propriétés.

Answer 2

Dans les 1ère, 2ème et 3ème édition d'ECMAScript L'utilisation de noms de variables préfixés par $ est explicitement déconseillée par la spécification, sauf dans le contexte d'un code généré automatiquement :

Le signe du 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.

Toutefois, dans la prochaine version (la 5ème édition qui est actuel), cette restriction a été abandonnée et le passage ci-dessus a été remplacé par

Le signe du dollar ( $ ) et le trait de soulignement ( _ ) sont autorisés partout dans un Nom de l'identifiant .

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

Answer 3

C'est moi qui ai été à l'origine de cette convention en 2006 et qui en ai fait la promotion sur la première liste de diffusion jQuery. Permettez-moi donc de vous faire part de l'histoire et de la motivation qui l'entourent.

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 n'illustre pas vraiment bien la situation. Même sans le $ nous aurions toujours deux noms de variables différents, email y email_field . C'est très bien comme ça. 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 idiomatiques du JavaScript, 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é plusieurs choses différentes, dont 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 sûr, un objet jQuery peut avoir plus d'un élément DOM, mais le code sur lequel je travaillais avait beaucoup de id sélecteurs, donc dans ces cas-là, il y avait une correspondance 1:1).

J'ai eu un autre cas où une fonction recevait un élément DOM comme paramètre et avait également besoin d'un objet jQuery pour celui-ci :

// 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 un de mes morceaux 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 l'objet jQuery.

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

Puis j'ai remarqué un modèle commun :

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

Puisque JavaScript traite $ comme une lettre de plus pour les noms, et puisque j'ai toujours reçu un objet jQuery en retour d'une commande $(whatever) appel, le motif m'a finalement sauté aux yeux. Je pourrais prendre un $(...) en supprimant quelques caractères, et on obtiendrait un nom plutôt sympa :

$("#email")

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

$email

C'est là que j'ai réalisé que je n'avais pas besoin d'inventer une convention du genre emailElement o emailJQ . Il y avait déjà une belle convention qui s'offrait à moi : prendre quelques personnages d'un $(whatever) et il se transforme 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!
}

Ainsi, je n'ai pas eu à inventer deux noms différents tout le temps, mais j'ai pu utiliser le même nom, avec ou sans un $ préfixe. Et le $ préfixe était un bon rappel que j'avais affaire à un objet jQuery :

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

ou :

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

Answer 4

Comme d'autres l'ont mentionné, le signe dollar est destiné à être utilisé par un code généré mécaniquement. Toutefois, cette convention a été rompue par certaines bibliothèques JavaScript très populaires. JQuery, Prototype et MS AJAX (AKA Atlas) utilisent tous ce caractère dans leurs identifiants (ou comme identifiant entier).

En bref, vous pouvez utiliser le $ quand vous le souhaitez. (L'interprète ne s'en plaindra pas.) La question est de savoir quand vous veulent pour l'utiliser ?

Je ne l'utilise pas personnellement, mais je pense que son utilisation est valable. Je pense que MS AJAX l'utilise pour signifier 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.

Answer 5

Dans le contexte d'AngularJS, l'élément $ est utilisé uniquement pour les identifiants dans le code du framework. Les utilisateurs du framework sont invités à ne pas l'utiliser dans leurs propres identifiants :

Espaces de noms Angular $ y $$

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

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