脚本和模块 - 我的生活记录

JavaScript 有两种源文件，脚本和模块。模块是ES6引入的，在这之前JavaScript只有脚本。

脚本（Scripts）

脚本是最基本的JavaScript代码组织形式。它们通常直接嵌入HTML文件中或通过外部文件引入。


<!DOCTYPE html>
<html>

<head>
    <title>脚本</title>
    <script src="script.js"></script> <!-- 外部脚本 -->
</head>

<body>
    <h1 id="title">Hello World</h1>
    <!-- 内联脚本 -->
    <script>
        document.getElementById('title').style.color = 'blue';
    </script>
</body>

</html>

脚本的特点：

全局作用域：变量和函数默认在全局作用域中声明。
顺序执行：按照在HTML中出现的顺序依次执行。
没有显式的导入/导出机制。

模块（Modules）

模块提供了更好的封装性和可维护性。从语法上来看，模块和脚本的区别仅仅在于有没有 export 和 import 。

示例：基本导出


// math.js
export function add(a, b) {
    return a + b;
}

export function multiply(a, b) {
    return a * b;
}


// main.js
import {
    add,
    multiply
} from './math.js';

console.log(add(2, 3));
console.log(multiply(2, 3));

示例：默认导出


// greet.js
export default function greet(name) {
    return `Hello, ${name}!`;
}


// main.js
import greet from './greet.js';

console.log(greet('World'));

通过 import 语句，我们可以导入模块使用，在现代浏览器中，支持使用script标签引入模块，必须添加 type="module" ，如果引入脚本，则不需要添加type。


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

如果标签不添加type，会发生什么呢？会默认认为加载的文件是脚本，如果在脚本中写了export，自然会报错。

模块的特点：

局部作用域：每个模块有自己的作用域，不会污染全局环境。
显式的导入/导出：使用import和export关键字明确声明依赖关系。
单例模式：模块只会被执行一次，执行后会被缓存。