Créez un modèle singleton dans le développement front-end en utilisant du JavaScript pur
P粉986860950
P粉986860950 2023-08-03 12:09:44
0
1
561
<p>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 : </p> <pre class="brush:js;toolbar:false;">router.get("/", (req, res) => { res.sendFile(views_dir + "index.html"); }); router.get("/login", (req, res) => { res.sendFile(views_dir + "login.html"); }); ≪/pré> <p>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). <br /><br />À 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é) :</p><p><code></code><strong></strong></p> <pre class="brush:js;toolbar:false;">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é> <p><strong>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é) <br /><br /> moyen d'utiliser simplement JavaScript implémente-t-il une telle exigence ? <br /><br />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 ? <br /></strong></p><p><code></code></p>
P粉986860950
P粉986860950

répondre à tous(1)
P粉764785924

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 :)


Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal