jQuery_jquery を使用してオブジェクト内のセレクターをキャッシュする簡単な方法

jQuery などのライブラリを使用する場合、開発者はセレクターを使用して DOM 内の要素にアクセスし、要素を操作することがよくあります。ページ上で選択範囲に繰り返しアクセスする場合、パフォーマンスを向上させるために選択範囲をキャッシュすることをお勧めします。

例を見てみましょう。

jQuery(document).ready(function() {
  jQuery('#some-selector').on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
 
  jQuery('#another-element').on('hover', function() {
    jQuery(this).slideUp();
  });
 
  jQuery('#some-selector').on('click', function() {
    alert('You have clicked a featured element');
  });
 
  jQuery('#another-element').on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

おそらく、上記のスニペット内で ID「some-selector」と「another-element」が 2 回言及されていることにお気付きかと思います。これらのセレクターを変数に保存すると、セレクターを再利用できるようになり、選択操作を繰り返す必要がなくなります。

jQuery コードにさまざまなセレクターを蓄積し始めると、セレクターをキーと値のペアとしてオブジェクトにキャッシュすることがいかに便利であるかがわかります。これにより、スクリプト内のどこからでも簡単にアクセスできるようになり、これらのセレクターの管理も簡単になります。

セレクターをキャッシュした後、改善されたコードは次のようになります。

var someNamespace_Dom = {
  someSelector : 'jQuery("#some-selector")',
  anotherElement: 'jQuery("#another-element")',
};
 
jQuery(document).ready(function() {
  someNamespace_Dom.someSelector.on('hover', function() {
    jQuery(this).fadeOut('slow').delay(400).fadeIn();
    console.log(jQuery(this).text());
  });
  someNamespace_Dom.anotherElement.on('hover', function() {
    jQuery(this).slideUp();
  });
  someNamespace_Dom.someSelector.on('click', function() {
    alert('You have clicked a featured element');
  });
  someNamespace_Dom.anotherElement.on('mouseout', function() {
    jQuery(this).slideUp();
  });
});

セレクターが変数にキャッシュされたため、操作対象の要素を見つけるために DOM ツリーを繰り返し走査する必要がなくなりました。 「someNamespace_Dom」オブジェクトを使用すると、キーと値のペアをさらに追加できるため、メンテナンスが容易になります。