10

必要に応じてJavaScript/jQueryに依存ファイルを自動ロードできるソリューションはありますか？たとえば、次のシナリオについて考えてみます。

  1. 特定のスクリプトをロードする必要があるときにリッスンするオートローダースクリプトがあります。
  2. jQuerydialog()プラグインが呼び出されます。
  3. オートローダーは、このプラグインが呼び出されたときにリッスンするように指示され、jQueryUIをロードします。
  4. 今後さらにダイアログが呼び出された場合、必要なスクリプトはロードされません。

これは、単に帯域幅を制限しようとするだけの努力ではありませんか？すべてのコアファイルを1つのスーパーパッケージに含めて、それで済ませる必要がありますか？

お時間をいただきありがとうございます。

4

9 に答える 9

3

オンデマンド スクリプトの読み込みの例は数多くあります。たとえば、remy Sharp は彼のブログにコード サンプルを掲載しており、そのまま使用することも、jQuery プラグインに変換することもできます。残念ながら、すべてのブラウザで機能するとは限りません。

jQuery プラグインを事前にではなくオンデマンドでロードするjQuery Lazy Plugin Loaderもあります。これを使用するには、次のように、使用している jQuery UI の各部分に対して遅延読み込みを設定する必要があります (name は、使用する各部分の関数名になります)。

$.lazy([{
   src: 'jquery-ui-1.8.14.custom.min.js',
   name: 'dialog'
}]);

この質問の手法を使用して、jQuery 自体をオンデマンドでロードすることもできます。たとえば、jQuery UI のロードに必要なときにスクリプト タグを動的に作成できます。

最後に、jQuery UI について話しているので、ユーザーのブラウザにキャッシュされている可能性が高いGoogle の CDNから取得することを検討してください。

于 2011-06-21T21:02:34.867 に答える
3

はい、すべてのスクリプトを 1 つのファイルに含める必要があります。または、少なくともそれらのほとんどは次のようにグループ化されています: jquery.js、global.js (頻繁に - 複数、2 つのページで使用されるスクリプトがある場所)、および page_specyfic.js。adialog()が呼び出され、ユーザーが .js のダウンロードとプラグインの初期化を待つ必要があるとします。帯域幅の節約 (もしあれば) は、ユーザーの経験を損なう価値はありません。

于 2011-06-21T21:03:30.983 に答える
2

この新しい jquery プラグインを試すことができます。yeapnope.js のように動作しますが、より理にかなっています。

http://plugins.jquery.com/plugin-tags/autoloader

$(document).autoLoader(
    {
      test: $.ui,
      loadScript: "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-   ui.min.js",
      complete: function(){
         console.log($.ui);
      }
    }
);
于 2011-07-26T00:13:56.167 に答える
1

あなたのコメントから、あなたの願いの一部はあなたのコードを整理しておくことであるように思われます。RequireJsをお勧めします。これにより、コードを明示的な依存関係を持つ明確に分離されたモジュールに分割できます。次に、本番環境に移行する場合は、それらをすべてマージして、提供する2〜3個のファイル（要求/帯域幅の節約）に戻すビルドツールがあります。

于 2011-07-29T13:59:29.347 に答える
1

スクリプトローダーが必要なようです。

ただし、通常、ブラウザ間でスクリプトを同期的にロードすることはできないため、スクリプト ローダーは必然的に非同期になります。スクリプトをロードし、コールバックを呼び出してから続行する必要があるため、あなたが求めていることは正確には不可能です。いくつかのプラグインを呼び出して、それが同期的に実行されているかどうかを知りたくない場合、問題の世界に陥ります。

jQuery のスクリプト ローダーである DeferJS を参照することをお勧めします: https://github.com/BorisMoore/jsdefer

于 2011-06-21T21:05:11.253 に答える
1

あまり心配しません。ファイルはキャッシュされます。サイト内の 1 つのページで jquery UI (または CSS などの他のインクルード ファイル) が読み込まれると、次に必要になったときにユーザーのブラウザー キャッシュに保存され、数日または数週間にわたって再度読み込まれることはありません。

于 2011-06-21T21:04:13.263 に答える
0

ええ、私はこのようなものを実装することも考えました。最終的に価値があるかどうかはわかりませんが、これを行うためのライブラリがかなりあります

于 2011-06-21T21:03:56.017 に答える
0

このようなことを試すこともできますが、それは苦痛です。基本的に、キャッチされたエラーのタイプと、ダイアログ (呼び出しようとしている関数が存在しない場合) のメッセージをチェックして、関数をロードし、メソッドを再度呼び出してみます。私が言ったように、エレガントな解決策が考えられない限り、どこでもこれを行うのは面倒です。

function loadDialog() {
    $('#myDialog').dialog({});
}

try { 
    loadDialog()
} catch(e) {
    if (e && e.type && e.type=='not_defined' && e.message == 'dialog is not defined') {
        //load jQuery plugins...
        loadDialog();
    }
}
于 2011-06-21T21:08:37.667 に答える
0

これは、上記のコメントのフォローアップ投稿です。

<link rel="stylesheet" href="../system/stylesheets/universal.css" />
<link rel="stylesheet" href="../system/stylesheets/jquery-ui.min.css" />
<link rel="stylesheet" href="../system/stylesheets/uploadify.css" />
<link rel="stylesheet" href="system/stylesheets/style.css" />
<script src="../system/javascripts/swfobject.js"></script>

<script src="../system/javascripts/jquery.min.js"></script>
<script src="../system/javascripts/jquery-ui.min.js"></script>
<script src="../system/javascripts/global.jquery.js"></script>
<script src="../system/javascripts/analog.jquery.js"></script>
<script src="../system/javascripts/funtip.jquery.js"></script>
<script src="../system/javascripts/uploadify.jquery.js"></script>
<script src="system/javascripts/install.jquery.js"></script>
<link rel="stylesheet" href="system/templates/stylesheets/style.css" />
<script>
$(document).ready(function() {
    $(':text, :password, textarea').funtip();
});
</script>
于 2011-06-21T21:11:28.177 に答える