Mengapa JavaScript Sebaris Tidak Berfungsi dalam Teg Skrip dengan Sumber Luaran?

Memuatkan Skrip dengan Tag Skrip HTML

Teg skrip HTML digunakan untuk memasukkan dan melaksanakan kod JavaScript. Secara lalai, teg ini mengambil atribut sumber luaran, seperti scr untuk memuatkan fail JavaScript. Walau bagaimanapun, percubaan untuk memasukkan JavaScript sebaris dalam teg skrip, seperti ini:

<script src="myFile.js">
    alert( "This is a test" );
</script>

Gagal secara senyap tanpa membuang ralat.

Mengapa Menggunakan JavaScript Sebaris dalam Teg Skrip Tidak Berfungsi

Sebab bagi tingkah laku ini ialah elemen skrip hanya boleh memuatkan satu sumber, sama ada luaran atau sebaris. Apabila kedua-dua kandungan src dan sebaris hadir, kandungan sebaris diabaikan. Oleh itu:

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

Tidak akan memuatkan skrip yang ditentukan.

Penyelesaian: Menggunakan Elemen Berbilang Skrip

Untuk memuatkan berbilang skrip, anda perlu menggunakan elemen skrip berasingan untuk setiap :

<script src="script/obj.js"></script>
<script src="script/home/login.js"></script>

Sebagai alternatif, anda boleh mencipta skrip induk yang memuatkan skrip yang diperlukan secara dinamik:

<script>
var scripts = ["script/obj.js", "script/home/login.js"];
for (var i = 0; i < scripts.length; i++) {
  var script = document.createElement("script");
  script.src = scripts[i];
  document.head.appendChild(script);
}
</script>

Nota Tambahan

Sementara JavaScript sebaris diabaikan dalam elemen skrip dengan sumber luaran, kandungan elemen skrip kekal dalam DOM. Ini telah mendorong beberapa pembangun untuk menggunakannya untuk menyimpan data yang diakses oleh skrip luaran. Walau bagaimanapun, menggunakan data-* atribut secara amnya merupakan pendekatan yang lebih sesuai dan lebih bersih untuk tujuan ini.

Atas ialah kandungan terperinci Mengapa JavaScript Sebaris Tidak Berfungsi dalam Teg Skrip dengan Sumber Luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!