1095

我经常看到带有以美元符号开头的变量的 JavaScript。您何时/为什么选择以这种方式为变量添加前缀?

(我不是在问$('p.foo')你在 jQuery 和其他人中看到的语法,而是像$name和这样的普通变量$order

4

16 回答 16

1480

jQuery中非常常见的用途是将存储在变量中的jQuery对象与其他变量 区分开来。

例如,我会定义:

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

我发现这对编写jQuery代码非常有帮助,并且可以很容易地查看具有不同属性集的jQuery对象。

于 2009-02-16T15:42:39.213 回答
262

在 ECMAScript 的第 1、第 2 和第 3 版中,规范明确不鼓励使用以 $ 为前缀的变量名,除非在自动生成代码的上下文中:

标识符中的任何位置都允许使用美元符号 ( $) 和下划线 ( )。_美元符号仅用于机械生成的代码。

然而,在下一个版本(第5 版,即当前版本)中,这个限制被取消了,上面的段落被替换为

美元符号 ( $) 和下划线 ( _) 允许在IdentifierName中的任何位置使用。

因此,$ 符号现在可以在变量名中自由使用。某些框架和库对符号的含义有自己的约定,在此处的其他答案中有所说明。

于 2008-10-15T18:59:03.300 回答
61

正如其他人所提到的,美元符号旨在供机械生成的代码使用。然而,一些广受欢迎的 JavaScript 库打破了这一约定。JQuery、Prototype 和 MS AJAX (AKA Atlas) 都在它们的标识符中使用这个字符(或作为一个完整的标识符)。

简而言之,您可以随时使用$。(口译员不会抱怨。)问题是你什么时候使用它?

我个人不使用它,但我认为它的使用是有效的。我认为 MS AJAX 使用它来表示函数是一些更详细调用的别名。

例如:

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

这似乎是一个合理的约定。

于 2008-10-15T22:57:07.220 回答
56

在 AngularJS 的上下文中,$前缀仅用于框架代码中的标识符。指示框架的用户不要在他们自己的标识符中使用它:

Angular 命名空间$$$

为了防止与您的代码发生意外的名称冲突,Angular 会在公共对象的$名称和私有对象的名称前加上$$. 请不要在代码中使用$or$$前缀。

来源:https ://docs.angularjs.org/api

于 2012-08-30T22:51:25.993 回答
48

早在 2006 年,我就是这个约定的发起人,并在早期的 jQuery 邮件列表中对其进行了推广,所以让我分享一些关于它的历史和动机。

接受的答案给出了这个例子:

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

但这并不能很好地说明这一点。即使没有$,我们仍然会有两个不同的变量名,emailemail_field。那里很好。$当我们已经有两个不同的名字时,为什么还要在其中一个名字中加上 a?

实际上,我不会在email_field这里使用有两个原因:names_with_underscores不是惯用的 JavaScript,并且field对于 DOM 元素没有真正意义。但我确实遵循了同样的想法。

我尝试了一些不同的东西,其中一些与示例非常相似:

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

(当然,一个 jQuery 对象可以有多个 DOM 元素,但我正在编写的代码有很多id选择器,所以在那些情况下,它们是 1:1 对应的。)

我有另一种情况,一个函数接收一个 DOM 元素作为参数,并且还需要一个 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
}

好吧,这有点令人困惑!在我的一段代码中,email是 jQuery 对象并且emailElement是 DOM 元素,但在另一段代码中email是 DOM 元素并且emailJQ是 jQuery 对象。

没有一致性,我一直把它们混在一起。另外,为同一事物编造两个不同的名称有点麻烦:一个用于 jQuery 对象,另一个用于匹配的 DOM 元素。此外email,emailElementemailJQ, 我也一直在尝试其他变体。

然后我注意到一个常见的模式:

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

由于 JavaScript 将$名称视为简单的另一个字母,并且由于我总是从$(whatever)调用中返回一个 jQuery 对象,因此我终于明白了这种模式。我可以接个$(...)电话,只删除一些字符,它会想出一个很好的名字:

$("#email")
$(email)

Strikeout 并不完美,但您可能会明白:删除一些字符后,这两行最终看起来像:

$email

那时我意识到我不需要像emailElementor那样编写约定emailJQ。已经有一个很好的约定在盯着我看:从$(whatever)通话中取出一些字符,它变成$whatever.

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

和:

// 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!
}

因此,我不必一直编造两个不同的名称,而可以使用带有或不带有$前缀的相同名称。这个$前缀很好地提醒了我正在处理一个 jQuery 对象:

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

或者:

var $email = $('#email');
// Maybe do some other stuff with $email here
$email.click( ... );
于 2018-02-01T09:05:21.380 回答
21

