JavaScript模块化之 ECMAScript 模块化规范

geekymv 发表于:2025-04-13 23:01:52 阅读数:27

ES6模块化规范,官方标准的规范,在语言标准的层面上实现了模块化的功能,是目前最流行的模块化规范。且浏览器与服务端均支持该规范。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>esm demo</title>
</head>
<body>
  <script type="module" src="./index.js"></script>
</body>
</html>

index.js

// 万能导入,导入所有
import * as school from './school.js'
import * as student from './student.js'

console.log(school)
console.log(student)

school.js

export const name = "红星小学";
export const address = "北京市海淀区清华东路";

export function getTel() {
    return "010-88888888";
}

function getCities() {
    return ["北京", "上海", "广州", "深圳"];
}

student.js

export const name = "张三";
export const age = 18;

export function getTel() {
    return "010-66666666";
}

function getHobbys() {
    return ["打球", "唱歌", "跳舞"];
}


Barbara Middleton
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis.
Like · Reply · 3 hrs

Sean Brown
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat.
Like · Reply · 2 hrs

Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa.
Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor.

Kayli Eunice
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat.
Like · Reply · 2 hrs