3

jQuery を整理するためにモジュール パターンを使い始めたところです (Christian Heilmann の元のチュートリアルのおかげです)。奇妙な問題が発生しています。次の JavaScript コードを検討してください。

var Gallery = function(){

  var $obj, $thumbs, $mainPic;

  function init($e){

    $obj = $e;
    $thumbs = $obj.find('.thumbnail');
    $mainPic = $obj.find('.main-pic');

    $obj.find($thumbs).bind('click',updateMainPic);

  };

  function updateMainPic() {
    $thumbs.removeClass('selected');
    $thumb = $thumbs.filter(this);
    $thumb.addClass('selected');
    newPicUrl = $thumb.data('src');    
    $mainPic.attr('src',newPicUrl);    
  };

  return {
    init:init
  }

}();

これは、次の HTML に含まれて使用されています。

<div id="gallery1">
  <img src="" class="main-pic">
  <ul>
    <li class="thumbnail" data-src="photo1.jpg">Photo 1</li>
    <li class="thumbnail" data-src="photo2.jpg">Photo 2</li>
    <li class="thumbnail" data-src="photo3.jpg">Photo 3</li>
    <li class="thumbnail" data-src="photo4.jpg">Photo 4</li>
  </ul>
</div>
<script type="text/javascript">
  Gallery.init($('#gallery1'));
</script>

<div id="gallery2">
  <img src="" class="main-pic">
  <ul>
    <li class="thumbnail" data-src="photo1.jpg">Photo 1</li>
    <li class="thumbnail" data-src="photo2.jpg">Photo 2</li>
    <li class="thumbnail" data-src="photo3.jpg">Photo 3</li>
    <li class="thumbnail" data-src="photo4.jpg">Photo 4</li>
  </ul>
</div>
<script type="text/javascript">
  Gallery.init($('#gallery2'));
</script>

私が直面している問題は、#gallery1 のサムネイルをクリックすると #gallery2 の画像が入れ替わるということですが、#gallery2 は期待どおりに機能しています。$obj 変数はインスタンス間で共有されているように見えますが、スコープは関数のプライベート インスタンスに限定されたままであると思いました。

これを適切にスコープして機能させる方法についてのアドバイスは大歓迎です。

4

3 に答える 3

4

問題は、ギャラリーがシングルトンであることです。2 番目の init を呼び出した瞬間に、内部の $obj 変数を置き換えています。

この状況では、モジュール パターンは使用しません。いずれにしても jQuery を使用している場合は、jQuery プラグイン (シンプル) または jQuery UI ウィジェット (状態の維持に非常に優れています) を作成する方が簡単です。

于 2011-08-29T22:10:09.220 に答える
0

モジュール パターンは、シングルトンの使用向けに設計されています。init メソッドを呼び出すたびに、$obj 変数を渡された $e に再ポイントします。したがって、$obj をドロップして他の 2 つを init に移動し、3 つのパラメーターを updateMainPic に渡すだけです。インスタンスベースのポインターが必要な場合は、シングルトンに、インスタンスを作成して dom クリックイベントに直接バインドできるプロトタイプ関数を返させます。

于 2011-09-01T13:51:37.910 に答える
0

モジュールパターンを使用できるかどうかを確認するために、しばらくの間、シナリオをいじりました。と、結束時に大きなハードルが発生しそうです。updateMainPic() 関数内で「this」のスコープを決定することは非常に困難になります。オブジェクトへの入札を可能にする _.bind() 関数を備えたunderscore.jsのような強力なライブラリを使用しても、このシナリオを簡単に克服することはできません。

Mike が述べたように、プラグインまたはウィジェットを使用すると、この特定のタスクが簡単になります。

$('li.thumbnail').bind('click', function() {
    $(this).closest('div').find('.main-pic').attr('src', $(this).attr('data-src'));
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
});
于 2011-08-30T04:55:21.443 に答える