在jquery函数上使用本地引用还是这个？ （JavaScript的）

Question

哪种解决方案更好？

var handleDateChange = function () {
            var dateBtn = $('#dateBtn');
            dateBtn.on('changeDate', function () {                
                var dateValueStr = dateHelper.getFormattedDate(dateBtn);
                dateBtn.text(dateValueStr);
                $.when(//Something is running)
                    .done(function () {
                            dateBtn.DoSomething();
                    });
                dateBtn.datepicker('hide');
            });
        };

当我们使用dateBtn变量时，它总是再次按id搜索元素？ 或者在某些地方使用更好的解决方案$(this)：

var handleDateChange = function () {
                var dateBtn = $('#dateBtn');
                dateBtn.on('changeDate', function () {                
                    var dateValueStr = dateHelper.getFormattedDate($(this));
                    $(this).text(dateValueStr);
                    $.when(//Something is running)
                        .done(function () {
                                dateBtn.DoSomething();
                        });
                    $(this).datepicker('hide');
                });
            };

Answer 1

$(this)版本更好，因为它更灵活，可重复使用。使用第一种方法是不可取的，因为代码与dateBtn变量紧密耦合。

考虑您将来是否回到代码并想要将事件处理程序分配给其他元素，而不仅仅是dateBtn。使用第一种方法，您必须将所有dateBtn更改为this方法，或复制整个代码并使用其他变量。使用this方法，您只需要在其他元素上调用完全相同的代码。

性能差异可以忽略不计，因为$(this)没有重新选择元素，它是在现有的普通DOM元素周围添加jQuery包装器。通过将jQuery对象存储在如下所示的变量中，并且引用$this而不是一遍又一遍地创建新的jQuery对象，可以很容易地解决这个问题：

$this = $(this);

旁注：您的第二个代码仍然在promise中引用dateBtn，因此它仍然依赖于dateBtn变量。要解决这个问题，您可以创建一个闭包并传递目标对象。

Answer 2

当你这样做时

var dateBtn = $('#dateBtn');

立即搜索元素，不会再次进行。所以缓存jQuery对象是有效的。

但除非您确认存在性能问题，否则您并不需要此缓存。使用$(this)，假设它是相同的元素，会更清楚。