ホームページ > 記事 > ウェブフロントエンド > JavaScriptプログラマブルスクリプト読み込み使用例の詳細説明

JavaScriptプログラマブルスクリプト読み込み使用例の詳細説明

伊谢尔伦オリジナル: 2017-07-21 15:45:511443ブラウズ

プログラム可能なスクリプトの読み込み

3f1c4e4b6b16bbbd69b2ee476dc4f83a タグは非常にシンプルですが、状況によってはより高度なスクリプトの読み込み方法が必要になります。プラチナメンバーや特定のレベルに達したプレイヤーなど、特定の基準を満たすユーザーに対してのみスクリプトをロードしたい場合や、ユーザーがクリックしてアクティブ化したときにチャットウィジェットなどの機能のみをロードしたい場合があります。それ。
1. スクリプトを直接ロードします
次のようなコードを使用して 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを挿入できます。

var head = document.getElementsByTagName(&#39;head&#39;)[0];
var script = document.createElement(&#39;script&#39;);
script.src = &#39;/js/feature.js&#39;;
head.appendChild(script);

ちょっと待って、スクリプトの読み込みが完了したことをどうやって知ることができるのでしょうか?スクリプト自体にコードを追加してイベントをトリガーすることもできますが、ロードされるすべてのスクリプトにそのようなコードを追加するのは面倒すぎます。または、サードパーティサーバー上のスクリプトにそのようなコードを追加することが不可能であるという別の状況もあります。 HTML5 仕様では、コールバックにバインドできる onload 属性が定義されています。

script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

ただし、IE8 以前のバージョンは onload をサポートせず、onreadystatechange をサポートします。一部のブラウザでは、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを挿入すると「超自然的なイベント」が発生します。そして、エラー処理についてはまだ話していません。これらすべての問題を回避するには、スクリプト読み込みライブラリを使用することを強くお勧めします。

yepnope の条件付き読み込み
yepnope は、シンプルで軽量なスクリプト読み込みライブラリです (圧縮された合理化されたバージョンはわずか 1.7 KB)。その設計目標は、最も一般的な動的スクリプト読み込みのニーズに誠実に応えることです。 yepnope の最も簡単な使用法は、スクリプトをロードし、スクリプトの実行が完了したときにコールバックを返すことです。

yepnope({
  load: &#39;oompaLoompas.js&#39;,
  callback: function() {
  console.log(&#39;oompa-Loompas ready!&#39;);
  }
});

まだ無関心ですか？次に、yepnope を使用して複数のスクリプトを並行してロードし、指定された順序で実行します。たとえば、Backbone.js をロードするとします。このスクリプトは Underscore.js に依存しています。これを行うには、これら 2 つのスクリプトの場所を配列内のロードパラメーターとして指定するだけです。

yepnope({
  load: [&#39;underscore.js&#39;, &#39;backbone.js&#39;],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

ここではコールバックの代わりにcompleteが使用されていることに注意してください。

違いは、コールバックはスクリプト読み込みリスト内の各リソースに対して実行され、complete はすべてのスクリプトが読み込まれた場合にのみ実行されることです。 yepnope の特徴的な機能は条件付き読み込みです。 test パラメータを指定すると、yepnope はパラメータ値が true かどうかに応じてさまざまなリソースをロードします。たとえば、ユーザーがタッチスクリーンデバイスを使用しているかどうかをある程度の精度で判断でき、それに応じてさまざまなスタイルシートやスクリプトを読み込むことができます。

yepnope({
  test: Modernizr.touch,
  yep: [&#39;touchStyles.css&#39;, &#39;touchApplication.js&#39;],
  nope: [&#39;mouseStyles.css&#39;, &#39;mouseApplication.js&#39;],
  complete: function() {
  // 不管是哪一种情况，应用程序均已就绪！
  }
});

ほんの数行のコードで準備を整え、アクセスデバイスに応じてまったく異なるエクスペリエンスをユーザーに提供できます。もちろん、すべての条件付き負荷で yep (はい) と nope (いいえ) の両方のテスト結果が必要なわけではありません。 yepnope の最も一般的な使用法の 1 つは、古いブラウザーに欠けている機能を補うために shim スクリプトをロードすることです。

yepnope({
  test: window.json,nope: [&#39;json2.js&#39;],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

yepnope を使用すると、ページは次のような美しいマークアップ構造になるはずです:

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

見覚えがあるでしょうか?この構造は、defer 属性について説明したセクションで示した構造と同じです。唯一の違いは、ここのスクリプトファイルの 1 つが yepnope.js (おそらく deferredScripts.js の上に) を結合して、それらをロードできるようにしていることです。条件付きでリロードするスクリプト (ブラウザが shim スクリプトを必要とするため) と、動的にロードするスクリプト (ユーザーのアクションに応じて) を独立して実行します。結果として、より小さな deferredScripts.js が生成されます。

以上がJavaScriptプログラマブルスクリプト読み込み使用例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：クラシックタグとノンブロッキング