Rentang Penggunaan:
Untuk proyek manajemen informasi seperti OA, MIS, ERP, dll., Situs web tidak dipertimbangkan untuk saat ini.
Masalah yang ditemui:
Untuk menyelesaikan suatu proyek, Anda sering perlu merujuk banyak file JS, seperti jQuery.js, easyui, dll. Ada juga beberapa kolom file JS yang saya tulis sendiri, jadi bagaimana file -file ini dapat dimuat dengan nyaman? Jika file berubah, bagaimana klien dapat memperbarui cache tepat waktu? Akan lebih baik jika efisiensi operasi titik dapat ditingkatkan.
Target:
1. Ini dapat dengan mudah merujuk file JS.
2. Coba gunakan berbagai cache untuk menghindari sering membaca file dari server.
3. Jika file JS diperbarui atau ditambahkan atau dikurangi, klien harus dapat memperbarui secara otomatis dan segera.
4. Penggunaan kembali file JS.
Struktur halaman:
Secara umum, proyek -proyek seperti OA dan MIS sebagian besar diimplementasikan menggunakan frameset atau iframe, yang membawa konsep halaman induk dan halaman anak. Kita bisa menggunakan ini untuk membuat keributan.
Halaman web dapat dibagi menjadi tiga bagian: shell, beranda, label, daftar data, formulir (tambahkan, modifikasi). Karena metode memuat JS di sini perlu menggunakan struktur halaman ini, dan justru karena alasan inilah situs web tidak didukung untuk saat ini.
Tampak akrab melihat gambar ini. Ya, itulah strukturnya.
teks
Saat ini, ketika datang ke aplikasi versi web, semakin mengandalkan berbagai JS, seperti jQuery pihak ketiga, easyui, my97, dll., Serta berbagai JS yang ditulis sendiri. Semakin banyak fungsi yang akan diimplementasikan, semakin banyak JS yang perlu digunakan, dan lebih banyak file JS dimodifikasi sering. Begitu banyak masalah muncul, seperti menulis banyak <skrip src = ""> untuk setiap halaman. Ini terlalu merepotkan. Berapa banyak halaman yang perlu Anda ubah untuk menambahkan file JS baru? Bagaimana cara memperbarui file JS segera? Cara membuat klien memuat JS lebih cepat. Beberapa file JS juga memiliki dependensi. Bagaimana cara memastikan pesanan pemuatan? Artikel ini adalah tentang berbagi solusi saya.
Pemuatan dinamis
Jelas merepotkan untuk menggunakan <script> untuk memuat JS pada halaman, jadi apa yang harus saya lakukan? Setelah memikirkannya, saya masih menggunakan pemuatan dinamis untuk menyelesaikannya. Saya juga mencari secara online dan menemukan bahwa ada banyak metode, termasuk yang ditulis sendiri dan yang diorganisir dalam kerangka kerja (seperti seejs). Terkadang saya masih merasa bahwa saya lebih terampil dalam membuatnya, jadi saya berencana untuk menulisnya sendiri.
Bagaimana cara memuat secara dinamis? Menggunakan metode yang disediakan oleh jQuery? Ini OK, tetapi halaman harus merujuk pada JQuery dan JS yang saya tulis untuk memuat file JS. Dengan kata lain, jika Anda harus menulis dua <script> di halaman, itu akan merepotkan. Jika Anda dapat menulis satu, Anda tidak boleh menulis dua. Meskipun hanya satu lagi, itu benar -benar merepotkan untuk memiliki satu lagi. Jadi saya memutuskan untuk menulis dengan tangan metode kecil pemuatan dinamis sendiri.
Apa yang harus saya lakukan jika saya tidak bisa menulis? Bibi Baidu datang dan membantu. Setelah mencari segala macam hal, saya akhirnya menemukan metode yang relatif ideal, jadi saya akan menggunakannya.
Salinan kode adalah sebagai berikut:
/* Fungsi yang mengimplementasikan pemuatan JS yang dinamis berasal dari internet. Setelah sedikit modifikasi, itu bisa kompatibel dengan IE10 */
var loadscript =
{
$$: function (id) {return document.getElementById (id); },
tag: function (element) {return document.geteLementsByTagname (element); },
ce: function (elemen) {return document.createElement (elemen); },
js: function (url, callback) {
var s = loadscript.ce ('skrip');
s.type = "Teks/JavaScript";
s.src = url;
if (document.documentmode == 10 || document.documentmode == 9) {
s.onError = s.onload = dimuat;
} kalau tidak {
s.onreadystatechange = siap;
s.onError = s.onload = dimuat;
}
loadscript.tag ('head') [0] .AppendChild (s);
function ready () {/*ie7.0/ie10.0*/
if (s.readystate == 'dimuat' || s.readystate == 'complete') {
callback ();
}
}
fungsi dimuat () {/*chrome/ie10.0*/
callback ();
}
}
};
Pesanan pemuatan
Kode baru telah selesai. Berikut ini adalah cara memuat file JS lainnya. Karena ada banyak file dan ada ketergantungan tertentu, saya akan memikirkannya dan membuat kamus file JS, dan kemudian membuat pesanan pemuatan dan memuatnya dalam urutan ini.
Agar lebih stabil, saya memutuskan untuk menggunakan metode memuat satu per satu, yaitu, memuat satu JS dan kemudian memuat JS lain. Ini memastikan ketergantungan. Tentu saja kerugiannya adalah bahwa kecepatan pemuatan akan lebih lambat. Secara umum, halaman web dapat dimuat dengan beberapa file JS, yang akan lebih cepat.
Gunakan cache
Secara umum, browser akan memiliki cache untuk berbagai sumber daya (seperti halaman web, gambar, JS, CSS, dll.), Dan tidak akan lagi mengunduhnya ke server jika sudah memilikinya. Sepertinya bagus, tetapi ada dua masalah:
A. Bagaimana browser menentukan apakah file JS yang di -cache adalah yang terbaru?
B. File JS telah diperbarui. Bagaimana cara memaksa browser untuk memperbarui?
Bagaimana penilaian browser? Saya tidak tahu banyak tentang langkah -langkah spesifik, tetapi saya tahu bahwa ada langkah untuk pergi ke server untuk menanyakan apakah file JS yang saya cache adalah yang terbaru, dan kemudian saya dapat menentukan apakah cache lokal adalah yang terbaru. Jika ini yang terbaru, saya tidak akan repot -repot. Jika tidak, saya akan mengunduh yang terbaru. Dengan kata lain, bahkan jika klien sudah memiliki cache file JS, browser perlu mengonfirmasi apakah itu yang terbaru dan masih akan pergi ke server untuk bertanya. Ini adalah perjuangan. Tentu saja, secara umum, proses ini akan sangat cepat, tetapi kadang -kadang proses ini akan sangat lambat.
Jadi, lebih baik mencoba menghindari memuat JS. Jadi "penggunaan kembali file JS" diperkenalkan.
Perbarui file JS
File JS telah diperbarui, tetapi browser masih menggunakan file JS sebelumnya karena telah di -cache, dan dia keras kepala bahwa file JS yang di -cache adalah yang terbaru. Apa yang harus saya lakukan?
Cara termudah adalah memuat JS dengan nomor versi yang diikuti olehnya. Jika ada pembaruan, nomor versi akan +1. Misalnya, xxx.js? V = 1. Setelah file JS diperbarui, itu adalah xxx.js? V = 2. Dengan cara ini, JS pasti akan diperbarui.
Tampaknya sederhana, tetapi bagaimana menambahkan nomor versi ini? Bagaimana cara memperbarui nomor versi itu sendiri?
Penggunaan kembali
Kita perlu melihat gambar di atas terlebih dahulu, yang merupakan struktur halaman, dengan halaman shell (atau halaman beranda), yang kita sebut halaman induk. Ada beberapa halaman yang dimuat oleh iframes, dan kami menambahkannya ke sub -halaman.
Pendekatan umum adalah memuat jQuery.js pada halaman induk, dan kemudian jQuery.js di halaman anak. Tentu saja, ketika subpage memuat jQuery.js, itu langsung diekstraksi dari cache, dan umumnya tidak lagi mengganggu server.
Namun, karena halaman induk telah dimuat, mengapa halaman anak perlu dimuat lagi? Apakah boleh memuatnya secara langsung di halaman induk? Saya mencari secara online dan sepertinya tidak ada yang melakukan itu. Mungkin saya terlalu alternatif, saya hanya ingin menerapkan metode ini. Keuntungannya adalah bahwa semua file JS dimuat di halaman induk, dan halaman anak secara langsung menggunakan JS yang dimuat di halaman induk, sehingga halaman anak tidak perlu mengacaukan file JS. Ini juga bisa lebih efisien. Lagi pula, bahkan jika Anda menggunakan cache untuk memuat, Anda perlu membuat penilaian. Kemudian, saat melakukan tindakan pemuatan, masih akan ada sedikit kerugian. Semakin banyak file JS, semakin jelas.
Jadi bagaimana mengimplementasikannya tampaknya mudah untuk memikirkannya.
Gunakan jQuery di halaman induk
Var aa = $ ('div'); // Temukan semua div di halaman induk
Apakah ini mungkin di subhalaman?
Var bb = top. $ ('Div'); // Div dapat ditemukan, tetapi bukan div dari halaman anak tetapi div di halaman induk.
Apa yang terjadi? Alasannya adalah rentang pencarian. JQuery memiliki tiga parameter. Kami biasanya hanya menggunakan yang pertama, dan yang terakhir diabaikan. Jadi apa parameter kedua? Itu adalah rentang pencarian. Di mana JQuery akan mencari ketika tidak ada yang ditentukan? Cari di halaman yang memuat jQuery, alih -alih mencari di halaman yang memanggil $.
Solusinya juga sangat sederhana, cukup tambahkan parameter
Var bb = top. $ ('Div', dokumen); // Tentukan rentang pencarian: Dokumen subpase
Tunggu, ini sepertinya sangat menjengkelkan. Saat menulis skrip, kita juga harus mempertimbangkan apakah skrip ini dieksekusi pada halaman induk atau di halaman anak?
Oke, buat paket sederhana untuk menghindari masalah ini. Tulis fungsi di subhalaman
Salinan kode adalah sebagai berikut:
fungsi $ (p1) {
return top. $ (p1, dokumen);
}
Oke, apakah pekerjaannya selesai? Tentu saja tidak! Untuk memprediksi apa yang terjadi selanjutnya, tolong dengarkan kerusakan selanjutnya.
PS: Pratinjau episode berikutnya. Ini adalah kode implementasi spesifik, dan ada beberapa ide dan ide. Saya tidak tahu apakah Anda memiliki hal lain untuk diketahui. Jika demikian, tolong balas di bawah ini. Terima kasih dulu.