純粋な JavaScript を使用してフロントエンド開発でシングルトン パターンを作成する

Question

翻訳: Node.js ルーティングを使用してバックエンドから HTML ファイルを提供するプロジェクト (純粋なフロントエンド Web アプリケーション) があります。

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

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

そして、JS ファイルを静的ファイルとして提供します app.use(express.static(path.join(__dirname, '/frontend'))); ここで、/frontend フォルダーにはすべてのフロントエンド ファイル (HTML ファイルを含む) が含まれます。

現在、model.js というファイル (フロントエンド フォルダー内) があり、すべてのページで共有されるデータを保持するシングルトン パターンを実装しようとしています (たとえば、ユーザーが現在ログインしているかどうか):

const Model = (function () {
    インスタンスを許可します。

    関数 init() {

        isLogged = false にします。

        戻る {
            getIsLogged: function () {
                isLogged を返します。
            }、
            setIsLogged: 関数 (l) {
                isLogged = l;
            }
        }
    }
    戻る {
        getInstance: function () {
            if (! インスタンス) {
                インスタンス = init();
            }
            インスタンスを返します。
        }
    }
})();

しかし、ユーザーがリダイレクトされると、model.js がバックエンドから再度インポートされ、前のページからのモデルへのすべての変更が上書きされるようです。 (たとえば、ユーザーがログインすると、モデル内の isLogged 変数を true に変更し、「/」にリダイレクトすると、モデルが更新されて上書きされます)

JavaScript はそのような要件を実装していますか?

問題は res.sendFile(views_dir "index.html"); にあると思います。アプリケーションは新しい状態に更新され、js ファイルの以前の状態は保存されません。 、これを回避する方法はありますか？ js ファイルをリクエストするのは 1 回だけですか?

<コード>

Answer 1

@Jared の助けを借りて、この問題を解決しました。

localStorage を使用してモデルの現在の状態を保存し、別のページにリダイレクトするときにそれを再読み込みしました。

リーリー

最終的に、localStorage オブジェクトからデータを読み取って保存する save... と load... という 2 つの主要な関数があります。 Jared がコメントで述べたように、JSON は関数を文字列化できないため、モデルのすべてのデータ (isLogged 変数など) を保存する data というオブジェクトを作成しました。

これで、モデルのデータにアクセスしたいときはいつでも、まずそのインスタンスを取得します: let model = Model.getInstance(); その後、返された init 関数からメソッドにアクセスできます。 Model インスタンスをリクエストすると、まず現在のインスタンスが初期化されているかどうかが確認されます。初期化されていない場合は、load_localStorage 関数を呼び出して、localStorage からデータを読み取り、データ変数に保存します。

別のページにリダイレクトする前に、Model インスタンスの saveData 関数を呼び出してデータ オブジェクトを localStorage に保存し、リダイレクトされたページで以前に保存された状態を読み取れるようにします。

HTML ファイルには、次のような js ファイルを含めました: <script src="./../model/model.js"></script>。

おそらくもっと読みやすいコードを備えた、より良い解決策があると確信していますが、私にとってはこの方法で十分に機能します:)