JavaScript Dynamic Logic: Cara Melaksanakan Blok Kod Berbeza Berdasarkan Tahun Dan Daripada Mengubah Sumber Skrip

Memahami cabaran pemuatan skrip dinamik

Dalam pembangunan web, kadang -kadang kita perlu melaksanakan kod JavaScript yang berbeza berdasarkan keadaan tertentu (seperti tahun semasa, kebenaran pengguna, atau kumpulan ujian A/B). Pendekatan yang intuitif tetapi sering tidak berkesan adalah untuk mencuba mengubahsuai atribut SRC dari tag <script> yang sudah ada dalam dokumen HTML. Walaupun mengubah suai harta DOM ditunjukkan dalam Inspektor Halaman, penyemak imbas biasanya tidak kembali dan melaksanakan tag <cript> yang dimuatkan walaupun harta SRCnya diubah. Ini kerana penyemak imbas telah menyelesaikan parsing dan pelaksanaan skrip apabila halaman dimulakan dan dimuatkan, dan pengubahsuaian SRC berikutnya tidak akan mencetuskan kitaran pemuatan dan pelaksanaan baru.</script>

Pertimbangkan struktur kod untuk percubaan awal berikut:

Struktur HTML:

 <script id="element1" src="#"> </script>
<script src="js/element-by-year.js"> </script>

JavaScript (percubaan awal):

 var tahunan = document.getElementById ("element1");

var refreshstatus = () => {
  const hari ini = tarikh baru ();
  biarkan tahun = hari ini.getFleAcar ();

  jika (tahun == 2022) {
    tahunan.src = "js/change1.js"; // cuba mengubah suai src
  } 
  jika (tahun == 2023) {
    tahunan.src = "js/change2.js"; // cuba mengubah suai src
  }
}

// Run refreshstatus () buat kali pertama;

// kemas kini setInterval (Refreshstatus, 86400000); // 86400000 milisaat = 1 hari

Tujuan kod di atas ialah apabila tahun 2022, skrip dengan id = "element1" harus memuatkan js/change1.js; Apabila tahun 2023, beban js/change2.js. Walau bagaimanapun, seperti yang dijelaskan sebelum ini, pendekatan ini tidak berfungsi seperti yang diharapkan. Walaupun anda mungkin melihat dalam alat pemaju penyemak imbas yang atribut SRC berubah, fail JavaScript yang berkaitan tidak dimuat semula atau dilaksanakan.

Penyelesaian: Panggilan fungsi berdasarkan penghakiman bersyarat

Untuk melaksanakan keperluan secara dinamik melaksanakan logik kod yang berbeza berdasarkan tahun ini, cara yang paling boleh dipercayai dan disyorkan adalah untuk memelihara semua logik kod yang mungkin (atau menentukannya dalam fail yang sama) dan kemudian hubungi fungsi yang sepadan berdasarkan penghakiman bersyarat. Pendekatan ini memastikan bahawa semua kod dihuraikan apabila halaman dimuatkan, dan kami hanya mengawal blok kod yang dilaksanakan semasa runtime.

Berikut adalah penyelesaian pengoptimuman untuk melaksanakan fungsi ini:

Struktur HTML: Bahagian HTML disimpan ringkas dan tidak lagi memerlukan tag skrip SRC kosong untuk menduduki tempat itu. Semua logik akan diuruskan melalui fail JavaScript utama.

 
<script src="js/main-logic.js"> </script>

JavaScript (penyelesaian yang disyorkan): Menggabungkan semua logik yang berkaitan dengan tahun ke dalam fungsi bebas dan memanggilnya dalam logik utama berdasarkan tahun semasa.

 // Tentukan fungsi fungsi yang sepadan dengan fungsi tahun yang berlainan elemen1 () {
    // 2022 Konsol Logik Khusus.log ("Melaksanakan logik 2022!");
    Alert ("Ia 2022!");
}

fungsi elemen2 () {
    // 2023 Konsol Logik Khusus.log ("Melaksanakan logik 2023!");
    Alert ("Ia 2023!");
}

/**
 * Menyegarkan status mengikut tahun semasa dan melaksanakan logik yang sepadan*/
