Rumah > Artikel > hujung hadapan web > Apakah kelemahan dalam kaedah beban jquery?

Apakah kelemahan dalam kaedah beban jquery?

青灯夜游asal: 2023-01-28 15:17:352692semak imbas

Kecacatan kaedah pemuatan jquery: 1. Kaedah pemuatan akan secara automatik mengabaikan teg kepala, badan dan skrip 2. Masalah pengimbangan bar skrol akan berlaku selepas pemuatan dinamik fungsi kaedah beban. Ia boleh diselesaikan dengan menambah "$(document).scrollTop(0);"; masalah caching; 5. Akan ada masalah kerosakan struktur.

Persekitaran pengendalian tutorial ini: sistem windows7, versi jquery3.6, komputer Dell G3.

Kaedah jquery load() boleh membantu kami menduplikasi bahagian dokumen halaman, seperti bar tajuk dan bahagian maklumat bawah. Kami boleh mengekstrak html templat dan kemudian memuatkannya secara dinamik ke dalam setiap halaman melalui kaedah pemuatan. Beberapa masalah dihadapi semasa penggunaan

Kecacatan 1: Kaedah pemuatan secara automatik mengabaikan tag kepala, badan dan skrip

1. Jika anda ingin memuatkan kandungan dokumen di kepala dan badan, anda boleh membungkus kandungan dalam div dan kemudian memuatkannya

2. Dalam bahagian skrip, kita boleh menggunakan panggilan balik kaedah beban Fungsi dicipta dan dimuatkan secara dinamik

3. Tidak disyorkan untuk memuatkan helaian gaya secara dinamik, jika tidak, akan ada masalah berkelip halaman, iaitu, apabila halaman dimuat semula, gambar tanpa memaparkan gaya akan muncul selama 1 saat, dan kemudian gambar biasa akan dipulihkan (sebab Sama seperti di bawah)

Kecacatan 2: Masalah pengimbangan bar skrol akan berlaku selepas pemuatan dinamik

Apabila memuatkan semula halaman . Bar tatal mengimbangi.
Dalam keadaan biasa, kami akan meletakkan fail skrip di hujung badan dokumen untuk menghalang js daripada menyekat pemaparan penyemak imbas Ini menyebabkan kami melaksanakan kaedah pemuatan kami selepas halaman yang dimuatkan secara dinamik adalah yang terakhir satu. Bar tatal telah ditetapkan di bahagian atas dari awal selepas memuatkan bahagian pengepala secara dinamik, bar tatal akan bergerak ke bawah dan tidak kembali ke atas >

Penyelesaian

Tambah $(document).scrollTop(0);dalam fungsi panggil balik kaedah pemuatan, atau gunakan atribut async bagi teg skrip untuk muatkan skrip js secara tak segerak, dan kemudian anda boleh Skrip diletakkan di kepala

Kecacatan 3: Masalah pemuatan tak segerak

Memandangkan beban adalah dicetuskan secara tidak segerak, dua baris kod dalam kaedah berikut adalah Mereka dilaksanakan serentak pada masa yang sama Disebabkan kelewatan rangkaian dan isu lain, tidak pasti ayat mana yang akan dilaksanakan dahulu Dan < ;div id="templateId">init16b28748ea4df4d9c2150843fecfba68 elemen dengan id templateId dihantar melalui beban dimuatkan.

Jika $("#templateId").html("hellow"); dalam baris ketiga dilaksanakan dahulu, kemudian $("#templateId") tidak dapat ditemui (ini Div belum dimuatkan lagi), sebenarnya, operasi html ("hello") tidak akan dilaksanakan

function load(targetId,templateName) {
    $("#"+targetId).load(contextPath+templateName);
    $("#templateId").html("hello");
}

Kecacatan 4: Masalah cache

Untuk mengurangkan beban pada pelayan permintaan, banyak penyemak imbas membuat perkara yang sama meminta alamat dan mengoptimumkan data sejarah daripada cache setempat Oleh itu, kita perlu menambah beberapa akhiran dinamik selepas alamat.

        function load(targetId,templateName) {
            var nowDate = new Date();
            var randomId = nowDate.getTime();//防缓存
            $("#"+targetId).load(contextPath+templateName+"?"+randomId);
        }

Kecacatan 5: Struktural. masalah kerosakan

Atas dasar perangkap 1 (masalah caching), anda juga mungkin menghadapi Masalah yang lebih mendalam ialah jika data yang kami muatkan tidak mematuhi spesifikasi 100db36a723c770d327fc0aef2ce13b1 ia akan memusnahkan struktur dom asal, menyebabkan keabnormalan seterusnya dalam mengambil dom dan nod lain Contohnya

Jika data yang diperoleh melalui beban adalah.

4750256ae76b6b9d804861d8f69e79d3<

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"></textarea>
 </body>
</html>

, maka penutupan html tidak teratur yang terakhir anda mungkin tidak dapat mendapatkan semula DOM pada masa akan datang kerana struktur asal telah musnah 🎜>Elemen html yang dijana pada masa ini tidak akan digunakan sebagai nod dom, tetapi akan disisipkan sebagai teks asal medan teks, jadi dom asal tidak akan dimusnahkan, jadi nilainya akan menjadi normal

[Pembelajaran yang disyorkan:

tutorial video jQuery

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"><textarea><</textarea>
 </body>
</html>

video bahagian hadapan web

]

Atas ialah kandungan terperinci Apakah kelemahan dalam kaedah beban jquery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menyembunyikan kandungan css div di luarArtikel seterusnya：Bagaimana untuk menyembunyikan kandungan css div di luar

Artikel berkaitan

Lihat lagi