首頁 > 文章 > web前端 > Javascript中匯入js檔案的兩種方式

Javascript中匯入js檔案的兩種方式

autoload原創: 2021-04-13 11:32:469859瀏覽

為了避免在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 &#39;./example.js&#39;;
        console.log(a);
    </script>
</body>
</html>

推薦：《2021年js面試題目及答案（大總結）》《js教學」

以上是Javascript中匯入js檔案的兩種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html JS

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：深入淺析Angular中Directive的用法下一篇：深入淺析Angular中Directive的用法

看更多