$el和 和有什么不一样el?
this.el可以从 DOM 选择器字符串或元素解析;否则会从视图的创建tagName,className,id
和attributes属性。如果没有设置,this.el则是一个空的div,这通常很好。
它是一个 DOM 元素对象引用。不要el直接设置,如果要更改请改用view.setElement方法。
视图元素的缓存 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 的目的,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 的模仿物,例如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 行,文档齐全且易于阅读。我强烈鼓励大家深入研究它以轻松理解底层逻辑。
他们还提供了一个更容易阅读的带注释的源页面。
补充阅读