Cara memautkan fail JavaScript dalam halaman HTML-Soal Jawab bahagian hadapan-php.cn

Cara memautkan fail JavaScript dalam halaman HTML

PHPz

Lepaskan： 2023-04-24 11:29:15

asal

4893 orang telah melayarinya

JavaScript ialah bahasa skrip yang boleh dibenamkan dalam halaman HTML. Dalam pembangunan web, kami biasanya menggunakan JavaScript untuk melaksanakan beberapa fungsi interaktif halaman web, seperti memuatkan kandungan secara dinamik, pengesahan borang, dsb. Apabila melaksanakan fungsi ini, kami biasanya perlu memautkan berbilang fail JavaScript.

Dalam artikel ini, kami akan memperkenalkan cara memautkan fail JavaScript dalam halaman HTML, dan memberikan beberapa pengalaman praktikal serta petua untuk membantu anda mengurus dan mengekalkan kod JavaScript dengan lebih baik.

1. Memautkan fail JavaScript dalam HTML

Memautkan fail JavaScript dalam HTML adalah sangat mudah, hanya gunakan teg <script>. Berikut ialah contoh asas:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan teg <script> untuk memaut ke fail myscript.js. Atribut src menentukan laluan ke fail JavaScript. Apabila penyemak imbas menghuraikan halaman HTML, ia akan memuat turun dan melaksanakan fail JavaScript secara automatik untuk melaksanakan fungsi yang berkaitan.

Perlu diambil perhatian bahawa untuk memastikan ketepatan dan kebolehpercayaan, kami biasanya mengesyorkan meletakkan fail JavaScript dalam teg <head>. Kerana fail JavaScript mungkin telah memulakan beberapa operasi sebelum elemen lain selesai dimuatkan, menyebabkan ralat atau pengecualian.

2. Gunakan perpustakaan JavaScript luaran

Dalam pembangunan sebenar, kami biasanya menggunakan beberapa perpustakaan JavaScript luaran, seperti jQuery, React, Vue, dll. Perpustakaan ini boleh membantu kami melaksanakan dengan cepat kesan interaktif yang kompleks dan meningkatkan kecekapan pembangunan.

Jika anda perlu memautkan perpustakaan ini dalam halaman HTML, anda boleh menggunakan teg <script> untuk menentukan laluan ke fail pustaka sama seperti memautkan fail JavaScript biasa. Sebagai contoh, perpustakaan jQuery dipautkan seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami memautkan perpustakaan jQuery dengan fail JavaScript kami sendiri. Perlu diingatkan bahawa adalah disyorkan untuk menggunakan CDN (Rangkaian Penghantaran Kandungan) rasmi apabila memaut ke perpustakaan JavaScript luaran untuk memastikan bahawa versi perpustakaan di dalam CDN adalah yang terkini Ia juga boleh mempercepatkan kelajuan memuatkan fail perpustakaan, dengan itu meningkatkan prestasi laman web.

3. Pautkan berbilang fail JavaScript

Jika anda perlu memautkan berbilang fail JavaScript, anda boleh menggunakan berbilang tag <script> dalam halaman HTML, setiap teg digunakan untuk memautkan fail JavaScript . Contohnya:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
  <script src="jquery.min.js"></script>
  <script src="vue.min.js"></script>
  <script src="react.min.js"></script>
  <script src="myscript.js"></script>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami memautkan empat fail JavaScript, iaitu jQuery, Vue, React dan fail JavaScript kami sendiri. Perlu diingatkan bahawa adalah disyorkan untuk memautkan fail JavaScript anda sendiri pada penghujungnya untuk memastikan perpustakaan luaran lain dimuatkan terlebih dahulu untuk mengelakkan ralat pemuatan atau pengecualian disebabkan oleh isu pergantungan.

Selain itu, jika terdapat kebergantungan antara berbilang fail JavaScript, di mana satu fail dimuatkan sebelum yang lain, ini mungkin menyebabkan ralat atau pengecualian. Dalam kes ini, adalah disyorkan untuk menggunakan alat pembungkusan, seperti Webpack, Rollup, dsb., untuk membungkus berbilang fail JavaScript ke dalam satu fail untuk mengelakkan masalah pemuatan pesanan.

4. Mempercepatkan kelajuan memuatkan fail JavaScript

Untuk meningkatkan prestasi halaman web, biasanya kami perlu memendekkan masa memuatkan fail JavaScript sebanyak mungkin. Berikut ialah beberapa pengalaman praktikal dan petua untuk membantu anda mempercepatkan pemuatan fail JavaScript:

Adalah disyorkan untuk menggunakan perpustakaan JavaScript awam, seperti jQuery, Vue, React, dll., kerana ini perpustakaan tersedia pada Cache CDN, kelajuan memuatkan biasanya lebih cepat. Untuk fail JavaScript yang ditulis sendiri, anda boleh mempertimbangkan untuk menggunakan CDN awam seperti CDNJS untuk memendekkan masa muat turun fail.
Adalah disyorkan untuk meletakkan fail JavaScript di bahagian bawah halaman, kerana apabila penyemak imbas memuatkan fail JavaScript, ia akan menyekat muat turun dan pemaparan sumber lain, menyebabkan pemuatan halaman lebih perlahan. Meletakkan fail JavaScript di bahagian bawah halaman mengelakkan masalah ini.
Adalah disyorkan untuk memampatkan fail JavaScript untuk mengurangkan saiz fail dan mempercepatkan muat turun. Fail JavaScript boleh dimampatkan menggunakan alat seperti UglifyJS, Pengkompil Penutupan, dsb.
Adalah disyorkan untuk menggabungkan fail JavaScript untuk mengurangkan bilangan permintaan HTTP dan dengan itu mempercepatkan muat turun. Anda boleh menggunakan alatan seperti Webpack, Rollup, dsb. untuk membungkus berbilang fail JavaScript ke dalam satu fail.

Ringkasnya, memautkan fail JavaScript ialah operasi yang sangat biasa dan penting dalam pembangunan web. Kami boleh mengurus dan mengekalkan kod JavaScript dengan berkesan serta meningkatkan prestasi dan pengalaman pengguna halaman web dengan menggunakan perpustakaan JavaScript luaran, memautkan berbilang fail JavaScript, mempercepatkan kelajuan pemuatan fail JavaScript, dsb.

Atas ialah kandungan terperinci Cara memautkan fail JavaScript dalam halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!