Pertanyaan Cara terbaik untuk menggunakan jQuery yang dihosting Google, tetapi kembali ke pustaka yang dihosting di Google gagal


Cara apa yang bagus untuk mencoba memuat jQuery yang dihosting di Google (atau lib yang dihosting Google lainnya), tetapi memuat salinan jQuery saya jika upaya Google gagal?

Saya tidak mengatakan Google tidak stabil. Ada beberapa kasus di mana salinan Google diblokir (tampaknya di Iran, misalnya).

Apakah saya akan mengatur timer dan memeriksa objek jQuery?

Apa bahaya dari kedua salinan yang datang?

Tidak benar-benar mencari jawaban seperti "hanya menggunakan Google satu" atau "cukup gunakan milik Anda sendiri." Saya memahami argumen-argumen itu. Saya juga memahami bahwa pengguna cenderung memiliki cache versi Google. Saya sedang berpikir tentang fallbacks untuk cloud secara umum.


Edit: Bagian ini ditambahkan ...

Karena Google menyarankan menggunakan google.load untuk memuat pustaka ajax, dan melakukan panggilan balik saat selesai, saya bertanya-tanya apakah itu kunci untuk membuat serial masalah ini.

Saya tahu kedengarannya agak gila. Saya hanya mencoba untuk mencari tahu apakah itu bisa dilakukan dengan cara yang dapat diandalkan atau tidak.


Pembaruan: jQuery sekarang dihosting di CDN Microsoft.

http://www.asp.net/ajax/cdn/


982
2018-06-18 17:51


asal


Jawaban:


Anda dapat mencapainya seperti ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

Ini harus ada di halaman Anda <head> dan penangan acara siap jQuery apa pun harus ada di <body> untuk menghindari kesalahan (meskipun tidak bodoh-bukti!).

Satu alasan lagi untuk tidak menggunakan jQuery yang dihosting Google adalah bahwa di beberapa negara, nama domain Google dilarang.


774
2018-02-22 18:05



Cara termudah dan terbersih untuk melakukan ini sejauh ini:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>

328
2018-06-22 01:15



Ini sepertinya berhasil untuk saya:

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
    $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
    <p id="test">hello jQuery</p>
</body>
</html>

Cara kerjanya adalah menggunakan google keberatan panggilan itu http://www.google.com/jsapi beban ke window obyek. Jika objek itu tidak ada, kami mengasumsikan bahwa akses ke Google gagal. Jika itu masalahnya, kami memuat salinan lokal menggunakan document.write. (Saya menggunakan server sendiri dalam hal ini, silakan gunakan milik Anda sendiri untuk menguji ini).

Saya juga menguji kehadiran window.google.load - Saya juga bisa melakukan typeof periksa untuk melihat bahwa benda adalah objek atau fungsi yang sesuai. Tapi saya pikir ini tidak berhasil.

Ini hanya logika pemuatan, karena penyorotan kode tampaknya gagal sejak saya memposting seluruh halaman HTML yang saya uji:

if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}

Meskipun saya harus mengatakan, saya tidak yakin bahwa jika ini adalah perhatian bagi pengunjung situs Anda, Anda harus mengotak-atik Google AJAX Libraries API sama sekali.

Fakta yang menyenangkan: Saya awalnya mencoba menggunakan blok trycatch untuk ini dalam berbagai versi tetapi tidak dapat menemukan kombinasi yang sebersih ini. Saya akan tertarik untuk melihat implementasi lain dari ide ini, murni sebagai latihan.


73
2018-06-26 20:41



Jika Anda memiliki modernizr.js yang disematkan di situs Anda, Anda dapat menggunakan yepnope.js bawaan untuk memuat skrip Anda secara asinkron - antara lain jQuery (dengan fallback).

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

Ini memuat jQuery dari Google-cdn. Setelah itu dicentang, jika jQuery berhasil dimuat. Jika tidak ("tidak"), versi lokal dimuat. Juga skrip pribadi Anda dimuat - "keduanya" menunjukkan, bahwa proses beban dimulai secara independen dari hasil tes.

Ketika semua beban-proses selesai, fungsi dijalankan, dalam kasus 'MyApp.init'.

Saya pribadi lebih menyukai cara pemuatan skrip asynchronous ini. Dan karena saya mengandalkan fitur-tes yang disediakan oleh modernizr ketika membangun sebuah situs, saya memilikinya tertanam di situs itu. Jadi sebenarnya tidak ada overhead.


30
2018-06-26 17:02



Ada beberapa solusi bagus di sini, tetapi saya ingin mengambil satu langkah lebih jauh mengenai file lokal.

Dalam skenario ketika Google gagal, itu harus memuat sumber lokal tetapi mungkin file fisik di server belum tentu pilihan terbaik. Saya membahasnya karena saat ini saya menerapkan solusi yang sama, hanya saya ingin kembali ke file lokal yang dihasilkan oleh sumber data.

Alasan saya untuk ini adalah bahwa saya ingin memiliki pikiran ketika datang untuk melacak apa yang saya muat dari Google vs. apa yang saya miliki di server lokal. Jika saya ingin mengubah versi, saya ingin agar salinan lokal saya disinkronkan dengan apa yang saya coba muat dari Google. Dalam lingkungan di mana ada banyak pengembang, saya pikir pendekatan terbaik adalah mengotomatisasi proses ini sehingga yang harus dilakukan adalah mengubah nomor versi dalam file konfigurasi.

Inilah solusi yang saya usulkan yang seharusnya bekerja dalam teori:

  • Dalam file konfigurasi aplikasi, saya akan menyimpan 3 hal: URL mutlak untuk pustaka, URL untuk API JavaScript, dan nomor versi
  • Tulis kelas yang mendapatkan isi file dari perpustakaan itu sendiri (dapatkan URL dari konfigurasi aplikasi), simpan di sumber data saya dengan nama dan nomor versi
  • Tulis handler yang menarik file lokal saya keluar dari db dan cache file sampai nomor versi berubah.
  • Jika itu berubah (dalam konfigurasi aplikasi saya), kelas saya akan menarik isi file berdasarkan nomor versi, menyimpannya sebagai catatan baru di sumber data saya, maka pawang akan menendang dan menyajikan versi baru.

Secara teori, jika kode saya ditulis dengan benar, semua saya perlu lakukan adalah mengubah nomor versi dalam konfigurasi aplikasi saya kemudian viola! Anda memiliki solusi fallback yang otomatis, dan Anda tidak perlu memelihara file fisik di server Anda.

Apa yang semua orang pikirkan? Mungkin ini berlebihan, tetapi ini bisa menjadi metode elegan untuk mempertahankan pustaka AJAX Anda.

Biji pohon ek


20
2018-01-28 05:49



if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

Setelah Anda mencoba memasukkan salinan Google dari CDN.

Di HTML5, Anda tidak perlu mengatur type atribut.

Anda juga bisa menggunakan...

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');

19
2018-01-12 16:42



Anda mungkin ingin menggunakan file lokal Anda sebagai pilihan terakhir.

Sepertinya saat ini CDN milik jQuery tidak mendukung https. Jika itu Anda mungkin ingin memuat dari sana terlebih dahulu.

Jadi, inilah urutannya: Google CDN => Microsoft CDN => Salinan lokal Anda.

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script> 

8
2018-02-21 16:09