Deux façons d'importer des fichiers js en Javascript-js tutoriel-php.cn

Deux façons d'importer des fichiers js en Javascript

autoload

Libérer： 2021-04-13 11:32:56

original

9863 Les gens l'ont consulté

Deux façons dimporter des fichiers js en Javascript

Afin d'éviter d'afficher une grande quantité de code dans HTML, nous choisissons généralement de mettre js脚本 dans un fichier séparé, puis d'importer js文件 dans HTML . Cela peut rendre le fichier HTML plus concis. Cet article présente principalement les deux manières d'importer js脚本 : l'importation traditionnelle et l'importation de module.

Confirmez d'abord l'emplacement du js脚本 qui doit être importé. Cet article se trouve dans le même chemin que le fichier HTML.

1. Import traditionnel :

Contenu du script JS :

//文件名：example.js
let a="呵呵姑娘";

Copier après la connexion

Contenu 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>

Copier après la connexion

2. Import du module :

Contenu du script JS :

//文件名：example.js
let a="呵呵姑娘";
export {a};

Copier après la connexion

Contenu 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>

Copier après la connexion

Recommandé : "Questions et réponses de l'entretien js 2021 (grand résumé) " Tutoriel js》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!