Question

代码I：

$searchBoxParent.on({
    mouseover: function() {
        $this = $(this);
        $this.parent().find(".hlight").removeClass('hlight');
        $this.addClass("hlight");
    },
    mouseout: function() {
        $this = $(this);
        $this.parent().find(".hlight").removeClass('hlight');
    },
    click: function() {
        $this = $(this);
        $searchBox.val($this.text()).focus();
        setCurrentlySearchedText();
        deleteSuggestionsDiv();
    }
},"#searchSuggest div");

代码II： 在上面的代码中我想减少启动鼠标悬停的两个常见语句。 mouseout功能集成一个块以减少冗余。为实现这一点，我添加了一个功能 -

mouseMovement: function() {
    $this = $(this);
    $this.parent().find(".hlight").removeClass('hlight');
}

并通过 -

更改了我的鼠标悬停

mouseover: function() {
    this.mouseMovement;
    $this = $(this);
    $this.addClass("hlight");
}

和mouseout by -

mouseover: function() {
    this.mouseMovement;
}

推论： 我很困惑，因为第二种情况是将冗余减少到一定程度，但$this = $(this);非常多余。是否可以为“on”函数而不是单个函数范围声明全局？另外，我想知道你的观点是第一个代码是好还是第二个......！

Answer 1

声明$this = $(this)不是多余的，它通过使this成为对象来最小化减少DOM查询的性能。

以下是使用.on功能解决问题的一种方法：

$('body').on('mouseover', '.SOMECLASS', function () {
    //code here
})

编辑：我可以看到我也应该解释说你只需要做一次$this = $(this)声明。声明对象后，不再访问DOM对象而是访问javascript / jQuery对象，您可以在其上使用$this.parent(...等函数。

您正确认为您的代码目前正在进行冗余声明。将声明嵌套在.on函数中，但在将使用该对象的函数之前/之前。

Answer 2

您可以将鼠标悬停事件写为一行：

$(this).addClass('hlight').siblings('.hlight').removeClass('hlight');

或者像这样：

$(this).addClass('hlight').parent().find('.hlight').not(this).removeClass('hlight');

与mouseout相同：

$(this).siblings('.hlight').removeClass('hlight');

我不认为鼠标输出中的代码是必要的，因为只有一个元素具有该类。你应该可以使用：

$(this).removeClass('hlight');

在任何一种情况下，这都会消除您的冗余，因为您a）不存储对this的引用，b）仅访问它一次; jQuery链总是返回对被操作对象的引用。

注意，您不能全局范围this，因为每次jQuery对元素进行操作时它都会更改。在您的代码示例的实例中，我会说执行性能差异可能是可以忽略的。创建对this的变量引用更快，因为$(this)必须访问DOM并在每次调用时定位元素。如果您要在多个语句中使用$(this)（未链接），那么获取引用并围绕它进行操作会更有效。

jQuery“on”函数事件映射优化

2 个答案: