純粋な JavaScript を使用してフロントエンド開発でシングルトン パターンを作成する
P粉986860950
P粉986860950 2023-08-03 12:09:44
0
1
554
<p>翻訳: Node.js ルーティングを使用してバックエンドから HTML ファイルを提供するプロジェクト (純粋なフロントエンド Web アプリケーション) があります。 <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"); }); </pre> <p>そして、JS ファイルを静的ファイルとして提供します app.use(express.static(path.join(__dirname, '/frontend'))); ここで、/frontend フォルダーにはすべてのフロントエンド ファイル (HTML ファイルを含む) が含まれます。 <br /><br />現在、model.js というファイル (フロントエンド フォルダー内) があり、すべてのページで共有されるデータを保持するシングルトン パターンを実装しようとしています (たとえば、ユーザーが現在ログインしているかどうか):</p><p><code></code><strong></strong></p> <pre class="brush:js;toolbar:false;">const Model = (function () { インスタンスを許可します。 関数 init() { isLogged = false にします。 戻る { getIsLogged: function () { isLogged を返します。 }、 setIsLogged: 関数 (l) { isLogged = l; } } } 戻る { getInstance: function () { if (! インスタンス) { インスタンス = init(); } インスタンスを返します。 } } })(); </pre> <p><strong>しかし、ユーザーがリダイレクトされると、model.js がバックエンドから再度インポートされ、前のページからのモデルへのすべての変更が上書きされるようです。 (たとえば、ユーザーがログインすると、モデル内の isLogged 変数を true に変更し、「/」にリダイレクトすると、モデルが更新されて上書きされます) <br /><br /> JavaScript はそのような要件を実装していますか? <br /><br />問題は res.sendFile(views_dir "index.html"); にあると思います。アプリケーションは新しい状態に更新され、js ファイルの以前の状態は保存されません。 、これを回避する方法はありますか? js ファイルをリクエストするのは 1 回だけですか? <br /></strong></p><p><コード></コード></p>
P粉986860950
P粉986860950

全員に返信(1)
P粉764785924

@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>。

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


いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート