Backbone:为什么将 `$('#footer')` 分配给 `el`?

IT技术 javascript backbone.js
2021-01-23 03:42:07

我发现以下陈述:

el: '#footer'

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

为什么分配$('#footer')el这才是真正让我困惑的地方。我在这里阅读了这篇文章,Backbone.js 视图中的 $el 和 el 有什么区别?,还是一头雾水。

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

但是,有人说 如果您调用$(this.el),您只需继续执行 jquery 选择器以获得相同的 jquery 对象。'$el' 是缓存的版本$(this.el)

什么是“缓存版本”?

1个回答

$el和 和有什么不一样el

el视图属性

this.el可以从 DOM 选择器字符串或元素解析;否则会从视图的创建tagNameclassNameidattributes属性。如果没有设置,this.el则是一个空的div,这通常很好。

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

$el物业

视图元素的缓存 jQuery 对象。一个方便的参考,而不是一直重新包装 DOM 元素。

我喜欢用户mu 太短的说法

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?

this.el可以是一个 jQuery 对象。你可以看到 Backbone 确保它el是一个 DOM 元素,并且$el是它在_setElement函数中的一个 jQuery 对象

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

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

但什么是Backbone.$

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以支持较旧的 Internet Explorer。 Underscore和 jQuery API 的模仿物,例如LodashZepto,也将趋于有效,但具有不同程度的兼容性。)

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 行,文档齐全且易于阅读。我强烈鼓励大家深入研究它以轻松理解底层逻辑。

他们还提供了一个更容易阅读的带注释的源页面

补充阅读

@BAE我完全可以!
2021-03-19 03:42:07
谢谢。非常明确的答案。但是你能解释一下 Backbone.$ 吗?
2021-03-29 03:42:07
@BAE 我想我已经完成了
2021-03-29 03:42:07
谢谢。我愿意阅读 Backbone 源代码,但是您知道可以帮助我理解源代码的好帖子吗?
2021-04-06 03:42:07