在视图中引用 HTML 元素，一个约定？答案

【问题标题】：Reference to HTML elements in view, a convention?在视图中引用 HTML 元素，一个约定？
【发布时间】：2025-12-02 15:35:02
【问题描述】：

我目前正在学习 Backbone.js，我正在使用《Developping Backbone Applications》一书。

我对 HTML 元素的引用及其存储方式有疑问。例如：

   initialize: function() {
        this.$input = this.$('#new-todo');

这里ID为to-do的HTML元素存储在this.$input中，为什么我们在input前面使用$，这只是一个约定吗？如果我将 this.$input 更改为 this.input 我的代码可以正常工作。我觉得这很令人困惑，因为这本书指出：

view.$el 属性 等价于 $(view.el) 并且 view.$(selector) 等价于 $(view.el).find(选择器)。

我认为 $(view.el) 的作用与 (view.el) 完全不同。

this.$input 如何保存在 Backbone.js 中？如果我 console.log 它，它会产生：

Object[input#new-todo property value = "" attribute value = "null"]

有人能给我一些见解吗？ :)

【问题讨论】：

$(view.el) 是对 $ 函数的调用，view.el 作为参数，(view.el) 只是 view.el 包裹在分组括号中（不是函数调用括号）。请记住，$ 是 jQuery 提供的函数，this.$el 是 Backbone 提供的视图属性，this.$ 是 Backbone 提供的视图函数，而美元符号只是 JavaScript 中有效的字符标识符。

标签： backbone.js

【解决方案1】：

在变量名前使用 $ 只是一种命名约定。它可以帮助开发人员将持有 jQuery 对象的变量与其他变量区分开来。
view.$el 是Backbone 提供的辅助变量，这样我们可以直接使用它，而不用显式地形成jQuery 对象。因此 view.$el 等价于 $(view.el)。

view.$el 在 setElement 方法中赋值：

setElement: function(element, delegate) {
   // Some code
   this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
   // Some code
}

Backbone.$ 是对 jQuery 导出的 $ 全局变量的引用。

view.$(selector) 是 View 中定义的方法。它的定义与 $(view.el).find(selector) 完全相同

$: 函数（选择器）{ 返回 this.$el.find(selector); }

【讨论】：