正确的缓存方式和使用 jQuery 时的 this

Question

在使用jQuery的时候，缓存很重要，好像忘记了相关的原理。当我缓存某些东西时，如何在函数on() 中重新使用它？

例子：

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click', function() {
  var index = $('#pagination-demo').find('.active > a')[0].innerHTML;
  ...
});

正如你在这里看到的，我再次调用 jQuery 来查找 id，真丢脸！有没有办法用this 做到这一点？

var index = this.find('.active > a')[0].innerHTML;

或：

var index = $(this).find('.active > a')[0].innerHTML;

但我不确定this 会在on() 的主体中包含什么。这样做的正确方法是什么？

Answer 1

要使用变量缓存，只需在“on”中再次重用变量“paginationDemo”。在这种情况下，第二种方法也可以正常工作。

var index = $(this).find('.active > a')[0].innerHTML;

因为 'this' 仍然持有对 DOM 对象的引用。

但是这种方法在嵌套函数或匿名函数（“未命名”函数）中失去了有效性。因此，您可以保存对该变量的引用以使其正常工作（self 方法）。或者直接使用缓存的变量（paginationDemo）。例如下面：

 var paginationDemo = $("#paginationDemo");
    paginationDemo.on('click', function(e) {
          var self =this;      // saving reference to this
          console.log(this);     // refers to DOM object paginationDemo

          var index = $(this).find('.active > a')[0].innerHTML; 
                                 //will work
          var index = paginationDemo.find('.active > a')[0].innerHTML; 
                                    //will work, this is caching approach

         (function (){
              //inside anonymous fun, this changed now
            console.log(this);      // this refers to "window" object now!
            var index = $(this).find('.active > a')[0].innerHTML; //won't work

            var index = $(self).find('.active > a')[0].innerHTML; 
                               //works !! lexical scope variable self used    

            paginationDemo.find('.to-be-found').text('FOUND');
                                 //works too

       })();
    });

这是一个如何工作的链接： this - JavaScript | MDN

Answer 2

您的第二个选项将起作用：

var index = $(this).find('.active > a')[0].innerHTML;

Answer 3

据我了解，您还想使用您在通过on 注册的回调中创建的 jquery 对象。

来自official docs：

除了事件对象，事件处理函数还有 访问处理程序绑定到的 DOM 元素 关键字this。将 DOM 元素转换为 jQuery 对象，我们可以 使用 jQuery 方法，我们只需执行 $( this )

但在这种情况下，您也必须再次构造 jQuery 对象。不像使用选择器来查找元素那么昂贵，但仍然如此。

问题的一个解决方案可能是使用event.data 属性

var paginationDemo = $("#pagination-demo");
paginationDemo.on('click',{ cachedElement:paginationDemo},function(event) {
  var index = event.data.cachedElement.find('.active > a')[0].innerHTML;
  ...
});

通过这种方式，您可以重用原始 jQuery 对象并从缓存中获得您想要的结果。

更新：

在传递给on 的回调中，关键字this 指的是底层DOM 对象。当我们使用这个习惯用法时：$(this) 我们正在构造一个新的 jQuery 对象。但是它与存储在paginationDemo 变量中的jQuery 对象不同。换句话说，两个 jQuery 对象都将作用于同一个 DOM 元素。但是他们的参考是不同的

event.data.cachedElement === $(this)
>false