모듈 패턴을 사용하여 자바 스크립트에서 이벤트 위임을 확장하는 방법은 무엇입니까?

Question

자바 스크립트에서 모듈 패턴을 사용하고 있습니다. 이벤트를 처리하는 controller.js라는 파일이 있습니다. 문제는 하위 모듈을 사용하고 싶습니다. 그러나 이벤트가 controller.js에서 처리되기 때문에 하위 모듈에서 이벤트가 발생하면 어떻게 처리합니까?
PAGE_DISPLAYED이라는 맞춤 이벤트를 다른 파일 (예 : view.js)에서 발송합니다. 이 이벤트는 controller.js에서 듣고 표시된 페이지에 따라 특정 페이지에 특정한 추가 이벤트 처리기 바인딩과 같은 다른 작업을 수행합니다. 하위 모듈을 사용하여이를 수행하는 방법.

샘플 코드 :

window.KDJ || (window.KDJ = {}); //namespace 
KDJ.controller = (function() { 
    $(document).off('PAGE_DISPLAYED'); 
    $(document).on('PAGE_DISPLAYED', function (e, data) { 
    switch(data.pageId) { 
    case "page1": 
     // do something.. 
     break; 
    case "page2": 
     // do something.. 
     break; 
    } 
    }); 

    return { 
     // exported methods and props.. 
    }; 
})(); 

가 어떻게 위의 코드와 이벤트 위임을 연장 할 수 있습니까? 또는 코드 아키텍처가 제한을 가하는 경우

내가 jQuery를 모바일을 사용하고 PAGE_DISPLAYED 이벤트가 pagechange 이벤트를 수신하면됩니다 파견하고 있습니다 :

window.KDJ || (window.KDJ = {}); //namespace 
KDJ.view = (function() { 
    // ... 
    $(document).off('pagechange'); 
    $(document).on('pagechange', function (e, ui) { 
     //... 
     $(document).trigger(PAGE_DISPLAYED, {'pageId': loadedPageId, 'key': key}); 
    }); 
})(); 

감사합니다.

Answer 1

좋아, 나는 몇 가지 가능성을 문질러서하지만, 가독성의 측면에서 하나는 내가 가장이 좋아 :

window.KDJ || (window.KDJ = {}); //namespace 
KDJ.controller = (function() { 
    $(document).off('PAGE_DISPLAYED'); 
    $(document).on('PAGE_DISPLAYED', function (e, data) { 

     //Use the Id if it exsits, if not, try to execute the function 
     switch(data.pageId) { 
      case "page1": 
       // do something.. 
       break; 
      case "page2": 
       // do something.. 
       break; 
      default: 
       if(data.customFunction) 
        data.customFunction(); 
       break; 
     } 

    }); 

    return { 
     // exported methods and props.. 
    }; 
})(); 


KDJ.view = (function() { 
    // ... 
    $(document).off('pagechange'); 


    $(document).on('pagechange', function (e, ui) { 

     //the function will be executed 
     $(document).trigger(PAGE_DISPLAYED, { 
      customFunction = function(ui) { 
       console.log("I'm doing something awesome with the ui!"); 
      } 
     }); 

    }); 

    $(document).on('pagechange', function (e, ui) { 

     //here I'll use the switch 
     $(document).trigger(PAGE_DISPLAYED, { 
      'pageId': loadedPageId, 
      'key': key 
     }); 

    }); 
})(); 

Here 기본 않고, 다른 옵션이 있습니다. 귀하의 필요에 맞는 사람이 있는지 알려주십시오.