JavaScript Modules

Modules được giới thiệu trong ES 2015. Modules giúp chia nhỏ code thành các phần nhỏ hơn. Module có thể chứa classes hoặc functions. Từ khóa export và import được dùng để export/import variables, functions, objects giữa các file.

Lưu ý - Để chạy ví dụ này bạn cần chạy localhost server.

Dưới đây là mã về modules trong JavaScript:

INDEX.html

Ví dụ

<!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>Nhấn nút trên để 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'; }

Kết quả

JavaScript Modules

Khi nhấn nút 'IMPORT':

JavaScript Modules