ログインページとメインページの2つのページがある小さなアプリケーションがあります。私の問題は、両方のページで1つのメインJavaScriptファイルのみを使用すると（推奨されるように）、ページ上の一部の変数が他の変数で定義されていないため、大量のReferenceErrorが発生することです...
例えば：
ログインページのコード行
copyrightYear.textContent = new Date().getFullYear();
メインページは文句を言う
Uncaught TypeError: Cannot set property 'textContent' of null
どうすれば修正できますか？if(copyrightYear) { do stuff }毎回言わなければならないことを言わないでください。すべての変数に対してそれをしなければならないのは、ただの悪夢です。
あなたのための2つの答え：
私の問題は、両方のページに1つのメインJavaScriptファイルのみを使用すると（推奨されるように）
これは非常に一般的な推奨事項です。すべての状況に当てはまるわけではありません。そのコードを使用しないページにコードをロードしても意味がありません。
両方のページで使用するコードと、ページ固有のコードがある場合、両方のページで共有するファイルとページ固有のファイルを用意しても問題ありません。
<script src="main.js"></script>
<script src="page1.js"></script>
追加のHTTPリクエストが本当に心配されている場合（最近の問題は以前よりもはるかに少ない）、メインモジュールとページ1のモジュールのページを組み合わせたバンドルを作成するWebpackやRollupなどのバンドラーを使用します1、およびメインモジュールと2ページの2ページのモジュールを組み合わせた別のバンドル。
しかし、それでも、妥当な時間内にpage1からpage2に移動することが期待される場合は、追加のHTTPリクエストの方がユーザーにとってより良い場合があります。その理由は、main.jsandおよびpage1.js/ page2.jsおよびそれらのキャッシュを許可している場合、ユーザーがpage1 にアクセスするとandが取得さmain.jsれpage1.js、次にpage2にアクセスmain.jsするとローカルキャッシュから取得され、ロードするだけでよいためpage2.jsです。対照的に、ページごとに1つのバンドルファイルがある場合、ページ1からページ2（またはその逆）に移動するときに、共通のコードをすべて再ダウンロードする必要があります。ただし、訪問者がpage1またはpage2のいずれかを訪問することを期待し、他の訪問者を訪問しないことを期待する場合は、ページ固有のバンドルを使用してHTTPリクエストを保存します。
万能のソリューションはありません。:-)あらゆる種類の考慮事項があります。
HTTP / 1.1は、追加のHTTPリクエストを効率化し、ほぼ普遍的にサポートされていること、および注HTTP / 2彼らが作るたくさんの効果ページの起動の一環として、HTTPリクエストの数を減らすためのケースを排除し、より効率的。最新の主要ブラウザはすべて、最新のWebサーバーと同様にHTTP / 2をサポートしています。
本当に1つのページを保持したい場合は、各ページに固有のコードをそれらのページの関数に入れ、ファイルのメイン部分のコードにに基づいて適切な関数を呼び出しますlocation.pathname。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加