Funzione JavaScript che agisce sullo stesso elemento ogni volta

Question

Funzione JavaScript che agisce sullo stesso elemento ogni volta

#1 da (2 voti)
#2 da (-1 voti)

1

Diciamo che ho un progetto HTML / JS che implica l'interazione con una tela. Ridimensionamento, disegno, recupero dello stato corrente, ecc.

Ovviamente dovrei separarli in diverse funzioni. Tuttavia, non sono sicuro del modo migliore per farlo. C'è solo una tela, quindi ogni chiamata di funzione agirà sempre sulla stessa area.

Con questo in mente, sarebbe meglio passare l'elemento canvas (o un oggetto jQuery, per essere specifici ... non proprio rilevanti per la domanda) come parametro o no? Ad esempio:

function setInitialCanvasSize(canvas){
    canvas.width = 100;
    canvas.height = 100;
}

setInitialCanvasSize($("#canvas"));

vs

function setInitialCanvasSize(){
    $("#canvas").width = 100;
    $("#canvas").height = 100;
}

setInitialCanvasSize();

Quale è meglio e perché?

Il primo si sente come dovrebbe essere migliore. Ma c'è una piccola parte di me che pensa "Perché preoccuparsi?", E onestamente non riesco a trovare una risposta soddisfacente.

html dependency-injection functions javascript canvas

posta clb 21.11.2016 - 15:39

fonte

2 risposte

Leggi altre domande sui tag html dependency-injection functions javascript canvas

Abilità che interagiscono con aspetti di altre abilità - come implementare in modo efficiente Disaccoppiamento del caricamento di dati, ordinamento e utilizzo

score 2 · Answer 1

Il primo è migliore per molte ragioni:

Riutilizzabilità: puoi applicare questo comportamento su qualsiasi tela poiché non è direttamente accoppiata a una tela specifica. Questo potrebbe non essere l'argomento migliore se si avrà sempre un solo canvas su cui operare.
Testabilità: il secondo esempio ha dipendenze nascoste che rendono più difficile l'installazione dei test delle unità. Devi configurare lo stato di un intero documento DOM piuttosto che creare semplicemente un HTMLCanvasElement in memoria.
Prestazioni: nel secondo esempio, il riferimento DOM dell'area di disegno dovrà essere interrogato almeno una volta per ogni operazione, mentre nel primo si può memorizzare nella cache il riferimento DOM della tela in una variabile.
Manutenzione: su larga scala le dipendenze nascoste come nel secondo esempio rendono il codice molto più difficile da capire e mantenere.

Usare il primo approccio non significa che devi ripetere te stesso ogni volta però. È possibile utilizzare l'applicazione di funzione parziale per associare la funzione a un'area specifica:

function setInitialCanvasSize(canvas){
    canvas.width = 100;
    canvas.height = 100;
}

let canvas = document.getElementById('canvas');

setInitialCanvasSize = setinitialCanvasSize.bind(null, canvas);

setInitialCanvasSize();
setInitialCanvasSize();

Ovviamente in un'applicazione del mondo reale probabilmente non dovresti avere variabili globali. La tua applicazione dovrebbe piuttosto esporre una singola variabile globale attraverso la quale rende disponibile il suo punto di ingresso.

score -1 · Answer 2

La tua intuizione è giusta, la prima è "migliore" perché può essere riutilizzata per una tela arbitraria. Pertanto, se hai sempre un altro canvas per il quale desideri impostare le dimensioni su 100, hai già una funzione configurata per tale scopo.

Tuttavia, se sei sicuro che non vorrai mai utilizzare questa funzione per una tela diversa, non ci saranno problemi reali con la tua seconda implementazione.

Oltre a ciò, con il nome della tua funzione, "initSize", deduco che lo fai sempre una sola volta, cioè durante l'inizializzazione. Se è così, non hai proprio bisogno di una funzione per fare questo lavoro. Dato che la funzione (la seconda) non ha parametri e esegue sempre le stesse due righe, suggerirei di rimuovere completamente la funzione e semplicemente di eseguire esplicitamente il codice che imposta invece la larghezza e l'altezza, direttamente in linea, senza effettuare alcuna chiamata di funzione o dovendo definire una funzione per farlo funzionare.