1

フロントエンド操作プログラミングを簡素化するための 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>

そして、そのうちの1つの中にホバリングするとアニメーション化する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(..);

this_block_text、this_block_image などは既に jQuery オブジェクトであるため、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 に答える