Cipta corak tunggal dalam pembangunan bahagian hadapan menggunakan JavaScript tulen

Question

Terjemah: Saya mempunyai projek (aplikasi web bahagian hadapan tulen) di mana saya menyediakan fail HTML dari bahagian belakang menggunakan penghalaan Node.js:

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

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

Dan sediakan fail JS sebagai fail statik app.use(express.static(path.join(__dirname, '/frontend'))); di mana folder /frontend mengandungi semua fail front-end (termasuk fail HTML). 

Sekarang, saya mempunyai fail bernama model.js (dalam folder hadapan) dan saya cuba melaksanakan corak tunggal yang menyimpan data yang dikongsi oleh semua halaman ( Contohnya, sama ada pengguna sedang log masuk):

const Model = (fungsi () {
    biarkan contoh;

    fungsi init() {

        let isLogged = palsu;

        kembali {
            getIsLogged: fungsi () {
                return isLogged;
            },
            setIsLogged: fungsi (l) {
                isLogged = l;
            }
        }
    }
    kembali {
        getInstance: fungsi () {
            jika (! contoh) {
                instance = init();
            }
            contoh pulangan;
        }
    }
})();

Tetapi apabila pengguna diubah hala, nampaknya model.js diimport dari bahagian belakang sekali lagi, menimpa semua perubahan pada model dari halaman sebelumnya. (Sebagai contoh, apabila pengguna log masuk, kami menukar pembolehubah isLogged dalam model kepada benar dan ubah hala ke '/', model akan dimuat semula dan ditulis ganti) 

 cara untuk hanya menggunakan Adakah JavaScript melaksanakan keperluan sedemikian? 

Saya rasa masalahnya ialah dengan res.sendFile(views_dir + "index.html");, ia menyegarkan aplikasi ke keadaan baharu dan tidak menyimpan versi js sebelumnya status fail, adakah terdapat cara untuk mengelakkan ini? Minta fail js sekali sahaja? 

Answer 1

Dengan bantuan @Jared, saya menyelesaikan masalah ini.

Saya menggunakan localStorage untuk menyimpan keadaan semasa model dan muat semula apabila mengubah hala ke halaman lain.

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;
        }
    }
})();

Akhirnya, saya mempunyai dua fungsi utama: simpan... dan muatkan..., yang membaca dan menyimpan data daripada objek localStorage. Seperti yang dikatakan Jared dalam ulasan, JSON tidak boleh menyelaraskan fungsi, jadi saya mencipta objek yang dipanggil data di mana saya menyimpan semua data model (seperti pembolehubah isLogged).

Sekarang, apabila saya ingin mengakses data model, saya mula-mula mendapat contoh: biarkan model = Model.getInstance(); Kemudian saya boleh mengakses kaedah daripada fungsi init yang dikembalikan. Apabila saya meminta contoh Model, ia mula-mula menyemak sama ada tika semasa telah dimulakan. Jika tidak dimulakan, ia memanggil fungsi load_localStorage untuk membaca data daripada localStorage dan menyimpannya ke pembolehubah data.

Sebelum mengubah hala ke halaman lain, saya memanggil fungsi saveData bagi contoh Model untuk menyimpan objek data ke dalam localStorage supaya halaman yang diubah hala boleh membaca keadaan yang disimpan sebelum ini.

Dalam fail HTML, saya memasukkan fail js seperti ini: <script src="./../model/model.js"></script>.

Saya pasti ada penyelesaian yang lebih baik, mungkin dengan kod yang lebih mudah dibaca, tetapi kaedah ini cukup berkesan untuk saya :)