プログラム可能なスクリプトの読み込み タグは非常にシンプルですが、状況によってはより高度なスクリプトの読み込み方法が必要になります。プラチナ メンバーや特定のレベルに達したプレイヤーなど、特定の基準を満たすユーザーに対してのみスクリプトをロードしたい場合や、ユーザーがクリックしてアクティブ化したときにチャット ウィジェットなどの機能のみをロードしたい場合があります。それ。 <br><span style="color: rgb(0, 0, 0);"><strong>1. スクリプトを直接ロードします</strong></span><br>次のようなコードを使用して <script> タグを挿入できます。 <br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">ログイン後にコピー</div></div><p>ちょっと待って、スクリプトの読み込みが完了したことをどうやって知ることができるのでしょうか?スクリプト自体にコードを追加してイベントをトリガーすることもできますが、ロードされるすべてのスクリプトにそのようなコードを追加するのは面倒すぎます。または、サードパーティ サーバー上のスクリプトにそのようなコードを追加することが不可能であるという別の状況もあります。 HTML5 仕様では、コールバックにバインドできる onload 属性が定義されています。 </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">ログイン後にコピー</div></div><p> ただし、IE8 以前のバージョンは onload をサポートせず、onreadystatechange をサポートします。一部のブラウザでは、<script> タグを挿入すると「超自然的なイベント」が発生します。そして、エラー処理についてはまだ話していません。これらすべての問題を回避するには、スクリプト読み込みライブラリを使用することを強くお勧めします。 <br/></p><p><span style="color: #000000">yepnope の条件付き読み込み<strong></strong><br/>yepnope は、シンプルで軽量なスクリプト読み込みライブラリです (圧縮された合理化されたバージョンはわずか 1.7 KB)。その設計目標は、最も一般的な動的スクリプト読み込みのニーズに誠実に応えることです。 </span>yepnope の最も簡単な使用法は、スクリプトをロードし、スクリプトの実行が完了したときにコールバックを返すことです。 <br/><br/></p><p class="jb51code"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">ログイン後にコピー</div></div></p>まだ無関心ですか？次に、yepnope を使用して複数のスクリプトを並行してロードし、指定された順序で実行します。たとえば、Backbone.js をロードするとします。このスクリプトは Underscore.js に依存しています。これを行うには、これら 2 つのスクリプトの場所を配列内のロード パラメーターとして指定するだけです。 <p></p><p class="jb51code"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">ログイン後にコピー</div></div></p>ここではコールバックの代わりにcompleteが使用されていることに注意してください。 <p></p>違いは、コールバックはスクリプト読み込みリスト内の各リソースに対して実行され、complete はすべてのスクリプトが読み込まれた場合にのみ実行されることです。 yepnope の特徴的な機能は条件付き読み込みです。 test パラメータを指定すると、yepnope はパラメータ値が true かどうかに応じてさまざまなリソースをロードします。たとえば、ユーザーがタッチ スクリーン デバイスを使用しているかどうかをある程度の精度で判断でき、それに応じてさまざまなスタイル シートやスクリプトを読み込むことができます。 <p></p><p class="jb51code"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">ログイン後にコピー</div></div></p> ほんの数行のコードで準備を整え、アクセスデバイスに応じてまったく異なるエクスペリエンスをユーザーに提供できます。もちろん、すべての条件付き負荷で yep (はい) と nope (いいえ) の両方のテスト結果が必要なわけではありません。 yepnope の最も一般的な使用法の 1 つは、古いブラウザーに欠けている機能を補うために shim スクリプトをロードすることです。 <p></p><p class="jb51code"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">ログイン後にコピー</div></div></p>yepnope を使用すると、ページは次のような美しいマークアップ構造になるはずです: <p><br/></p><p class="jb51code"><br/><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
