HTML Canvas: i valori x, y della mia app dovrebbero essere globali?

Question

HTML Canvas: i valori x, y della mia app dovrebbero essere globali?

#1 da (1 voti)

1

Ho un grande file di funzioni. Ognuna di queste funzioni è responsabile del disegno di una particolare parte dell'applicazione. La mia app ha parametri xey che uso nella funzione di setup per spostare l'intera app in giro per provare diversi posizionamenti. Quindi, naturalmente, ho bisogno di usare questi valori xey per ancorare il rendering dei componenti di ogni funzione in modo che tutto si muova all'unisono se i valori globali x, y cambiano mai.

La mia domanda è: è una cattiva pratica / architettura avere questi valori x, y nel namespace globale e avere ciascuna funzione direttamente ad accedervi in questo modo?

function renderFace() {
   var x = App.x;
   var y = App.y;

   // drawing here
}

c'è un modo migliore che mi manca?

html5 architecture javascript canvas

posta Joe 28.06.2013 - 17:39

fonte

1 risposta

Leggi altre domande sui tag html5 architecture javascript canvas

Istanziazione di oggetti multipli Un approccio migliore al codice refactor quando si esegue il test A / B

score 1 · Answer 1

...is it bad practice/architecture to have these x,y values in the global namespace... like so?

Nel tuo codice, x e y non sono nello spazio dei nomi globale; sono proprietà di App . È un buon inizio: stai utilizzando App.x anziché window.x .

Detto questo, App e renderFace sono accoppiati: non puoi applicare il comportamento funzionale di renderFace a qualsiasi cosa tranne i valori di App.x / y . Se vuoi ridurre l'accoppiamento per rendere renderFace più generale, potrebbe essere meglio avere renderFace accept x e y come argomenti:

function renderFace(x, y) {
   // drawing here
}

e alcuni richiami alla chiamata di codice renderFace(App.x, App.y) invece di solo renderFace() .

In alternativa, imposta le tue funzioni di rendering ai metodi effettivi di App e fai riferimento alle proprietà utilizzando this .

var App = {
    x: 0,
    y: 0,

    renderFace: function() {
        var x = this.x;
        var y = this.y;

        // drawing here
    }
}

Avendo App "own" renderFace come metodo, indica logicamente che renderFace è un comportamento di App .

Quando qualcuno che legge il tuo codice vede renderFace() , potrebbe non sapere che dipende dallo stato di App . Quando vedono App.renderFace() o renderFace(App.x, App.y) la relazione è esplicitamente chiara. Inoltre, spostando l'identificatore App dalla tua funzione, è facile riutilizzare renderFace in altri contesti non App successivi.