Organizzazione di grandi applicazioni Javascript - Il livello di visualizzazione

Oggi le applicazioni Javascript di una dimensione pertinente diventano sempre più comuni e, in caso di necessità, vengono identificati alcuni modelli per gestire il complessità del codice.

Cerco di seguire un buon consiglio, ma ho qualche problema nell'organizzare il livello di visualizzazione di un'applicazione che sto scrivendo. Mentre gli altri livelli sono ben disaccoppiati, ho un grosso blob per l'interfaccia utente che vorrei evitare. Per chiarire le cose, non sto parlando dell'applicazione che la dimensione Osmani (vedi il link sopra) considera - come Gmail - ma comunque abbastanza grande da meritare un'architettura leggermente migliore.

Il mio problema è che ho molti elementi dell'interfaccia utente che devo inserire. Tutti questi elementi possono avere margini, paddings e così via, e ho bisogno di impostare in modo esplicito le loro dimensioni, in quanto l'interfaccia utente ha un sacco di vincoli che non sono espressi dai CSS (ad esempio, alcune immagini devono essere ridimensionate con un numero intero di loro appare in fila, senza spazio vuoto alla fine). Come se questo non fosse abbastanza, la dimensione di alcuni elementi dipende da quanto spazio il loro contenitore consente, e questo può dipendere dalla dimensione di altri elementi e così via.

Quello che sto facendo adesso è calcolare la dimensione di tutti gli elementi ogni volta che la dimensione della finestra cambia. Parto dal primo, che posso calcolare liberamente. Non appena viene posizionato, sparo un evento che attiva il calcolo della seconda e così via.

Questo approccio funziona più o meno, ma è brutto da morire. Ogni funzione è piena di codice come

function resizeFoo() {
    var parent = $('#foo').parent(),
        parentWidth = parent.width(),
        availableWidth = parentWidth - parseInt(parent.css('padding-left'), 10);

    $('#foo').width(availableWidth);
}

solo molto più a lungo. Non appena aggiungo il padding destro al genitore di # foo, devo aggiornarlo. Ovviamente, potrei sottrarre il padding da entrambi i lati fin dall'inizio, rendendolo più lungo.

Are there any useful patterns to handle complex UI sizing and positioning requirements, so that I can reorganize all of the above mess into something meaningful?