Bagaimana untuk memanggil javascript secara luaran-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memanggil javascript secara luaran

王林

Lepaskan： 2023-05-09 09:01:36

asal

1026 orang telah melayarinya

Dalam reka bentuk web moden, JavaScript telah menjadi bahagian yang sangat diperlukan. JavaScript boleh dengan mudah memanjangkan kefungsian halaman web sambil meningkatkan pengalaman pengguna. Walaupun JavaScript boleh dibenamkan secara langsung dalam HTML, apabila anda perlu menggunakan semula kod JavaScript yang sama dalam berbilang halaman web, ia akan menjadi sangat berguna untuk merangkum JavaScript sebagai fail luaran yang berasingan dan memanggilnya secara luaran.

Artikel ini akan membincangkan cara memanggil kod JavaScript secara luaran, termasuk membenamkannya dalam dokumen HTML dan memaut ke dokumen.

Membenamkan JavaScript dalam Dokumen HTML

Membenamkan kod JavaScript terus ke dalam dokumen HTML ialah cara paling mudah. Anda hanya perlu menulis teg di kawasan kepala atau kawasan badan HTML dan membenamkan kod JavaScript terus ke dalamnya.

Sebagai contoh, berikut ialah dokumen HTML ringkas dengan kod JavaScript dibenamkan:

<!DOCTYPE html>
<html>
<head>
  <title>嵌入JavaScript代码</title>
  <script>
    function sayHello() {
      alert("Hello World!");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mentakrifkan fungsi ringkas yang dipanggil sayHello(). Ia menyambut pengguna dengan tindakan amaran. Kami memanggil fungsi ini menggunakan acara onclick yang ditakrifkan pada teg butang HTML.

Walaupun pendekatan ini mungkin baik untuk projek kecil, dalam projek yang lebih besar, membenamkan semua kod JavaScript ke dalam dokumen HTML boleh menjadikan kod itu berantakan dan sukar untuk dikekalkan.

Simpan kod JavaScript sebagai fail luaran yang berasingan

Untuk menyelesaikan masalah ini, kami boleh menyimpan kod JavaScript sebagai fail luaran yang berasingan. Pendekatan ini menjadikan kod lebih jelas dan mudah dibaca serta memudahkan penggunaan semula kod yang sama dalam dokumen HTML yang berbeza. Pada masa yang sama, memandangkan penyemak imbas menyimpan fail luaran, kelajuan memuatkan juga akan menjadi lebih pantas.

Berikut ialah contoh mudah: kami menyimpan kod JavaScript dalam fail bernama myscript.js.

function sayHello() {
  alert("Hello World!");
}

Salin selepas log masuk

Kami menyimpan kod di atas sebagai myscript.js dan kemudian memautkannya ke dalam dokumen HTML kami.

<!DOCTYPE html>
<html>
<head>
  <title>调用外部JavaScript文件</title>
  <script src="myscript.js"></script>
</head>
<body>
  <button onclick="sayHello()">点击我</button>
</body>
</html>

Salin selepas log masuk

Dengan menggunakan teg dan atribut src, kami boleh memautkan fail myscript.js ke dalam dokumen HTML. Dengan cara ini, kita boleh memanggil semua fungsi dan pembolehubah yang ditakrifkan dalam fail JavaScript dalam dokumen HTML.

Perlu diperhatikan bahawa apabila menggunakan fail JavaScript luaran, anda mesti memastikan bahawa fail JavaScript boleh dimuatkan dengan betul. Jika laluan fail tidak betul, penyemak imbas tidak akan dapat mencari fail dan kod dalam fail JavaScript tidak akan dilaksanakan.

Faedah lain memasukkan fail JavaScript luaran dalam dokumen HTML anda ialah ia menjadikan tapak web lebih mudah untuk diurus dan diselenggara. Apabila kod JavaScript perlu dikemas kini, cuma tukar kod dalam fail JavaScript dan semua dokumen HTML yang menggunakan fail boleh dikemas kini secara automatik.

Mentakrifkan berbilang fungsi dan pembolehubah dalam fail JavaScript

Secara umumnya, fail JavaScript boleh mengandungi satu set fungsi dan pembolehubah yang berkaitan secara logik. Ini boleh membantu anda menyusun kod anda dengan lebih baik dan menjadikannya boleh digunakan dalam lebih banyak senario aplikasi.

Sebagai contoh, berikut ialah fail yang dipanggil myfunctions.js yang mengandungi berbilang fungsi:

function addNumber(a, b) {
  return a + b;
}

function subtractNumber(a, b) {
  return a - b;
}

function divideNumber(a, b) {
  return a / b;
}

Salin selepas log masuk

Kami akan memperkenalkan fail JavaScript ini ke dalam dokumen HTML kami:

<!DOCTYPE html>
<html>
<head>
  <title>在JavaScript文件中定义多个函数和变量</title>
  <script src="myfunctions.js"></script>
</head>
<body>
  <p>10 + 5 = <script>document.write(addNumber(10, 5));</script></p>
  <p>10 - 5 = <script>document.write(subtractNumber(10, 5));</script></p>
  <p>10 / 5 = <script>document.write(divideNumber(10, 5));</script></p>
</body>
</html>

Salin selepas log masuk

Contoh ini menunjukkan cara menggunakan berbilang fungsi yang ditakrifkan dalam myfunctions.js dalam berbilang dokumen HTML. Kita boleh memanggil fungsi ini dengan memanggil fungsi dalam blok skrip.

Memuatkan JavaScript secara tak segerak

Apabila kami memasukkan fail JavaScript dalam dokumen HTML, penyemak imbas serta-merta mula memuatkan fail dan menyekat pemaparan halaman sehingga fail itu dimuatkan sepenuhnya Selesai. Ini boleh menyebabkan halaman dimuatkan dengan lebih perlahan.

Untuk mengelakkan masalah ini, kami boleh menggunakan pemuatan tak segerak bagi JavaScript. Khususnya, kami boleh meletakkan muat turun JavaScript di bahagian bawah halaman HTML dan menetapkan atribut async dalam teg skrip kepada benar. Ini akan menyebabkan penyemak imbas mengabaikan muat turun fail JavaScript sehingga halaman selesai dimuatkan dan kemudian mula memuat turun kod.

Sebagai contoh, di bawah ialah dokumen HTML yang memuatkan fail JavaScript secara tidak segerak:

<!DOCTYPE html>
<html>
<head>
  <title>异步加载JavaScript</title>
</head>
<body>
  <h1>使用异步加载JavaScript进行页面优化</h1>
  <p>这里是页面的正文内容。</p>
  <script async src="myscript.js"></script>
</body>
</html>

Salin selepas log masuk

Kami memuatkan fail JavaScript myscript.js ke dalam dokumen HTML. Dengan menetapkan atribut async kepada benar, penyemak imbas akan memuatkan kod skrip secara tidak segerak dan tidak menghalang halaman daripada dipaparkan.

Ringkasan

Dalam artikel ini, kami membincangkan cara membenamkan kod JavaScript dalam dokumen HTML dan memanggil kod JavaScript secara luaran. Kami juga membincangkan cara menyimpan kod JavaScript sebagai fail luaran yang berasingan, mentakrifkan berbilang fungsi dan pembolehubah dalam fail JavaScript dan menggunakan pemuatan tak segerak kod JavaScript untuk pengoptimuman halaman.

Sama ada anda seorang pemula atau profesional, memahami pengetahuan ini akan membantu anda mengatur dan mengurus kod JavaScript dengan lebih baik serta meningkatkan prestasi dan kebolehselenggaraan tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk memanggil javascript secara luaran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!