javascript - 有什么区别：$(this.el).html 和 this.$el.html

Question

有什么区别：

$(this.el).html

和

this.$el.html

阅读一些主干示例，其中一些以一种方式和另一种方式来做。

Answer 1

$(this.el)用 jQuery（或 Zepto）包装一个元素。因此，如果您的视图 HTML 是这样的：

<div id="myViewElement"></div>

...并this.el引用了该 div，则$(this.el)相当于直接通过 jQuery: 检索它$('#myViewElement')。

this.$el是对 jQuery（或 Zepto）对象的缓存引用，因此是调用$(this.el). 目的是为您节省 call 的需要$(this.el)，这可能会产生一些开销，因此会产生性能问题。

请注意：两者不等价。this.el单独是对宿主对象 HTMLElement 的引用——不涉及任何库。这就是回归document.getElementById。$(this.el)创建 jQuery/Zepto 对象的新实例。this.$el引用前一个对象的单个实例。只要您了解多次调用$(this.el).

在代码中：

this.ele = document.getElementById('myViewElement');
this.$ele = $('#myViewElement');

$('#myViewElement') == $(this.ele);

此外，值得一提的是，jQuery 和 Zepto 有部分内部缓存，因此额外调用$(this.el) 可能最终返回缓存结果，这就是我说“可能存在性能问题”的原因。它也可能不会。

文档

• view.$el- http://backbonejs.org/#View-$el
• $在骨干网 - http://backbonejs.org/#View-dollar
• jQuery 基础对象 - http://api.jquery.com/jQuery/
• Zepto 基础对象 - http://zeptojs.com/#$()

Answer 2

两者本质上是等价的，$el作为jQuery 或 Zepto 对象的缓存版本el，您看到使用示例的原因$(this.el)是因为它仅在更高版本的主干.js (0.9.0) 中添加。

*_{从技术上讲，正如Chris Baker指出的那样，$(this.el)每次调用它时（可能）都会创建一个新的 jQuery/Zepto 对象，而每次this.$el都会引用同一个对象。}

Answer 3

如果$el存在于this并且是 jQuery 对象，则不应使用$(this.el)，因为它会在已经存在的情况下初始化一个新的 jQuery 对象。

Answer 4

它们产生完全相同的东西；也就是说，对视图元素的引用。$el 只是 $(this.el) 的 jquery 包装器。看看这个参考：http ://documentcloud.github.com/backbone/#View- $el

Answer 5

我经常看到这个：

var markup = $(this).html();
$(this).html('<strong>whoo hoo</strong>');

我同意拉米农的观点。你看到的例子看起来不对。

此代码通常出现在 jquery 循环中，例如 each() 或事件处理程序。在循环内部，“el”变量将指向纯元素，而不是 jQuery 对象。事件处理程序中的“this”也是如此。

当您看到以下内容时：$(el) 或 $(this)，作者正在获取对 dom 对象的 jQuery 引用。

这是我刚刚用来将数字转换为罗马数字的示例：（注意，我总是使用 jQuery 而不是 $——与 mootools 的冲突太多......）

jQuery(document).ready(function(){
    jQuery('.rom_num').each(function(idx,el){
        var span = jQuery(el);
        span.html(toRoman(span.text()));
    });
}); 

Answer 6

在 $() 中包装元素会将 jQuery 扩展附加到对象原型。一旦完成，就不需要再次执行，尽管多次执行它除了性能之外没有任何危害。