Backbone：为什么要将`$（'＃footer'）`分配给`el`？[重复]

Question

我发现以下陈述：

el: '#footer'](https://addyosmani.com/backbone-fundamentals/#getting-set-up)

var todosView = new TodosView({el:$('#footer')});

另外，我读到：该view.$el属性等效于$(view.el)，view.$(selector)并且等效于$(view.el).find(selector)。在TodoView示例的render方法中，我们看到this.$el用于设置元素的HTML，并this.$()用于查找类“edit”的子元素。

Answer 1

$el和之间有什么区别el？

该el视图属性

this.el可以从DOM选择器字符串或Element解析；否则会从视图的创建tagName，className，id
和attributes属性。如果未设置，this.el则为空div，通常就可以了。

它是一个DOM元素对象引用。
不要el直接设置，如果要更改它，请改用该view.setElement方法

该$elproperty

视图元素的缓存jQuery对象。一个方便的引用，而不是总是重新包装DOM元素。

 this.$el = $(this.el);

也 不要$el直接设置，使用view.setElement方法。

该el选项

一个el参考，也可以通过在该视图的构造函数。

new Backbone.View({ el: '#element' });
new Backbone.View({ el: $('#element') }); // unecessary

它会覆盖该el属性，然后将该$el属性用于该属性。

如果传递了选择器字符串，则将其替换为其表示的DOM元素。

为什么要分配$('#footer')给el？

 _setElement: function(el) {
   this.$el = el instanceof Backbone.$ ? el : Backbone.$(el);
   this.el = this.$el[0];
 },

这说明了为什么this.$el等同于$(this.el)。

但是什么Backbone.$呢？

骨干保持对任何事物的参考$。

出于Backbone的目的，jQuery，Zepto，Ender或My Library（玩笑）拥有该$变量。

在我们的例子中，$是jQuery，Backbone.$也是jQuery，但是Backbone依赖项很灵活：

Backbone唯一的硬依赖性是Underscore.js（>=1.8.3）。要使用Backbone.View实现RESTful持久性和DOM操作，请包括 jQuery（> =1.11.0）和json2.js，以支持较早的InternetExplorer。（类似Underscore和jQueryAPI的Lodash和Zepto等也可以在不同程度的兼容性下正常工作。）

this.$(selector) 相当于 $(view.el).find(selector)

事实上， 这是一个有点更有效的$查看功能就是：

 $: function(selector) {
   return this.$el.find(selector);
 },

什么是缓存的jQuery对象？

在这种情况下，这仅意味着jQuery对象保留在变量内，该变量在视图内被重用。它避免了$(selector)每次查找元素的昂贵操作。

您可以（并且应该）尽可能使用这种小的优化方式，例如在render函数内部：

render: function() {
    this.$el.html(this.template(/* ...snip... */));
    // this is caching a jQuery object
    this.$myCachedObject = this.$('.selector');
},

onExampleEvent: function(e) {
    // avoids $('.selector') here and on any sub-sequent example events.
    this.$myCachedObject.toggleClass('example');
}

给jQuery缓存的对象变量加上前缀$只是一种标准，而不是必需的。

Backbone的源代码少于2000行，它有据可查且易于阅读。我强烈鼓励每个人都深入其中，以轻松理解基本逻辑。

他们还提供带注释的源页面 ，它甚至更易于阅读。