JavaScript ファイルの動的ロード JavaScript ファイルの動的ロードは、Web アプリケーションのモジュール化と最適化において重要な役割を果たします。 Prototype や jQuery などの主流の JavaScript ライブラリは、この技術を利用して機能を拡張し、パフォーマンスを向上させます。 JavaScript ファイルを動的にロードする JavaScript ファイルを動的にロードするには、主に 2 つの方法があります。 Eval を使用した AJAX: AJAX 呼び出し経由でスクリプトをロードしますそして、eval を使用してコードを評価します。ただし、このアプローチはドメイン制限によって制限され、潜在的なセキュリティ問題が発生します。 スクリプト要素: を作成します。 src 属性で指定されたスクリプトの URL を含む要素を作成し、それをドキュメント本文に追加します。この方法により、リモート サーバーからスクリプトをロードでき、ブラウザによるクリーンな評価が保証されます。</li> </ol> <h3>ロード イベントの処理</h3> <p>スクリプトを動的にロードした後、そのロード イベントを処理する必要がある場合があります。ブラウザ間の互換性のために、複数のイベントを使用できます。</p> <ul> <li>onreadystatechange</li> <li>onload</li> </ul> <p>これらのイベントにコールバック関数をアタッチすることで、コードをスクリプトの読み込みが成功すると実行されます。</p> <h3>スクリプトのイベント要素</h3> <p>スクリプト要素は次のイベントをトリガーします:</p> <ul> <li>load</li> <li>readystatechange</li> <li>error</li> </ul> <h3>メインストリーム JavaScript ライブラリアプローチ</h3> <ul> <li> <strong>プロトタイプ:</strong> プロトタイプは、ドキュメント全体のイベントに [document.observe](https://api.prototypejs.org/dom/document/observe) を使用します。</li> <li> <strong>jQuery:</strong> jQuery は $.getScript() を使用して動的にロードします</li> </ul> <h3>例</h3> <p>次のコード スニペットは、イベント処理を使用した動的 JavaScript ファイルの読み込みを示しています。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function loadScript(url, callback) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = callback; script.onreadystatechange = callback; document.getElementsByTagName('head')[0].appendChild(script); };</pre><div class="contentsignin">ログイン後にコピー</div></div> <h3>結論</h3> <p>JavaScript ファイルを動的にロードすると、Web アプリケーションに柔軟性とモジュール性が提供されます。イベントを利用することで、開発者はスクリプトが正常に読み込まれた後にのみコードが実行されるようにすることができます。主流の JavaScript ライブラリは、この機能に便利なメソッドを提供し、開発を簡素化し、ユーザー エクスペリエンスを向上させます。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
