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

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

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

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

    為了避免在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中文網其他相關文章!

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