Modules tutorial in Advance JavaScript

October 16, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Modules Advance JavaScript</title>
    <link rel="stylesheet" href="">
</head>

<body>
    <script type="module" src="./main.js">
    </script>
</body>

</html>





Below File is modules/library.js File
let message = "ES6 Modules";

function user(name) {
    console.log(`Hello ${name}`);
    return `Hii ${name}`;
}
class Test {
    constructor() {
        console.log("Constructor Method");
    }
}
export { message, user, Test };

//Making Default Function as shown below :
export default function () {
    console.log("Hello, this is default function");
}





Below File is modules/bridge.js File
export { user } from "./library.js";




Below File is modules/main.js File
// FIRST Way :
// import { message, user as us, Test } from "./library.js";
// //making Alias Name of function "user" as "us"

// console.log(message);
// document.body.innerHTML = message;
// us("World, How are you ?");
// console.log(us("Brother, Good Morning!"));

// let a = new Test();


// SECOND Way :
//If we want to access all Properties classes, functions, variables of library.js File then we can use
//short way as shown below :
import * as HelloWorld from "./library.js";
console.log(HelloWorld.message);
document.body.innerHTML = HelloWorld.message;
HelloWorld.user("World, How are you ?");
console.log(HelloWorld.user("Brother, Good Morning!"));

let a = new HelloWorld.Test();


//Importing Default Function as shown below :
//There is no Name of default function but when we import default function at that time we assign name.
//Here below we have assigned default function name as "HelloDefault".
// import {default as HelloDefault} from "./library.js";
//We can import above code in short way as shown below :
import HelloDefault from "./library.js";
HelloDefault();


import { user } from "./bridge.js";
user("This is bridge process");
console.log(user("This is console bridge process"));