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

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

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

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

출처

2011-08-29 bjork24

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

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

출처

2011-08-29 22:10:09

jQuery 플러그인으로 변환하면 모두 해결되었습니다 - 감사합니다! – bjork24

@ Bjork24 아무 문제 없어 - 관련 메모에서 자바 스크립트 디자인 패턴 (http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/)에서 무료 전자 책을 확인하십시오. 너의 공부에 행운을 빌어. –

시나리오를 사용하여 모듈러 패턴을 사용할 수 있는지 확인하려고했습니다. 바인딩 중에 엄청난 장애물이 발생하는 것처럼 보입니다. 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'); 
});

출처

2011-08-30 04:55:21 rkw

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

출처

2011-09-01 13:51:37

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

답변

관련 문제