JavaScript  »  Guide  »  Guida Javascript: tecniche avanzate 

Quando creiamo un componente (o comunque una classe) è buona norma realizzare più metodi, assegnando a ciascuno un lavoro specifico. Questo ci consente poi di effettuare l'override dei soli metodi che ci occorre modificare.

Nel nostro esempio abbiamo problemi con la funzione render, che costruisce completamente la tabella non delegando task a nessun altro metodo e di fatto non permettendo di modificare niente, se non riscrivendo completamente il metodo (attività che a noi programmatori pigri non interessa).

Una possibile ristrutturazione potrebbe portarci a scomporre il metodo render in due sottometodi createHeader e createBody:

<script type="text/javascript">

DataGrid.prototype.render = function(to) {

  this.tableEl = document.createElement("TABLE");
  this.tableEl.style.border = "1px solid black";
  this.tableEl.style.borderCollapse = "collapse";
  this.createHeader();
  this.createBody();
  to.appendChild(this.tableEl);
}

DataGrid.prototype.createHeader = function() {

  var thead = document.createElement("THEAD");
  var trHead = document.createElement("TR");
  
  for(var i = 0; i<this._header.length; i++) {
    var th = document.createElement("TH");
    th.appendChild(document.createTextNode(this._header[i]));
    th.style.padding = "5px";
    th.style.borderBottom = "1px solid black";
    trHead.appendChild(th);
  }
  thead.appendChild(trHead);
  this.tableEl.appendChild(thead);
}

DataGrid.prototype.createBody = function() {

  var tbody = document.createElement("TBODY");
  
  for(var i = 0; i<this._data.length; i++) {
    var trBody = document.createElement("TR");
    trBody.onmouseover = this._onmouseover.setScope(this, trBody, i);
    trBody.onmouseout = this._onmouseout.setScope(this, trBody, i);
    trBody.onclick = this._onclick.setScope(this, trBody, i);
    
    for(var c = 0; c<this._data[i].length; c++) {
      var td = document.createElement("TD");
      td.appendChild(document.createTextNode(this._data[i][c]));
      td.style.padding = "5px";
      trBody.appendChild(td);
    }
    tbody.appendChild(trBody);
  }
  this.tableEl.appendChild(tbody);
}
</script>

In questo modo il funzionamento non cambierà, ma sarà possibile estendere la classe DataGrid modificando il modo in cui viene costruito l'header.

Con questo secondo approccio è stato necessario utilizzare una nuova proprietà (tableEl) come container per l'oggetto DOM rappresentato dalla tabella.

Proviamo ora a creare utilizzando l'ereditarietà la IconDataGrid: griglia che presenta nell'header oltre che al testo anche una piccola icona. Sarà necessario modificare solamente il costruttore e il metodo createHeader:

<script type="text/javascript">

function IconDataGrid(header, headerIcons, data) {
  this._headerIcons = headerIcons;
  DataGrid.call(this, header, data);
}

IconDataGrid.inherits(DataGrid);

IconDataGrid.prototype.createHeader = function() {
  var thead = document.createElement("THEAD");
  var trHead = document.createElement("TR");
  
  for(var i = 0; i<this._header.length; i++) {
    var icon = this._headerIcons[i];
    var th = document.createElement("TH");
    th.appendChild(document.createTextNode(this._header[i]));
    th.style.padding = "5px";
    th.style.borderBottom = "1px solid black";
    th.style.background = "url("+icon+") no-repeat left";
    th.style.paddingLeft = "14px";
    trHead.appendChild(th);
  }

  thead.appendChild(trHead);
  this.tableEl.appendChild(thead);
}
</script> 

Le uniche righe degne di nota sono la chiamata al costruttore di DataGrid tramite il metodo call e l'utilizzo della funzione inherits definita in precedenza per gestire l'ereditarietà in maniera automatica.

Le altre aggiunte sono banali: il salvataggio nella proprietà _headerIcons del vettore contenente i path per le immagini e l'aggiunta due semplici proprietà CSS all'elemento th (background e paddingLeft). Il gioco è fatto!

Ecco qua l'esempio completo.

Ovviamente il codice è ancora ad uno stato abbastanza iniziale, la suddivisione dei compiti è solo parziale e l'introduzione di altre modifiche presenta gli stessi problemi visti in precedenza, ma tramite questo esempio abbiamo capito non solo la comodità dell'ereditarietà, ma anche l'importanza della progettazione del codice che deve essere sempre robusto e facilmente estendibile.

Altri articoli

Altre guide

Altre newsletter