為了避免在HTML
#中顯示大量的程式碼,我們一般選擇將js腳本
單獨放入一個檔案中,然後再將js檔案
匯入HTML
中,這樣可以使得HTML
檔案更簡潔,本文主要介紹導入js腳本
的兩種方式分別是:傳統導入、模組導入。
先確認需要匯入的js腳本
的位置,本文在HTML
檔案同路徑下。
1.傳統匯入:
JS腳本內容:
//文件名:example.js let a="呵呵姑娘";
HTML內容:
<!-- example.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="./example.js"></script> <script> console.log(a); </script> </body> </html>
2.模組匯入:
## JS腳本內容://文件名:example.js let a="呵呵姑娘"; export {a};HTML內容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script type="module"> import {a} from './example.js'; console.log(a); </script> </body> </html>
推薦:《2021年js面試題目及答案(大總結)》《js教學」
以上是Javascript中匯入js檔案的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!