JavaScript modules
Modules were introduced in ES 2015. Modules were introduced to break over code into smaller pieces. The modules could contain classes or functions in them. Keywords export and import are used to export variables, functions, objects and import them in other files.
Note − To run this example you will need to run a localhost server.
Following is the code for modules in JavaScript
INDEX.html
Example
Live Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 18px;
font-weight: 500;
color:blueviolet;
}
</style>
</head>
<body>
<h1>JavaScript Modules</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>Click on the above button to import module</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>script.js
import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
test();
})sample.js
let resultEle = document.querySelector(".result");
export default function testImport(){
resultEle.innerHTML = 'Module testImport has been imported';
}Output
On clicking the ‘IMPORT’ button −
Published on 18-Jul-2020 11:44:17
