$(this.el）.html 和 this.$el.html 之间有什么区别

What's the difference between: $(this.el).html and this.$el.html

本文关键字：el html this 什么 区别 之间      更新时间：2023-09-26

两者之间有什么区别：

$(this.el).html

和 

this.$el.html

阅读一些骨干示例，有些以一种方式做，另一种方式做。

$(this.el)用jQuery(或Zepto(包装元素。所以，如果你的视图HTML是这样的：

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

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

this.$el是对 jQuery(或 Zepto(对象的缓存引用，因此您从调用 $(this.el) 中获得的副本。目的是让您无需调用$(this.el)，这可能会产生一些开销，从而产生性能问题。

请注意：两者并不等同。 this.el单独是对主机对象 HTML 的引用 - 不涉及库。这是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/#$((
两者

本质上是*等价的，$el是jQuery或Zepto对象的缓存版本el，你看到使用$(this.el)的示例的原因是因为它只是在后来的backbone版本中添加的.js(0.9.0(。

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

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

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

我通常看到这个：

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

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

相关文章：