JavaScript: creare moduli configurabili con gli attributi di dati

In JavaScript possiamo creare moduli configurabili sfruttando gli attributi di dati.

Immaginiamo di voler creare un carousel. Ogni carousel potrebbe avere opzioni differenti, come il numero di elementi visibili e il ritardo nell'animazione. Possiamo usare gli attributi di dati salvando le opzioni di configurazione come stringa JSON.

<div class="carousel" data-options='{"delay":800,"items":3}'></div>

Quindi definendo il nostro modulo Carousel, possiamo inizializzarlo con le opzioni specificate sull'elemento del DOM.

'use strict';

class Carousel {
    constructor(element = null, options = {}) {
        this.element = element;
        this.options = Object.assign({
            delay: 400,
            items: 4
        }, options);
        this.setOptions();
    }
    
    setOptions() {
        if(this.element === null) {
            return;
        }
        if(!this.element.dataset.options) {
            return;
        }
        try {
            this.options = JSON.parse(this.element.dataset.options);
        } catch(err) {
            return;
        }
    }
}

Il metodo setOptions() andrà a modificare le opzioni di configurazione del modulo solo se l'elemento esiste, ha un attributo di dati uguale a options e, cosa fondamentale, tale attributo contiene una valida stringa JSON. In caso contrario, le opzioni resteranno quelle passate al costruttore create fondendo insieme le opzioni predefinite con l'oggetto passato come secondo argomento. Quindi se non si vogliono usare le opzioni sull'elemento del DOM, è sufficiente non specificare l'attributo di dati.