Struttura del codice per il modulo UI complesso con componenti strongmente legati

0

Sto cercando di capire un nuovo approccio nell'organizzazione della mia struttura di codice.

Diciamo che ho un modulo a pagina singola composto da UI:

  • modulo con filtri di ricerca,
  • tabella molto interattiva (righe impaginate, multilivello, espandibili e attivabili),
  • grafico

e tutti sono strongmente legati l'uno all'altro (ogni azione del modulo influisce su tabella e grafico, alcune azioni della tabella possono influenzare la forma e il grafico e un pulsante nel grafico influirebbe sulla tabella).

Ho sempre usato il modello del modulo rivelatore e sebbene sia molto pratico e diretto, non sono sicuro che sia l'approccio più elegante per i moduli più grandi (oltre 1000 linee di codice) o per moduli che dipendono l'uno dall'altro.

La struttura attuale ha il seguente aspetto:

var module = (function() {
    /**
     * Initializes the module
     */
    var init = function() {
        // inits 3rd party plugins:
        initDataTable();
        initSuggest();
        initTooltip();
        initAjaxNavigation();

        bindEvents(); // binds all UI events in a synchronous way

        xhrLoadGraphData();
    };

    // (...)
    // all functions (64 anonymous functions not grouped thematically whatsoever), i.e:
    // initSuggest()
    // getSelectedRowsFromTable()
    // getActiveUnitTab()
    // xhrLoadRows()
    // xhrLoadGraphData()
    // resetGraph()
    // reformatPlotData()
    // initSearch()
    // resetSearch()
    // bindEvents()
    // etc...

    return {
        init: init
    };
})();

// usage:
module.init();

Una volta ho provato a raggruppare i metodi in modo tematico creando moduli all'interno del modulo principale, e anche se ciò mi dava una piccola sensazione di ordine, non mi piaceva molto:

  • Ho dovuto decidere costantemente quali metodi dovrei rendere privati o pubblici (restituendoli nel modulo)
  • Ho dovuto controllare costantemente se sto chiamando i metodi all'interno del modulo o all'esterno (se dovessi scrivere graph.resetGraph () invece di resetGraph ())

Alla fine: profitto troppo piccolo per il costo della complicità inutile.

Ho anche provato a dividerli al di fuori del modulo principale e tenerli in file separati, il che era un po 'meglio, ma probabilmente è il momento in cui dovrei cercare un framework o un modello di design diverso. Puoi consigliare qualcosa in questo caso?

    
posta overdriven 12.04.2016 - 17:05
fonte

0 risposte

Leggi altre domande sui tag