Dans mes projets UI5 j’utilise très souvent le pattern singleton pour centraliser les appels backend et plus généralement pour organiser le code de manière cohérente ce qui augmente la lisibilité et la maintenabilité de la solution.
Dans mon dernier projet j’ai par exemple créé un fichier FirebaseService.js pour gérer tous mes appels vers le service de d’authentification de Firebase. La gestion des erreurs et l’affichage d’un loader liés aux appels vers Firebase sont centralisés et gérés dans cet objet.
Le Singleton est un objet littéral contenant des méthodes et des attributs qui sont regroupés parce qu’ils sont en quelque sorte liés. La définition traditionnelle du modèle singleton décrit une classe qui ne peut être instanciée qu’une seule fois et est accessible via un point d’accès bien connu, par convention la méthode getInstance(). Ci-dessous le modèle de définition que j’utilise dans mes projets :
sap.ui.define([
"sap/ui/base/Object"
], function (Object) {
"use strict";
var _oInstance = null;
/**
* Cet objet est un Singleton
*
* @see {@link }
*
* @author
* @version 0.1
*
* @public
*/
var MySingleton = Object.extend("fr.dev.portfolio.MySingleton", {
__oMyVar: null,
////////////////////////////////////////////////////////////
// CONSTRUCTOR
////////////////////////////////////////////////////////////
constructor: function () {
this.__oMyVar = "Attribut de classe privé";
},
////////////////////////////////////////////////////////////
// METHODS
////////////////////////////////////////////////////////////
/**
* Méthode de classe
*
* @param {} xxx
* @public
*/
method_1: function () {
this.__oMyVar = "Attribut de classe privé modifié";
}
});
return {
getInstance: function () {
if (!_oInstance) {
_oInstance = new Loader();
}
return _oInstance;
}
};
});Exemple avec une classe Util.Loader
Il arrive parfois que les appels backend prennent un moment pour se charger complètement. Une solution courante est d’utiliser une animation (un loader) pour informer le visiteur que le site est en cours de chargement et qu’une réponse va s’afficher sous peu.
Pour illustrer l’utilisation d’un Singleton dans ce cas, j’ai créé une classe Loader dans un namespace Util qui fourni une interface simple pour ajouter ou supprimer un loader dans l’application :
Loader.getInstance().open()Loader.getInstance().close()Une seule instance de la classe Loader peut exister dans l’application, pas de risque de créer plusieurs loader inutilement.
Pour simplifier l’exemple, j’ai encapsulé le contrôle utilisateur BusyDialog pour ajouter/supprimer un loader. Mais il sera très simple de modifier l’animation du loader sur l’entièreté de l’application à l’aide d’un loader personnalisé ou d’une librairie javascript tiers en modifiant le code du Singleton . On réduit les dépendances avec l’objet BusyDialog, ainsi on gagne en flexibilité pour les évolutions futures.
sap.ui.define([
"sap/ui/base/Object",
"sap/m/BusyDialog"
], function (Object, BusyDialog) {
"use strict";
var _oInstance = null;
/**
* Ajouter/supprimer un loader
*
* @see {@link https://openui5.hana.ondemand.com/api/sap.m.BusyDialog}
*
* @author devportoflio
* @version 0.1
*
* @public
*/
var Loader = Object.extend("blog.devportfolio.demo.Loader", {
__loader: null,
////////////////////////////////////////////////////////////
// CONSTRUCTOR
////////////////////////////////////////////////////////////
constructor: function () {
this.__loader = new BusyDialog();
},
////////////////////////////////////////////////////////////
// METHODS
////////////////////////////////////////////////////////////
/**
*
*
* @param {} xxx
* @public
*/
open: function () {
this.__loader.open();
},
/**
*
*
* @param {} xxx
* @public
*/
close: function () {
this.__loader.close();
}
});
return {
getInstance: function () {
if (!_oInstance) {
_oInstance = new Loader();
}
return _oInstance;
}
};
});Le Singleton fournit un moyen de regrouper le code dans une unité logique qui peut être accessible via une seule variable. En s’assurant qu’il n’y a qu’une seule copie d’un objet singleton, vous savez que tout votre code utilise la même ressource globale.