JavaScript architecture - mediators, when to use them?

Question

Esto es más una pregunta general sobre la estructura de mi código JavaScript y si voy en la dirección correcta hacia un código bien estructurado.

El código actual Tengo:

(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))); 

Obviamente con el código anterior, puedo usar el mismo espacio de nombres (según la página de la sección/sitio) y llamarlos a través de myNamespace.className.init() etc. También se pueden combinar estos si quiero, pero estoy encapsulando clases para facilitar la lectura.

Ahora, he estado leyendo http://addyosmani.com/largescalejavascript/ sobre el concepto de mediadores. Mi segunda pregunta es cuándo (y si) debería usarlos? De className2, obviamente, que puedo hacer:

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

Así que ¿por qué esta vez suscribirse a className como mediator.subscribe("classNameInit") y publicar ese evento en className?

Estoy muy abierto a sugerencias sobre la estructura de mi código, ya que es algo que necesito corregir mientras estoy cambiando la forma en que escribo mi JavaScript.

Answer 1

Lo usarías cuando tienes varias piezas que funcionan juntas en combinaciones ilimitadas en las que no conoces todas las combinaciones por adelantado o donde es más eficiente asumir todas las combinaciones.

Digamos que estaba creando una aplicación de redes sociales y escribió una clase para encapsular una lista de usuarios. En algunas pantallas, al hacer clic en un usuario en la lista, se abre su perfil, en otra pantalla, quizás al hacer clic en un usuario, se buscan todos los comentarios que dejaron, y en una tercera pantalla ocurre algo más.

Si se va a escribir este no usando mediador/pubsub, lo que iba a terminar con es un montón de si las declaraciones en el evento 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') 
} 

Mediador es una solución de este problema, ya que no requiere que UserList tiene conocimiento de todos y cada situación que podría terminar en. en su lugar, el código anterior en UserList podría simplemente ser refinado para difunde cuando se hace clic en un usuario ...

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

Luego, cada uno de sus otras pantallas de interfaz de usuario o piezas pueden simplemente escuchar el mensaje de usuario y haga clic en ...

// 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); 
}); 

Además, cuando el mediador comienza a brillar se debe a que estos otros componentes de interfaz de usuario, como SearchBox no están interesados ​​en concreto cuando UserList incendios un usuario -click, están interesados ​​solo cuando se publique un clic de usuario, otros Los controles de la interfaz de usuario en la página pueden disparar también al usuario y estas piezas pueden reaccionar.

En una nota al margen, className = { } no está creando una clase. Lo que probablemente quiera es className = function() { }.