문제가 jQuery/모듈 패턴으로 유지 관리됩니다.

Question

저는 jQuery를 구성하기 위해 모듈 패턴 (Christian Heilmann의 원래 튜토리얼 덕분에)을 사용하기 시작했습니다. 이상한 문제가 발생했습니다. 다음과 같은 자바 스크립트 코드를 고려

포함 추적의 HTML에 사용되는

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 
    } 

}(); 

:

<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 변수가 인스턴스에서 공유되고있는 것 같지만 함수의 개인 인스턴스에 범위가 남아 있다고 생각했습니다.

적절하게 범위를 지정하고 작동시키는 방법에 대한 조언은 크게 감사하겠습니다.

Answer 1

문제는 갤러리가 싱글 톤입니다. 두 번째 init을 호출하는 순간 내부 $ obj 변수가 바뀝니다.

이 경우 모듈 패턴을 사용하지 않겠습니다. 어쨌든 jQuery를 사용한다면, jQuery 플러그인 (단순) 또는 jQuery UI 위젯 (상태 유지에 정말 유용함)을 작성하는 것이 더 쉽다.

Answer 2

시나리오를 사용하여 모듈러 패턴을 사용할 수 있는지 확인하려고했습니다. 바인딩 중에 엄청난 장애물이 발생하는 것처럼 보입니다. updateMainPic() 함수 안에서 'this'의 범위를 결정하는 것은 매우 어렵습니다. underscore.js과 같은 강력한 라이브러리를 사용하더라도 객체에 대한 biding을 허용하는 _.bind() 함수를 사용하면이 시나리오를 쉽게 극복 할 수 없습니다. 마이크가 언급 한 것처럼

, 플러그인 또는 위젯이 특정 작업은 사소한 만들 것 :

$('li.thumbnail').bind('click', function() { 
    $(this).closest('div').find('.main-pic').attr('src', $(this).attr('data-src')); 
    $(this).addClass('selected'); 
    $(this).siblings().removeClass('selected'); 
}); 

Answer 3

모듈 패턴은 더 싱글 사용을 위해 설계되었습니다. init 메소드를 호출 할 때마다 $ obj 변수를 전달 된 $ e에 repointing합니다. 그러므로 $ obj를 다른 두 개를 init으로 옮기고 세 개의 매개 변수를 updateMainPic으로 전달하십시오. 인스턴스 기반 포인터가 필요하면 인스턴스를 만들고 dom click 이벤트에 직접 바인딩 할 수있는 프로토 타입 함수를 반환하십시오.