Migliorare la leggibilità del codice con i JSON

Le variabili

Quando le informazioni che dobbiamo salvare, modificare o anche semplicemente leggere non sono solo semplici valori fini a se stessi (come un contatore, il risultato di una somma o un elemento HTML magari da inserire nel DOM), ma valori che per qualche logica rappresentano varie proprietà di un unico elemento, non possiamo affidarci solo alla definizione di singole variabili.

Infatti in questa maniera saremo costretti ad usare nomi i più parlanti possibile per differenziarli e mantenere una buona leggibilità del codice, ma che così facendo rischieremo di dover inventare variabili lunghe e fantasiose anche solo per evitare di avere errori di sovrascrittura.

var mySquareBase = 5;
var mySquarePerimeter = mySquareBase * 4;
var mySquareArea = mySquareBase * mySquareBase;

var yourSquareSide = 8;
var yourSquarePerim = yourSquareSide * 4;
var yourSquareArea = yourSquareSide * yourSquareSide;

In questo esempio sopra riportato (ovviamente enfatizzato ma comunque da una buona idea del problema) si può vedere come abbiamo dovuto definire tre variabili per rappresentare tre semplici proprietà di un quadrato e che per differenziarle da una figura all’altra abbiamo dovuto riscriverle tutte. Inoltre le variabili in questo modo sono legate ad una singola geometria solo perchè il nome ce lo suggerisce e non per qualche regola JavaScript particolare.

Per unire le informazioni sia concettualmente che programmaticamente possiamo usare un oggetto JSON che ci permetterà di definire un modello dati condiviso e una sorta di dizionario unico. Ad esempio i quadrati descritti sopra potranno essere riscritti nel seguente modo

var mySquare = { base: 5, perimeter: function(){ return this.base * 4}, area: function(){ return this.base * this.base} }
var yourSquare = { base: 8, perimeter: function(){ return this.base * 4}, area: function(){ return this.base * this.base} }

mySquare.base // 5
mySquare.perimeter() // 20

yourSquare.base // 8
yourSquare.perimeter() // 20

Questa nuovo modo di definire le due variabili potrebbe sembrare uno step complesso e macchinoso, ma in questa maniera ora le informazioni di base, perimetro ed area possono essere considerati a tutti gli effetti proprietà di un quadrato e che in pochi semplici passaggi possono essere astratte e generalizzate.

Supponiamo infatti di avere nelle nostre librerie un metodo copia del tipo

function clone (obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = obj.constructor();
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

potremo anche migliorare la fase di inizializzazione delle figure in questa maniera

var square = { base: 0, perimetro: function(){ return this.base * 4}, area: function(){ return this.base * this.base} };

var mySquare = clone(square);
mySquare.base = 5;

var yourSquare = clone(square);
yourSquare.base = 8;

 

 


L’uso di oggetti JSON per definire un modello dati semplice o complesso che sia, ci porta una serie di vantaggi

  • legare diverse informazioni sia logicamente che via codice sotto un unico contenitore per avere una migliore rappresentazione del dato
  • definire una nomenclatura chiara e indipendente dal nome della variabile a cui associamo il JSON riducendo molto il rischio di sovrascrittura
  • condividere una struttura dati il più astratta possibile che definita una volta sola e beneficiare automaticamente di eventuali modifiche alla stessa in tutte le sue implementazioni

Le funzioni

Un’altro importante impiego dei JSON per migliore la leggibilità e qualità del codice riguarda la definizione delle funzioni.

Man mano che i nostri progetti crescono e vengono aggiunte funzionalità dobbiamo splittare la nostra libreria JavaScript dovrà essere suddivisa in più file per evitare di avere un’unica grande lista di funzioni anche nelle pagine in qui non è necessario (con un conseguente spreco di banda e ritardo nel caricamento della pagina).

Inoltre, come per le variabili, il rischio di definire delle funzioni con lo stesso nome è molto alto e sarebbe un vero spreco di tempo se ogni volta che definiamo una funzione dovessimo andare a controllare se nei vari file del progetto ci sia già  definita un metodo con lo stesso nome.

Come per le variabili, “impacchettando” i metodi dentro vari JSON e usando dei nomi generici potremo quindi definire una nomenclatura condivisibile e più semplice pur mantenendola parlante.

Ad esempio supponiamo di voler definire dei widget html da poter riusare a piacimento all’interno delle nostre pagine web. Ogni componente avrà sicuramente delle specifiche ben distinte l’une dalle altre, ma potremmo comunque definire due componenti in questa maniera:

var firstComponent = {
  initialize: function () {
    // Intialize component data
    this.initGlobals(); // Initialize global variables for this current component
    this.loadImages();  // Load images of this current component
    ...
  },
  initGlobals: function () {
    // Define some variables to use them around the component
    ...
  }
  loadImages: function () {
    // If there are lazy images load them
    ...
  }
  // Other methods
  ...
}

var secondComponent = {
  initialize: function () {...},
  this.initGlobals: function () {...},
  this.loadImages: function () {...}
  ...
}

Andando a chiamare le funzioni dei rispettivi componenti sarà molto semplice capire cosa stiamo andando ad invocare.

firstComponent.initialize();
secondComponent.initialize();

Potremo ora sfruttare questa nomenclatura condivisa per creare dei metodi che automaticamente avviano i componenti a partire da una lista di quelli che vogliamo.

var components = [firstComponent, secondComponent, ...];
...
function initComponents (list) {
  for (var index in list) {
    var component = list[index];
    component.initialize();
  }
}
...
initComponents(components);

 


Imparare a scrivere codice secondo queste regole ci faciliterà infine la comprensione e il passaggio ad una programmazione orientata ad oggetti in JavaScript, determinate per la realizzazione di librerie più chiare e mantenibili nel tempo.


 

Lascia un commento