Question

虽然我知道一些jQuery来简化前端操作编程，但我也知道一些“最佳实践”可以提升浏览器的性能，例如通过var进行缓存并始终从ID选择器下载。但我对这段代码有疑问。可以做得更好吗？

序言：此代码通过.hover（）为（已缓存的）选择器内的几个块设置动画。

HTML是这样的：

<div clas="block-link red">(...)</div>
<div clas="block-link yellow">(...)</div>
<div clas="block-link magenta">(...)</div>
<div clas="block-link moradopelusa">(...)</div>

jQuery在其中一个内部悬停动画：

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).hover(function(){
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate in; show everything */
    jQuery(this_block_text).animate(..);
    jQuery(this_block_image).animate(..);
    jQuery(this_block_link).animate(..);
    jQuery(this_block_link_icon).animate(..);

}, function() {
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate out; put everything where they belong */
    jQuery(this_block_text).animate(..);
    jQuery(this_block_image).animate(..);
    jQuery(this_block_link).animate(..);
    jQuery(this_block_link_icon).animate(..);
});

我看到我在悬停后再次声明变量，但我不知道任何不再做的技巧。无论如何，即便如此，它也像魅力一样。

更新：固定代码＃1

var cached_blocks = jQuery(.block-link);

jQuery(cached_blocks).on('mouseenter mouseleave', function(){
    var this_block = jQuery(this),
        this_block_text = jQuery(this_block).children(div.text),
        this_block_image = jQuery(this_block).children(div.image),
        this_block_link = jQuery(this_block).children(div.link),
        this_block_link_icon = jQuery(this_block_link).children(a.icon);

    /* Animate in; show everything */
    this_block_text.animate(e.eventType(...));
    this_block_image.animate(e.eventType(...));
    this_block_link.animate(e.eventType(...));
    this_block_link_icon.animate(e.eventType(...));
});

注1：是的，我在代码的其他部分使用了cached_block。

Answer 1

你似乎没有充分理由重复代码？

var cached_blocks = jQuery('.block-link');

cached_blocks.on('mouseenter mouseleave', function(e) {
    var this_block = jQuery(this),
        this_block_text = this_block.children('div.text'),
        this_block_image = this_block.children('div.image'),
        this_block_link = this_block.children('div.link'),
        this_block_link_icon = this_block.children('a.icon');

    this_block_text.animate({something: (e.type==='mouseenter' ? 0 : 400)});
    this_block_image.animate({top: (e.type==='mouseenter' ? 10 : 200)});
    this_block_link.animate({left: (e.type==='mouseenter' ? 300 : 40)});
    this_block_link_icon.animate({right: (e.type==='mouseenter' ? 0 : 1400)});
});

除非你在其他地方使用包含text / image / link ...元素的变量，否则只是在下一行使用animate（）来缓存它们是浪费空间。

Answer 2

我认为您可以使用相同的回调闭包mouseout绑定mouseover和($element.on("mouseout mouseover", callback))，并使用e.type == "mouseout"之类的内容检测闭包内的哪个事件。

在您的代码中

this_block_text = jQuery(this_block).children(div.text)

然后

jQuery(this_block_text).animate(..);

为什么不呢？

this_block_text.animate(..)

this_block_text已经是一个jQuery对象

Answer 3

jQuery(this_block_text).animate(..);
jQuery(this_block_image).animate(..);
jQuery(this_block_link).animate(..);
jQuery(this_block_link_icon).animate(..);

没有必要将它们写为jQuery（...），因为this_block_text，this_block_image等已经是jQuery对象。

this_block_text.animate()

将会运行。

同样使用$。（）代替jQuery（）更好更清洁。

$（'div.block-link'）快于$（'。block-link'）

Answer 4

在此代码中最突出的是您调用jQuery的频率。如果您已经有一个jQuery对象，则无需再次调用jQuery。

此：

var cached_blocks = jQuery(".block-link");
jQuery(cached_blocks).hover(...);

做同样的事情：

var cached_blocks = jQuery(".block-link");
cached_blocks.hover(...);

如果您不打算重用cached_blocks，那么就不会有任何性能提升，因此您可以将代码简化为：

jQuery(".block-link").hover(...);

如果元素已经在页面上，我会将代码简化为：

var links = jQuery(".block-link");

var parts = {
    text: links.children("div.text"),
    image: links.children("div.image"),
    link: links.children("div.link"),
    icon: links.children("a.icon")
};

links.hover(function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
}, function() {
    parts.text.animate(..);
    parts.image.animate(..);
    parts.link.animate(..);
    parts.icon.animate(..);
});

在不知道你想要做什么样的动画的情况下，我无法再简化它，但我怀疑你不需要这么多的动画调用。

jQuery .hover（）性能疑惑

4 个答案: