JavaScriptファイルを動的にロードするためのjQuery

ユーザーが特定のボタンをクリックした場合にのみロードしたい非常に大きなjavascriptファイルがあります。フレームワークとしてjQueryを使用しています。これを行うのに役立つ組み込みのメソッドまたはプラグインはありますか？

さらに詳しく：「コメントの追加」ボタンを押して、TinyMCE javascriptファイルをロードし（すべてのTinyMCEを1つのJSファイルにまとめました）、tinyMCE.init（...）を呼び出します。

誰もが「コメントを追加」をクリックするわけではないので、最初のページのロード時にこれをロードしたくありません。

私ができることは理解しています：

$("#addComment").click(function(e) { document.write("<script...") });

しかし、より良い/カプセル化された方法はありますか？

はい、document.writeの代わりにgetScriptを使用してください。ファイルが読み込まれると、コールバックも可能になります。

ただし、コードを次のようにするため、TinyMCEが定義されているかどうかを確認してから、それをインクルードする前に（ 'Add Comment'への後続の呼び出しのために）ください。

$('#add_comment').click(function() {
    if(typeof TinyMCE == "undefined") {
        $.getScript('tinymce.js', function() {
            TinyMCE.init();
        });
    }
});

あなたがinitそれを一度だけ呼び出す必要があると仮定すると、それはです。そうでない場合は、ここから把握できます。

私はここで少し遅れている（5年程度）ことに気づきましたが、次のように、受け入れられたものよりも良い答えがあると思います。

$("#addComment").click(function() {
    if(typeof TinyMCE === "undefined") {
        $.ajax({
            url: "tinymce.js",
            dataType: "script",
            cache: true,
            success: function() {
                TinyMCE.init();
            }
        });
    }
});

このgetScript()関数は、実際にはブラウザのキャッシュを防ぎます。トレースを実行すると、タイムスタンプパラメータを含むURLがスクリプトに読み込まれていることがわかります。

http://www.yoursite.com/js/tinymce.js?_=1399055841840

ユーザーが#addCommentリンクを複数回クリックtinymce.jsすると、タイムスタンプが異なるURLから再読み込みされます。これは、ブラウザキャッシュの目的を無効にします。

===

または、getScript()ドキュメントには、cachedScript()次のようにカスタム関数を作成してキャッシュを有効にする方法を示すいくつかのサンプルコードがあります。

jQuery.cachedScript = function( url, options ) {

    // Allow user to set any option except for dataType, cache, and url
    options = $.extend( options || {}, {
        dataType: "script",
        cache: true,
        url: url
    });

    // Use $.ajax() since it is more flexible than $.getScript
    // Return the jqXHR object so we can chain callbacks
    return jQuery.ajax( options );
};

// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
    console.log( textStatus );
});

===

または、キャッシュをグローバルに無効にする場合は、次のようにして無効にすることができajaxSetup()ます。

$.ajaxSetup({
    cache: true
});