JQuery untuk memuat file Javascript secara dinamis

Saya memiliki file javascript yang sangat besar yang ingin saya muat hanya jika pengguna mengklik tombol tertentu. Saya menggunakan jQuery sebagai kerangka kerja saya. Apakah ada metode atau plugin bawaan yang akan membantu saya melakukan ini?

Beberapa detail lebih lanjut: Saya memiliki tombol "Tambahkan Komentar" yang akan memuat file javascript TinyMCE (saya telah merebus semua hal TinyMCE menjadi satu file JS), lalu panggil tinyMCE.init (...).

Saya tidak ingin memuat ini pada pemuatan halaman awal karena tidak semua orang akan mengklik "Tambahkan Komentar".

Saya mengerti saya hanya bisa melakukan:

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

tetapi apakah ada cara yang lebih baik / dikemas?

Ya, gunakan getScript daripada document.write - bahkan akan memungkinkan panggilan balik setelah file dimuat.

Anda mungkin ingin memeriksa apakah TinyMCE sudah ditentukan, sebelum memasukkannya (untuk panggilan berikutnya ke 'Tambahkan Komentar') sehingga kodenya mungkin terlihat seperti ini:

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

Dengan asumsi Anda hanya perlu memanggilnya initsekali, itu saja. Jika tidak, Anda bisa mengetahuinya dari sini :)

Saya menyadari saya sedikit terlambat di sini, (5 tahun atau lebih), tetapi saya pikir ada jawaban yang lebih baik daripada yang diterima sebagai berikut:

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

The getScript()Fungsi sebenarnya mencegah cache browser . Jika Anda menjalankan pelacakan, Anda akan melihat skrip dimuat dengan URL yang menyertakan parameter stempel waktu:

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

Jika pengguna mengklik #addCommentlink beberapa kali, tinymce.jsakan dimuat ulang dari URL dengan stempel waktu yang berbeda. Ini mengalahkan tujuan cache browser.

===

Selain itu, dalam getScript()dokumentasi terdapat beberapa kode contoh yang menunjukkan cara mengaktifkan cache dengan membuat cachedScript()fungsi kustom sebagai berikut:

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 );
});

===

Atau, jika Anda ingin menonaktifkan caching secara global, Anda dapat melakukannya dengan cara ajaxSetup()berikut:

$.ajaxSetup({
    cache: true
});