Créez un modèle singleton dans le développement front-end en utilisant du JavaScript pur

Question

Traduire : J'ai un projet (application Web frontale pure) dans lequel je sers des fichiers HTML depuis le backend en utilisant le routage Node.js :

router.get("/", (req, res) => {
    res.sendFile(views_dir + "index.html");
});

router.get("/login", (req, res) => {
    res.sendFile(views_dir + "login.html");
});
≪/pré>
Et servir les fichiers JS en tant que fichiers statiques app.use(express.static(path.join(__dirname, '/frontend'))); où le dossier /frontend contient tous les fichiers frontaux (y compris les fichiers HTML). 

À l'heure actuelle, j'ai un fichier appelé model.js (dans le dossier frontend) et j'essaie d'implémenter un modèle singleton qui contient les données partagées par toutes les pages (par exemple, si l'utilisateur est actuellement connecté) :

const Modèle = (function () {
    laissez exemple;

    fonction init() {

        soit isLogged = false;

        retour {
            getIsLogged : fonction () {
                retourner isLogged ;
            },
            setIsLogged : fonction (l) {
                estLogged = l;
            }
        }
    }
    retour {
        getInstance : fonction () {
            si (! instance) {
                instance = init();
            }
            instance de retour ;
        }
    }
})();
≪/pré>
Mais lorsque l'utilisateur est redirigé, il semble que model.js soit à nouveau importé du backend, écrasant toutes les modifications apportées au modèle de la page précédente. (Par exemple, lorsque l'utilisateur se connecte, nous modifions la variable isLogged dans le modèle sur true et redirigeons vers '/', le modèle sera actualisé et écrasé) 

 moyen d'utiliser simplement JavaScript implémente-t-il une telle exigence ? 

Je pense que le problème vient de res.sendFile(views_dir + "index.html");, il actualise l'application dans un nouvel état et n'enregistre pas la version précédente du js état du fichier, existe-t-il un moyen d'éviter cela ? Demander le fichier js une seule fois ? 

Answer 1

Avec l'aide de @Jared, j'ai résolu ce problème.

J'ai utilisé localStorage pour enregistrer l'état actuel du modèle et le recharger lors de la redirection vers une autre page.

const Model = (function () {

    let instance;

    let data = {
        isLogged: false,
    };

    function init_localStorage() {
        save_localStorage();
    }

    function load_localStorage() {
        let model = JSON.parse(localStorage.getItem('Model'));
        if (Object.keys(model).length === 0) {
            init_localStorage();
        }

        data = model;
    }

    function save_localStorage() {
        localStorage.setItem('Model', JSON.stringify(data));
    }

    function init() {
        load_localStorage();

        return {
            getIsLogged: function () {
                return data.isLogged;
            },
            setIsLogged: function (l) {
                data.isLogged = l;
            },

            saveData: function () {
                save_localStorage();
            }
        }
    }

    return {
        getInstance: function () {
            if (! instance) {
                instance = init();
            }
            return instance;
        }
    }
})();

En fin de compte, j'ai deux fonctions principales : save... et load..., qui lisent et sauvegardent les données de l'objet localStorage. Comme Jared l'a dit dans les commentaires, JSON ne peut pas chaîner les fonctions, j'ai donc créé un objet appelé data dans lequel je stocke toutes les données du modèle (telles que la variable isLogged).

Maintenant, chaque fois que je souhaite accéder aux données du modèle, j'en reçois d'abord une instance : let model = Model.getInstance(); Ensuite, je peux accéder à la méthode à partir de la fonction init renvoyée. Lorsque je demande une instance de modèle, il vérifie d'abord si l'instance actuelle a été initialisée. S'il n'est pas initialisé, il appelle la fonction load_localStorage pour lire les données de localStorage et les enregistrer dans la variable data.

Avant de rediriger vers une autre page, j'appelle la fonction saveData de l'instance Model pour enregistrer l'objet de données dans localStorage afin que la page redirigée puisse lire l'état précédemment enregistré.

Dans le fichier HTML, j'ai inclus le fichier js comme ceci : <script src="./../model/model.js"></script>.

Je suis sûr qu'il existe de meilleures solutions, peut-être avec un code plus lisible, mais cette méthode fonctionne assez bien pour moi :)