Accesso alle proprietà delle classi composite senza interrompere l'incapsulamento

Question

Accesso alle proprietà delle classi composite senza interrompere l'incapsulamento

#1 da (1 voti)

1

Abbiamo creato una classe che ti consente di disegnare facilmente elementi su un elemento <canvas> .

Quella classe è chiamata Canvas . Ho incapsulato l'elemento <canvas> e la classe stessa in un WebComponent, chiamato <paper-canvas> .

<paper-canvas>
  <canvas id="#canvas"></canvas>
<paper-canvas>

<script>
  class PaperCanvas {
    constructor() {
      this.canvas = new Canvas('#canvas')
    }
  }
</script>

La classe Canvas ha molti metodi come:

importPNG()
drawSquare()

etc ..

Quindi adesso quando vogliamo dire importPNG() facciamo qualcosa del genere:

document.querySelector('paper-canvas').canvas.importPNG()

ma ho la sensazione che si stia rompendo l'incapsulamento dal momento che sto accedendo alle proprietà interne di <paper-canvas> .

Un'alternativa potrebbe essere qualcosa di simile a questo:

<paper-canvas>
  <canvas id="#canvas"></canvas>
<paper-canvas>

<script>
  class PaperCanvas {
    constructor() {
      this.canvas = new Canvas('#canvas')
    }

    importPNG() {
      return this.canvas.importPNG()
    }
  }
</script>

e quindi per usarlo:

document.querySelector('paper-canvas').importPNG()

ma questo significa che ogni volta che aggiungo un nuovo metodo su Canvas che dovrebbe essere pubblicamente accessibile agli altri membri, vorrei anche aver bisogno di aggiungerlo alla mia classe PaperCanvas .

Qual è il modo consigliato di trattare tali casi?

object-oriented ecmascript

posta Nik Kyriakides 19.04.2018 - 11:49

fonte

1 risposta

Leggi altre domande sui tag object-oriented ecmascript

Che cosa significa "copertura dei dati" quando si parla di processi ETL? Le funzionalità distribuite con GitHub Flow scompaiono dalla produzione?

score 1 · Accepted Answer

Sembra che quello che vuoi veramente sia ereditare PaperCanvas da Canvas . ECMAScript6 (che è, suppongo, la lingua che stai usando qui) supporta questo, puoi implementarlo come

class PaperCanvas extends Canvas {
    constructor() {
        super('#canvas');
    }
}

Ora una chiamata come

 document.querySelector('paper-canvas').importPNG()

dovrebbe funzionare, senza bisogno di implementare le chiamate di delega per ogni metodo ereditato.