Question

我刚开始经历backbone fundamentals并且不太明白这里发生了什么：

this.$input = this.$('#new-todo');

有人可以给我一个概述/细分实际上做了什么吗？

根据我的有限理解告诉我，this.$('#new-todo')是典型的jquery选择器，它找到#new-todo（输入）并将其提供给this.$input，（根据{{ 3}}）是$（这个+'输入'）的排序简写，但这里是我放松它的地方 - 为什么它实际上存在？它真的只是将DOM中的#new-todo分配给$（此+'输入'）吗？如果是这样，那么使用这个。$（'something'）DOM选择器而不是这个中的内容会好不好。$ input？

Answer 1

代码示例缓存jQuery元素。

当你使用jQuery构造函数时，你正在查询DOM;找到匹配的所有元素。根据您使用的选择器，这可能是一项非常昂贵的操作。

如果您打算多次使用jQuery对象，最好只查询一次DOM。

以下是一个例子：

var foo = $('.someClass');
foo.css("background-color", "yellow");
console.log(foo.length + " items updated");

尽管上面的代码多次使用foo，但只查询了一次DOM。

如果你的代码认为foo是一个更明显的jQuery对象，这不是很好吗？

// a lot of developers like to prepend a $ to variable names
var $foo = $('.someClass');

Answer 2

Backbone.$委托给jQuery（或Zepto）。

在这种情况下，this.$将委托给jQuery并返回一个标识为new-todo的元素

this.$input是一个命名约定，表示$input是一个jQuery对象。

此对象引用的是Backbone实例，而不是DOM上下文。

this.$ == jQuery

this.$input只是一个属性。

this.$input = this.$("#new-todo");可以改写为：

this.input = jQuery("#new-todo");或

this.input = $("#new-todo");

$input只是一个任意的命名属性，就像变量可以命名为$foo，$bar等一样。

Answer 3

我没有知道$(this + 'input')，因为除非this是一个字符串，否则可能无效。我不知道Backbone，但似乎this.$是jQuery，因此Backbone中的this.$("#new-todo")与jQuery('#new-todo')相同，后者只选择该元素。将它存储在名为$input的成员中允许您只调用一次jQuery选择器函数，它还允许您在其他方法中引用this.$input，而无需知道原始选择器。

Answer 4

this.$input只是object指向this的属性。

this.$('#new-todo')将查找并返回当前视图中的匹配元素（视图为el指向的元素）。

当我们执行this.$时，根据docs，获取选择器指定的元素的查询在视图的元素（例如el）中确定范围。 Here是jQuery中范围的含义，由context引用。

因此this.$('#new-todo')与jQuery('#new-todo')不同。

这是什么。$ something = this。$（'something'）是什么意思？

4 个答案: