in ecmascript6 es6 vanillajs javascript class ~ de lecture.

ES6 Class : création d'un composant rapidement

Le passage de "Vanilla JavaScript" à "ECMAScript 2015" (dit ES6) est un passage essentiel dans la vie d'un développeur Front-End, mais j'ai constaté que les habitudes sont difficiles à changer et qu'il est simple de passer à côté des améliorations proposées par ES6, comme la synthaxe de Class, donc voici un billet que je vous recommande de lire.

js

Voici un cas concret qui s'est présenté à nous pour la mise en place d'un slider avec la bibliothèque slick.js :

  • Premier jet en Vanilla JavaScript, classique
  • Puis réécriture en ES6, composant réutilisable

La partie HTML du slider n'est pas importante, c'est la partie JavaScript qui nous intéresse, néanmoins voici un exemple d'un template Thymeleaf qui va fonctionner avec le code écrit plus loin :

<div class="slide-component">
    <div class="slides">
        <ul>
            <li class="slide" th:each="slide : ${slides}">
                <a th:href="${slide.link.target}" th:title="${slide.link.title}">
                    <img th:src="${slide.image.desktopUrl}" th:alt="${slide.image.alt}"/>
                </a>
            </li>
        </ul>
    </div>
</div>

Vanilla JS

L'exercice consiste à activer notre slider avec une configuration différente selon le contexte de la page (la locale dans notre exemple), slick.js permet que cela soit simple, voici donc la version naturelle d'écrire notre première version sans se poser de questions :

slide_fr_FR.js

(function(){
    $('.slide-component .slides ul').slick({
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true
    });
})();

slide_ru_RU.js

(function(){
    $('.slide-component .slides ul').slick({
        autoplay: true,
        autoplaySpeed: 1000,
        dots: false,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    });
})();

Limitations :

  • Non réutilisable : copier-coller
  • Comportement par défaut impossible : non centralisé
  • Difficilement testable
  • Difficile à maintenir : si plusieurs fichiers

ECMAScript 6

Cette fois-ci nous allons écrire la même chose mais dans la version évoluée de JavaScript, en pensant composant et réutilisabilité.

SlideComponent.js

import $ from 'jquery';

export class SlideComponent {

    constructor(opts = {}) {
        this._selector = opts.selector || defaults.selector;
        this._config = opts.config || defaults.config;
    }

    render() {
        $(this._selector).slick(this._config);
    }
    
    toString() {
        return `SlideComponent : selector ${this._selector}, config ${JSON.stringify(this._config)}`;
    }
}

const defaults = {
    selector : '.slide-component .slides ul',
    config : {
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true
    }
};

Notre composant possède à présent une configuration et un selecteur CSS par défaut, surchargeables.
La méthode toString nous permet juste de montrer qu'il est à présent facile de définir des méthodes générales au composant sans avoir à les réécrire dans chaque fichier.

slide_fr_FR.js

import { SlideComponent } from './SlideComponent';

let slideComponent = new SlideComponent();
slideComponent.render();
console.log(slideComponent.toString());

affichage console

>> SlideComponent : selector .slide-component .slides ul, config {"autoplay":true,"autoplaySpeed":4000,"dots":true}

slide_ru_RU.js

import { SlideComponent } from './SlideComponent';

const opts = {
    config : {
        autoplay: true,
        autoplaySpeed: 1000,
        dots: false,
        speed: 500,
        fade: true,
        cssEase: 'linear'
    }
};

let slideComponent = new SlideComponent(opts);
slideComponent.render();
console.log(slideComponent.toString());

affichage console

>> SlideComponent : selector .slide-component .slides ul, config {"autoplay":true,"autoplaySpeed":1000,"dots":false,"speed":500,"fade":true,"cssEase":"linear"}

Cela peut paraître beaucoup de lignes de codes pour si peu mais ce cas simple nous montre les possibilités offertes par la nouvelle synthaxe Class d'ES6.
De plus nous nous rendons compte à présent qu'il est facile de définir une spécificité du slider par pays sans avoir à tour réécrire.