Eu fui a pessoa que originou essa convenção em 2006 e a promoveu na lista de discussão inicial do jQuery, então deixe-me compartilhar um pouco da história e da motivação em torno dela.
A resposta aceita dá este exemplo:
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
Mas isso realmente não ilustra bem. Mesmo sem o $
, ainda teríamos dois nomes de variáveis diferentes aqui, email
e email_field
. Isso é muito bom aqui. Por que precisaríamos colocar um $
em um dos nomes quando já temos dois nomes diferentes?
Na verdade, eu não teria usado email_field
aqui por dois motivos: names_with_underscores
não é JavaScript idiomático e field
realmente não faz sentido para um elemento DOM. Mas eu segui a mesma ideia.
Eu tentei algumas coisas diferentes, entre elas algo muito semelhante ao exemplo:
var email = $("#email"), emailElement = $("#email")[0];
// Now email is a jQuery object and emailElement is the first/only DOM element in it
(É claro que um objeto jQuery pode ter mais de um elemento DOM, mas o código no qual eu estava trabalhando tinha muitas id
seletores; portanto, nesses casos, havia uma correspondência 1: 1.)
Eu tive outro caso em que uma função recebeu um elemento DOM como parâmetro e também precisava de um objeto jQuery:
// 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
}
Bem, isso é um pouco confuso! Em um dos meus bits de código, email
está o objeto jQuery e emailElement
é o elemento DOM, mas no outro, email
é o elemento DOM e emailJQ
é o objeto jQuery.
Não havia consistência e eu continuei misturando-os. Além disso, era um pouco incômodo continuar criando dois nomes diferentes para a mesma coisa: um para o objeto jQuery e outro para o elemento DOM correspondente. Além de email
, emailElement
eemailJQ
, eu continuei tentando outras variações também.
Então notei um padrão comum:
var email = $("#email");
var emailJQ = $(email);
Como o JavaScript trata $
simplesmente como outra letra para nomes, e como sempre recebi um objeto jQuery de uma $(whatever)
chamada, o padrão finalmente me ocorreu. Eu poderia atender uma $(...)
ligação e apenas remover alguns caracteres, e ele teria um nome muito bonito:
$("#email")
$(email)
Strikeout não é perfeito, mas você pode ter a idéia: com alguns caracteres excluídos, ambas as linhas acabam parecendo:
$email
Foi quando percebi que não precisava criar uma convenção como emailElement
ou emailJQ
. Já havia uma boa convenção me encarando: desconecte alguns caracteres de uma $(whatever)
ligação e ela se transforma $whatever
.
var $email = $("#email"), email = $email[0];
// $email is the jQuery object and email is the DOM object
e:
// 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!
}
Portanto, não tive que inventar dois nomes diferentes o tempo todo, mas poderia usar o mesmo nome com ou sem um $
prefixo. E o $
prefixo era um bom lembrete de que eu estava lidando com um objeto jQuery:
$('#email').click( ... );
ou:
var $email = $('#email');
// Maybe do some other stuff with $email here
$email.click( ... );