Javascript jQuery"；关于；函数事件图优化

代码一：

$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");  

代码二： 在上面的代码中，我想将mouseover和mouseout函数的两个常用语句缩减为一个块，以减少冗余。为了实现这一点，我添加了一个函数-

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

把我的鼠标移到了-

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

以及—

mouseover: function() {
    this.mouseMovement;
}

推断： 我非常困惑，因为第二种情况是将冗余减少到一定程度，但

$this=$（this）是非常冗余的。是否可以为“on”函数而不是单个函数范围声明全局函数？我还想知道你们的看法，第一个代码是好的还是第二个
 声明
$this=$（this）
不是冗余的，它通过将
this
作为对象来最小化降低性能的DOM查询

以下是使用

功能解决问题的一种方法：

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

编辑： 我可以看出，我还应该解释一下，您只需要做一次

$this=$（this）

声明。一旦对象被声明，DOM对象将不再被访问，而是javascript/jQuery对象，您可以在其上使用函数，如

$this.parent（…

等

---

您的代码当前正在进行冗余声明，这是正确的。将声明嵌套在

.on

函数中，但嵌套在将使用该对象的函数的外部/之前。

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

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

或者像这样：

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

与mouseout相同：

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

我不认为mouseout中的代码是必要的，因为只有一个元素将具有该类。您应该能够通过使用：

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

在任何一种情况下，这都会删除冗余，因为您a）不存储对

此

的引用，b）只访问一次；jQuery链始终返回对所操作对象的引用

---

注意，您不能全局范围

这个
，因为每次jQuery对元素进行操作时它都会发生变化。在您的代码示例中，我认为执行性能差异可能是可以忽略的。创建对
this
的变量引用更快，因为
$（this）
必须在每次调用时访问DOM并定位元素。如果要在多个语句中使用
$（this）
（未链接），则获取引用并围绕引用进行操作会更有效。
这是多余的。。每当我们遇到语句时，它都会在jQuery对象中查找
$（this）
第二，我不知道你为什么写第二个
$（'body'）。在（'click'，'SOMECLASS'，function（）{//code here}）
这完全是毫无疑问的（我希望您注意这句话-
$this.parent（）.find（“.hlight”）.removeClass（'hlight'）；
我能做些什么吗？@Dev返回到原始对象实际上有一点好处。您应该能够通过扩展带有
$.sides（'.hlight'）的链来获得它。）
。因为原始对象应该是该类的唯一对象，这就是您得到的。我不确定您对代码I的第一次评论是什么意思。因为您的
$（this.removeClass（'hlight'）；
语句..我理解了这个概念并进一步最小化了代码..:
$searchBoxParent.on({mouseover:function（）{$（this.addClass（'hlight'）；}，mouseout:function（）{$（this.removeClass（'hlight'）；}，单击：function（）{$searchBox.val（$（this.text（））.focus（）；setCurrentlySearchedText（）；deleteSuggestionsDiv（）；}，“#searchSuggestiveDiv”）