JavaScript architecture - mediatori, quando usarli?

Question

Questa è più di una domanda generale sulla struttura del mio codice JavaScript e se sto andando nella giusta direzione verso un codice ben strutturato.

Il codice corrente che ho:

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

Ovviamente con il codice di cui sopra, posso utilizzare lo stesso spazio dei nomi (come per pagina/sezione del sito) e li chiamano via myNamespace.className.init() ecc posso anche combinare questi se voglio, ma sto incapsulando le classi per la leggibilità.

Ora, ho letto http://addyosmani.com/largescalejavascript/ sul concetto di mediatori. La mia seconda domanda è quando (e se) dovrei usare questi? Da className2 ovviamente posso fare:

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

Quindi, perché questo mai sottoscrivere className come mediator.subscribe("classNameInit") e pubblicare quell'evento in className?

Sono molto aperto a suggerimenti sulla struttura del mio codice in quanto questo è qualcosa che ho bisogno di ottenere mentre sto cambiando il modo in cui scrivo il mio JavaScript.

Answer 1

Lo si utilizzerà quando si hanno più pezzi che lavoreranno insieme in combinazioni illimitate in cui non si conoscono tutte le combinazioni prima del tempo o dove è più efficiente assumere tutte le combinazioni.

Diciamo che stavi creando un'app di social media e hai scritto una classe per incapsulare un elenco di utenti. In alcune schermate, facendo clic su un utente nella lista si apre il loro profilo, su un'altra schermata, magari facendo clic su un utente per cercare ogni commento lasciato, e su una terza schermata accade qualcos'altro.

Se si dovesse scrivere questo non utilizzando mediatore/PubSub, quello che ci si finisce con è un gruppo di istruzioni if ​​in caso 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') 
} 

mediatore è una soluzione per questo problema perché non richiede che UserList hanno conoscenza di ogni singola situazione che potrebbe finire in. Invece, il codice di cui sopra in UserList potrebbe semplicemente essere raffinato a trasmettere quando un utente fa clic su ...

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

Quindi ciascuno dei tuoi altre schermate o pezzi dell'interfaccia utente può semplicemente ascoltare il messaggio utente-click ...

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

Inoltre, qualora il mediatore comincia a brillare è perché questi altri componenti dell'interfaccia utente, come SearchBox non sono interessati a particolare quando UserList incendi un utente -click, sono interessati solo quando viene pubblicato un clic utente, altri I controlli dell'interfaccia utente sulla pagina possono attivare anche il clic dell'utente e questi pezzi possono reagire ad esso.

Nota a margine, className = { } non sta creando una classe. Quello che probabilmente vuoi è className = function() { }.