the concept of Modules in JS (ES6)?

Question

the concept of Modules in JS (ES6)?

Please explain what is the purpose of exporting and importing individual modules, if in the process of connecting js files with these modules, they still become available from outside. I'll give you an example. Suppose there is a module

function sayHello(){
 console.log("Hello!");
}
export {sayHello}

And we import it in the index.js file . What is the design of the html page

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script src="index.js"></script>
<!-- Тут с импортируемым модулем -->
</head>
<body>
<div class="main"></div>
</body>
</html>

Will differ from the markup type

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<script src="index.js"></script>
<script src="sayHello.js"></script>
</head>
<body>
<div class="main"></div>
</body>
</html>

(Well, except for the extra request to the server) Are there any differences in this modular system ?

4

javascript ecmascript-6 модули

Author: BlackStar1991, 2020-09-18

Source

1 answers

score 0 · Answer 1

You can't do import inside your script with this method of connecting to the page. I'm not really sure if this will work. Such modules are correctly connected via.

<script type="module" src="index.js"></script>