var refreshstatus = () => {
  const hari ini = tarikh baru ();
  biarkan tahun = hari ini.getFleAcar ();

  jika (tahun === 2022) {
    elemen1 (); // panggil fungsi 2022} lain jika (tahun === 2023) {
    elemen2 (); // panggil fungsi 2023} else {
    // Pilihan: mengendalikan tahun -tahun lain atau console.log lalai (`tahun semasa ialah $ {tahun}, dan tidak ada logik khusus yang akan dilaksanakan.`);
  }
}

// Jalankan sekali dengan segera apabila halaman dimuatkan untuk menetapkan keadaan awal Refreshstatus ();

// Tetapkan pemasa dan kemas kini sekali sehari (86400000 milisaat = 24 jam)
// Nota: Dalam aplikasi sebenar, jika logik tidak bergantung pada detik atau perubahan minit,
// Berjalan sekali sehari biasanya cukup untuk mengelakkan penggunaan sumber yang tidak perlu.
setInterval (Refreshstatus, 86400000);

Penjelasan terperinci mengenai rancangan dan langkah berjaga -jaga

1. Fungsi Encapsulation: Menggabungkan logik kod dari tahun -tahun yang berlainan ke dalam fungsi masing -masing (seperti elemen1 () dan elemen2 ()). Ini meningkatkan kebolehbacaan, modulariti dan pemeliharaan kod.
2. Penghakiman Bersyarat: Fungsi Refreshstatus bertanggungjawab untuk mendapatkan tahun semasa dan menggunakan IF ... lain jika struktur untuk menentukan fungsi berfungsi yang harus dipanggil. Ia adalah amalan yang baik untuk digunakan === untuk perbandingan kesamaan yang ketat.
3. Pelaksanaan segera dan kemas kini masa:
   • refreshstatus ();: Melaksanakan sekali sejurus selepas skrip dimuatkan untuk memastikan halaman itu menggunakan logik yang betul apabila dimuatkan.
   • setInterval (Refreshstatus, 86400000);: Tetapkan pemasa dan panggil fungsi Refreshstatus sekali lagi setiap hari (86400000 milisaat). Ini sangat berguna untuk adegan seperti Malam Tahun Baru di mana logik perlu dikemas kini.
4. Pengekalkan Kod: Apabila tahun meningkat, tambahkan lain jika cawangan dan fungsi fungsi yang sepadan dalam fungsi refreshstatus.
5. Pertimbangan Prestasi: Kaedah ini mengelakkan permintaan rangkaian overhead dan masalah pemuatan tak segerak yang berpotensi yang disebabkan oleh fail pemuatan dinamik. Semua kod yang diperlukan boleh didapati pada beban awal, kecuali laluan pelaksanaan adalah berbeza.
6. Alternatif (maju):
   • Secara dinamik Buat Elemen Skrip: Jika anda benar -benar perlu memuatkan fail JS yang baru secara dinamik, anda boleh membuat elemen <script> baru melalui document.createelement (&#39;script&#39;), tetapkan SRCnya, dan kemudian tambahkannya ke DOM (mis. Kaedah ini mencetuskan permintaan rangkaian baru dan pelaksanaan skrip. Walau bagaimanapun, anda perlu memberi perhatian untuk menguruskan status pemuatan skrip dan mengelakkan pemuatan pendua.</script>
   • Loader Modular: Untuk aplikasi yang lebih kompleks, anda boleh menggunakan pemuat modular seperti memerlukan dan webpack untuk memuatkan modul JS apabila diminta.

Meringkaskan

Apabila anda perlu secara dinamik melaksanakan logik kod yang berbeza dalam JavaScript mengikut keadaan runtime (seperti tahun), secara langsung mengubah suai atribut SRC tag yang sedia ada biasanya tidak sah. Amalan terbaik adalah untuk merangkum semua logik yang mungkin ke dalam fungsi bebas dan memanggil fungsi ini melalui penghakiman bersyarat dalam logik kawalan utama. Kaedah ini bukan sahaja memastikan pelaksanaan kod yang betul, tetapi juga meningkatkan keupayaan dan prestasi. Ia adalah cara yang disyorkan untuk mencapai tingkah laku dinamik seperti itu.