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

问题描述

我发现了以下陈述:

el: '#footer'

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

为什么将 $('#footer') 分配给 el?这才是真正让我困惑的地方.我在这里阅读了帖子，有什么区别Backbone.js 视图中 $el 和 el 之间的关系?，仍然很困惑.

另外，我读到:view.$el 属性等价于 $(view.el) 而 view.$(selector) 等价于 $(view.el).find(selector).在我们 TodoView 示例的渲染方法中，我们看到 this.$el 用于设置元素的 HTML，this.$() 用于查找类 'edit' 的子元素.

但是，有人说如果你调用$(this.el)，你只需保持执行 jquery 选择器以获取相同的 jquery 对象.'$el' 是 $(this.el)

的缓存版本

什么是缓存版本"?

解决方案

$el 和 el 有什么区别?

el 视图属性

this.el 可以从 DOM 选择器字符串或 Element 解析；否则将从视图的 tagName、className、id 创建和 attributes 属性.如果没有设置，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') });//不必要的

它覆盖了 el 属性，然后用于 $el 属性.

如果传递了一个选择器字符串，它将被它所代表的 DOM 元素替换.

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

this.el 可以是一个 jQuery 对象.您可以看到 Backbone 确保 el 是一个 DOM 元素，而 $el 是 _setElement 函数:

_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)

实际上，效率更高一些，$ 视图函数 就是:

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

什么是缓存的 jQuery 对象?

在这种情况下，它仅仅意味着一个 jQuery 对象被保存在一个变量中，这个变量在视图中被重用.它避免了每次使用 $(selector) 查找元素的代价高昂的操作.

你可以(也应该)尽可能使用这个小优化，比如在 render 函数中:

render: function() {this.$el.html(this.template(/* ...snip... */));//这是缓存一个 jQuery 对象this.$myCachedObject = this.$('.selector');},onExampleEvent:函数(e){//避免 $('.selector') 此处和任何后续示例事件.this.$myCachedObject.toggleClass('example');}

使用 $ 作为 jQuery 缓存对象变量的前缀只是一个标准，而不是一个要求.

Backbone 的源代码不到 2000 行，文档齐全且易于阅读.我强烈建议每个人都深入研究它以轻松理解底层逻辑.

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

补充阅读

• 从这里开始:Backbone 文档
• Backbone 简介
• 骨干模式
• Backbone 最佳实践

I found the following statements:

el: '#footer'

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

Why assign $('#footer') to el? This is what really confused me. I read the post here, What is the difference between $el and el in Backbone.js views?, still confused.

Also, I read:The view.$el property is equivalent to $(view.el) and view.$(selector) is equivalent to $(view.el).find(selector). In our TodoView example’s render method, we see this.$el used to set the HTML of the element and this.$() used to find subelements of class ‘edit’.

But, someone saidIf you call $(this.el), your just keep executing the jquery selector to get the same jquery object. '$el' is the cached version of $(this.el)

What is "cached version"?

解决方案

What is the difference between $el and el?

The el view property

It is a DOM element object reference. Do not set el directly, use the view.setElement method instead if you want to change it.

The $el property

I like how user mu is too short puts it:

Also do not set $el directly, use the view.setElement method.

The el option

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

It overrides the el property, which is then used for the $el property.

If a selector string is passed, it is replaced with the DOM element it represents.

Why assign $('#footer') to el?

this.el can be a jQuery object. You can see that Backbone make sure el is a DOM element and $el is a jQuery object of it in the _setElement function:

This shows why this.$el is equivalent to $(this.el).

But what is Backbone.$?

Backbone keeps a reference to whatever is $.

In our case, $ is jQuery, so Backbone.$ is just jQuery, but Backbone dependencies are flexible:

this.$(selector) is equivalent to $(view.el).find(selector)

In fact, it's a little more efficient, the $ view function is just:

What is a cached jQuery object?

In this case, it only means that a jQuery object is kept inside a variable, which is reused inside the view. It avoids the costly operation of finding the element with $(selector) each time.

You can (and should) use this little optimization whenever possible, like inside the render function:

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');
}

Prefixing the jQuery cached object variable with $ is just a standard, not a requirement.

---

Backbone's source code is less than 2000 lines, it's well-documented and easy to read. I highly encourage everyone to dive into it to easily understand the underlying logic.

They also offer an annotated source page which is even easier to read.

Additional reading

• Start here: Backbone documentation
• Introduction to Backbone
• Backbone patterns
• Best practices with Backbone

这篇关于Backbone:为什么将 `$('#footer')` 分配给 `el`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！