Stevo 是对的,美元脚本符号的含义和用法(在 Javascript 和 jQuery 平台中,但不是在 PHP 中)是完全语义化的。$ 是一个可用作标识符名称一部分的字符。此外,美元符号可能不是您在 Javascript 中可以遇到的最“奇怪”的东西。以下是一些有效标识符名称的示例:

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

上面的所有示例都将起作用。

试试看。

于 2009-08-08T00:34:04.320 回答
8

$ 字符对 JavaScript 引擎没有特殊意义。它只是变量名称中的另一个有效字符,如 az、AZ、_、0-9 等...

于 2009-07-28T15:26:12.910 回答
2

由于_在变量名的开头通常用于表示私有变量(或至少一个旨在保持私有的变量),我发现$在我自己的简短别名前面添加通用代码库很方便。

例如,在使用 jQuery 时,我更喜欢使用变量$J(而不仅仅是$)和使用$Pphp.js 时使用等。

前缀使它在视觉上与其他变量(例如我自己的静态变量)区分开来,使我知道代码是某个库或其他库的一部分,并且一旦他们知道约定,就不太可能与其他变量发生冲突或混淆。

它也不会像为每个库调用重复的完全指定的名称那样使代码混乱(或需要额外的输入)。

我喜欢认为它类似于修饰键用于扩展单个键的可能性。

但这只是我自己的约定。

于 2014-05-04T14:52:43.617 回答
2

${varname}只是 jQuery 开发人员用来区分包含 jQuery 元素的变量的命名约定。

Plain{varname}用于存储一般的东西,如文本和字符串。 ${varname}保存从 jQuery 返回的元素。

您也可以使用 plain{varname}来存储 jQuery 元素,但正如我在开始时所说,这将它与普通变量区分开来并使其更容易理解(想象一下将它与普通变量混淆并搜索所有内容以了解它所包含的内容) .

例如 :

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

在这里,blah 存储了一个返回的 jQuery 元素。

因此,当其他人$blah在代码中看到 时,他们会明白它不仅仅是一个字符串或数字,它是一个 jQuery 元素。

于 2015-01-21T09:38:31.743 回答
2

正如我在过去 4 年中所经历的那样,它将允许一些人轻松识别变量是指向值/对象还是 jQuery 包装的 DOM 元素

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

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

在上面的示例中,当我看到变量“$dataDiv”时,我可以轻松地说这个变量指向一个 jQuery 包装的 DOM 元素(在本例中是 div)。而且我可以调用所有 jQuery 方法,而无需再次包装对象,如 $dataDiv.append()、$dataDiv.html()、$dataDiv.find() 而不是 $($dataDiv).append()。

希望它可能会有所帮助。所以最后想说的是,遵循这一点将是一个好习惯,但不是强制性的。

于 2015-09-05T19:27:20.347 回答
0

虽然您可以简单地使用它来为您的标识符添加前缀,但它应该用于生成的代码,例如模板中的替换标记。

于 2008-10-15T18:33:48.263 回答
-1

Angular用于框架生成的属性。猜猜,他们是按照 ECMA-262 3.0 提供的(现已失效的)提示进行的。

于 2012-04-18T14:07:05.877 回答
-3

$ 用于在普通变量的情况下区分公共变量和 jquery 变量。让您在 FLIPKART 中下订单,然后如果订单是显示字符串输出的变量,则将其命名为简单的“订单”,但如果我们单击下订单,则返回一个对象,该对象将由 $ 表示为“$ order”,以便程序员可以在整个代码中剪掉 javascript 变量和 jquery 变量。

于 2013-05-04T09:59:06.950 回答
-4

如果您看到美元符号 ($) 或双美元符号 ($$),并且对这在 Prototype 框架中的含义感到好奇,以下是您的答案:

$$('div');
// -> all DIVs in the document.  Same as document.getElementsByTagName('div')!

$$('#contents');
// -> same as $('contents'), only it returns an array anyway (even though IDs must be unique within a document).

$$('li.faux');
// -> all LI elements with class 'faux'

来源: http:
//www.prototypejs.org/api/utility/dollar-dollar

于 2011-07-20T22:03:53.963 回答
-5

我有时将 php 名​​称约定与 javascript 变量一起使用的原因: 在进行输入验证时,我想在客户端和服务器端运行完全相同的算法。我真的希望代码的两侧看起来尽可能相似,以简化维护。在变量名中使用美元符号使这更容易。

(此外,一些明智的辅助函数有助于使代码看起来相似,例如包装输入值查找、非 OO 版本的 strlen、substr 等。但它仍然需要一些手动调整。)

于 2011-02-21T12:49:05.743 回答
-7

一个有效的 JavaScript 标识符应该以字母、下划线 (_) 或美元符号 ($) 开头;后续字符也可以是数字 (0-9)。因为 JavaScript 区分大小写,所以字母包括字符“A”到“Z”(大写)和字符“a”到“z”(小写)。

详细信息:
https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variables

于 2015-10-21T10:14:21.623 回答