Javascript 모듈 패턴과 Jquery가 작동합니까?

Question

JavaScript Module Pattern을 사용하려고하는데 어떻게해야되는지 확신 할 수없는 문제가 있습니다.

그래서 코드를 분리하고 읽기 쉽게 2 개의 스크립트 파일이 있습니다.

// script 1 

var abc = (function (my, $) 
{ 
    my.events = function() 
    { 
     // selectors is from my base file(not shown as I don't think it is needed to be shown) 
     // my.selectors.createFrm = '#createFrm' 
     var createSubmitFrmHandler = $(my.selectors.createFrm).live('submit', function (e) 
     { 
      e.preventDefault(); 
     }); 

    } 

    return my; 

} abc || {}, jQuery)); 

// script 2 

var abc = (function (my, $) 
{ 
    my.dialogs = { 

     addDialog: function() 
     { 
      var $dialog = $('<div></div>').dialog(
      { 
       width: 580, 
       height: 410, 
       resizable: false, 
       modal: true, 
       autoOpen: false, 
       title: 'Basic Dialog', 
       buttons: 
        { 
         Cancel: function() 
         { 
          $(this).dialog('close'); 
         }, 
         'Create': function() 
         { 

          jQuery.validator.unobtrusive.parse(my.selectors.createFrm) 
          // this is undefined as page loadup no form was found so live did not kick in 
          my.createSubmitFrmHandler.validate().form(); 

         } 
        } 
      }); 

      return $dialog; 
     }, 

    return my; 
} abc || {}, jQuery)); 

따라서 createSubmitFrmHandler가 정의되어 있는지 확인하고 수행중인 작업을 계속 수행하는 방법을 잘 모르겠습니다.

편집

는 내가 확실하지 오전 유일한 것은 내가 반복이 함수를 호출하면이 객체를 만들고 유지하거나 의지하는 것입니다이

var abc = (function (my, $) 
    { 
     my.events = function() 
     { 
      // some one time events here 
     } 

     my.test = function() 
     { 
      var add = $(selectors.createFrm).live('submit', function (e) 
      { 
       e.preventDefault(); 
      }); 

      return add; 
     }; 
    } 

처럼 뭔가를하고 결국 라이브가 이미 묶여 ​​있고 바인딩을 더 이상하지 않을 것입니다.

Answer 1

모듈 패턴의 요점은 자바 스크립트에 기능 범위가 있다는 것입니다 : var으로 정의 된 변수는 정의 된 기능에 국한됩니다. 당신은 당신이 my.events에 할당 기능에 createSubmitFrmHandler를 정의하기 때문에

(function() { 
    var foo = 'bar'; 
    // foo == 'bar' 
})(); 
// foo == undefined 

, 그 기능의 신체 외부에서 참조 할 수 없습니다. 이 문제를 해결하는 데는 여러 가지 방법이 있습니다. 모든 모듈에 my을 전달할 때 첫 번째 모듈에는 my.events.handler = createSubmitFrmHandler을 설정하고 다른 모듈에는 을 표시 할 수 있습니다. my이 보이기 때문에 다른 모듈에 표시 될 수 있습니다. 당신은 my.events() return createSubmitFrmHandler을 가지고 그런 식으로 참조 할 수 있습니다. 선택기가 값 비싼 값이 아닌 경우 createSubmitFrmHandler의 값을 다시 계산하고 createSubmitFrmHandler을 참조하는 대신 대화 상자 모듈에서 $(my.selectors.createFrm).validate().form();을 사용하면됩니다. 뭐든간에.