자바 스크립트 아키텍처 - 중재자, 언제 사용합니까?

Question

이것은 내 JavaScript 코드의 구조에 대한 일반적인 질문이며 잘 구조화 된 코드를 향한 올바른 방향으로 나아가고 있는지에 대한 질문입니다.

내가있어 현재 코드 :

는 물론 위의 코드와

(function (myNamespace, $, undefined) { 
    myNamespace.className = { 
     init:function { } // do stuff 
    } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

(function (myNamespace, $, undefined) { 
     myNamespace.className2 = { 
      init:function { } // do stuff 
     } 
} (window.myNamespace= window.myNamespace|| {}, jQuery))); 

, 내가 (페이지/사이트 섹션에 따라) 같은 네임 스페이스를 사용하고 나는 또한 결합 할 수 있습니다 등 myNamespace.className.init()를 통해 그들을 호출 할 수 있습니다 이것들은 원한다면,하지만 나는 가독성을 위해 클래스들을 캡슐화하고있다.

이제는 중재자의 개념에 대해 http://addyosmani.com/largescalejavascript/을 읽었습니다. 내 이차적 인 질문은 언제 사용해야합니까? className2에서 분명히 나는 ​​할 수있다 :

myNamespace.className2 = { 
       init:function { myNamespace.className.init() } // do stuff 
      } 

그래서 왜 이제까지 mediator.subscribe("classNameInit") 같은 클래스 명을 구독하고 클래스 이름에 해당 이벤트를 게시 할 것인가?

내 코드의 구조에 대한 제안은 매우 환영합니다. 바로 이것이 필자가 자바 스크립트를 작성하는 방식을 바꾸는 동안 바로 얻을 필요가 있기 때문입니다.

Answer 1

미리 여러 ​​조합을 모르는 경우 또는 모든 조합을 추측하는 것이 더 효율적 인 무제한 조합으로 여러 구성 요소가 함께 작동 할 때 사용합니다.

소셜 미디어 앱을 제작하고 사용자 목록을 캡슐화하기 위해 클래스를 작성했다고 가정 해 보겠습니다. 일부 화면에서 목록의 사용자를 클릭하면 프로필이 열리고 다른 화면에서는 사용자가 클릭 한 모든 의견을 검색하고 다른 화면에서는 다른 일이 발생합니다. 이 하지 사용 중재자/pubsub를 작성한다면

은, 당신이 끝장 무엇 onclick 이벤트에 문 ...

UserList.prototype.onUserClick = function(user) { 
    // Check if we're supposed to open a popup 
    if (this.mode === 'profile') 

    // Check for something else 
    else if (this.mode === 'something else') 

    // Check for another case 
    else if (this.mode === 'foo') 
} 

중재자가에 대한 해결책 인 경우의 무리입니다 이 문제는 UserList가 끝날 수도있는 모든 상황에 대한 지식을 필요로하지 않기 때문에이 문제가 발생하지 않습니다. 대신 위의 코드를 사용자가 클릭하면 브로드 캐스팅 할 수 있습니다 ...

UserList.prototype.onUserClick = function(user) { 
    this.publish('user-click', user); 
} 

그러면 각자 다른 화면 또는 UI 조각은 단순히 SearchBox 같은 이러한 다른 UI 구성 요소, 특히 때 UserList 화재 사용자에 관심이없는 때문에

// On pages where there needs to be a popup profile 
Mediator.onMessage('user-click', function(data) { 
    showProfilePopup(data); 
}); 

// Or perhaps on a search page 
SearchBox.onMessage('user-click', function(data) { 
    this.searchByUser(data); 
}); 

또한, 중재자가 빛나는 시작되는 곳입니다 ... 사용자가 클릭 메시지를 수신 할 수 있습니다 클릭하면 사용자 클릭이 게시 될 때만 관심이 있습니다. 기타 페이지의 UI 컨트롤은 사용자 클릭을 발생시킬 수 있으며 이러한 요소는 이에 대응할 수 있습니다.

참고로 className = { }은 클래스를 만들지 않습니다. 당신이 원하는 것은 className = function() { }입니다.