Modelli di implementazione Javascript per siti MVC lato server

Sto cercando informazioni sui modelli comuni per l'inizializzazione e l'esecuzione di JavaScript pagina per pagina in un'architettura di sito Web MVC "tradizionale" lato server.

Alcuni mesi fa, il mio team di sviluppo ha iniziato, ma ha abbandonato, una grande re-architettura della principale app web della nostra azienda, inclusa una riprogettazione dell'intero front-end. Nel processo, c'è stata qualche discussione sull'architettura di Javascript nella versione attuale del sito, e se si adattasse a un modello di design chiaro e moderno.

Ora sono tornato al processo di revisione del front-end di questo e di altri siti MVC (Ruby on Rails e MVC.net) per implementare un framework responsive (Bootstrap), e nel processo dovrò nuovamente rivedere quindi aggiorna e aggiorna molti Javascript.

Queste applicazioni web NON sono applicazioni Javascript a pagina singola (infatti, stiamo eliminando molto Ajax) o progettate per richiedere un pattern MVC Javascript; queste app sono fondamentalmente brochure, catalogo e siti amministrativi che seguono un pattern MVC lato server. La maggior parte dei Javascript richiesti sono plug-in precostruiti comportamentali (JQuery e Bootstrap, et al) che vengono eseguiti su nodi DOM specifici.

Darò un resoconto molto breve (per quanto breve possa essere) dell'architettura corrente solo per illustrare l'ambito e il tipo di paradigma di cui sto parlando. Spero che ti aiuterà a capire la natura degli schemi che sto cercando, ma non sto cercando commenti sulle specifiche di questo codice.

Ciò che ho fatto in passato è relativamente semplice e facile da mantenere, ma, come detto sopra, ad alcuni degli altri sviluppatori non piace l'attuale architettura.

Attualmente, su documenti pronti, eseguo qualsiasi cosa Javascript globale debba succedere in ogni pagina e poi richiamo una funzione init specifica della pagina per inizializzare la funzionalità specifica del nodo, recuperando il metodo init da un oggetto JS.

A ogni caricamento della pagina, succederà qualcosa di simile:

$(document).ready(function(){
  $('header').menuAction();
  App.pages.executePage('home','show'); //dynamic from framework request object
});

E il javascript dell'applicazione principale è come

App = {
  usefulGlobalVar: 0,
  pages:
  {
    executePage: function(action, controller)
    { 
       // if exists, App.pages[action][controller].init()
    },
    home:
    {
      show:
      {
         init: function()
         {
            $('#tabs').tabs(); //et. al
         },
         normalizeName: function()
         {
            // dom-specific utility function that
            // doesn't require a full-blown component/class/module
         }
      },
      edit:
          ...
    },
    user_profile:
      ...
  }
}

Eventuali funzionalità e funzionalità comuni che richiedono la modularizzazione o il compotentizing vengono eseguite secondo necessità con la prototipazione. Per l'implementazione comune dei plugin, estendo spesso JQuery, così posso inizializzare facilmente un plug-in con le stesse opzioni in tutto il sito.

Ad esempio,

$('[data-tabs]').myTabs()

con questo codice in un file javascript di utilità:

 (function($) {
      $.fn.myTabs = function() {
        this.tabs( {
          //...common options
        });
      };
    })

Indicatori di articoli, libri o altre discussioni sarebbero i benvenuti. Di nuovo, sto cercando un modello di implementazione a livello di sito, NON un framework JS MVC o istruzioni generali sulla creazione di classi o componenti JS.

Grazie per il tuo aiuto!