JavaScript ファイルの動的ロード JavaScript ファイルの動的ロードは、コンポーネントとモジュールのオンデマンド初期化のための便利なソリューションを提供します。この記事では、一般的な JavaScript ライブラリがこれをどのように実現しているかを調査し、読み込みイベントを効果的に処理するための堅牢な手法を紹介します。 動的読み込みメソッド 動的 JavaScript ファイルの読み込みには、次の 2 つの主要なメソッドが使用できます。 AJAX with eval(): このアプローチには、AJAX 呼び出しを行ってスクリプトを取得し、それを eval() を使用して評価することが含まれます。ただし、この方法はクロスドメインの制限によって制限され、セキュリティ リスクが生じます。 スクリプト要素の追加: を追加します。要素をスクリプトの URL とともに HTML に追加すると、ブラウザは自動的にスクリプトを解析して実行します。このメソッドはクロスドメイン互換性があり、クリーンなロード プロセスを保証します。</li> </ol> <h2>ロード イベントの処理</h2> <p>非同期でロードされたスクリプトのロード イベントを処理するには、コールバック ベースのアプローチが一般的に採用されます。 .</p> <p>次の手順は、堅牢なアプローチの概要を示しています。</p> <ol> <li><script> を挿入する関数を作成します。 </li> <li>スクリプト要素をドキュメントの先頭に追加して、スクリプトの読み込みを開始します。</li> <li>スクリプトの読み込み時に実行されるコールバック関数を定義します。 </li> <li>スクリプト URL とコールバック関数をloadScript 関数に渡します。</li> </ol> <p>例として、次のコード スニペットはこのアプローチを示しています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function loadScript(url, callback) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; script.onreadystatechange = callback; script.onload = callback; head.appendChild(script); }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>この手法を使用すると、ロードされたスクリプトに依存するコードは、スクリプトが完全にロードされた後にのみ実行されます。</p> <h2>jQuery の簡素化されたアプローチ</h2> <p>jQuery は、簡素化するために $.getScript() という便利なメソッドを提供します。動的スクリプトの読み込みと読み込みイベントの処理:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$.getScript("my_lovely_script.js", function() { alert("Script loaded and executed."); // Code can access variables and functions defined in the loaded script here });</pre><div class="contentsignin">ログイン後にコピー</div></div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
