1

虽然我知道一些 jQuery 来简化前端操作编程，但我也知道一些“最佳实践”来提高浏览器的性能，比如缓存通过varID 选择器并始终从 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_blocks。

4

4 回答 4

2

您似乎无缘无故地重复代码？

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() 一起使用是浪费空间。

于 2012-06-25T00:00:56.077 回答
1

我认为您可以绑定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 对象

于 2012-06-24T23:47:49.153 回答
1 
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') 快

于 2012-06-24T23:49:54.127 回答
1

在这段代码中最突出的是你调用的频率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(..);
});

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

于 2012-06-24T23:52:27.700 回答