原生ES-Module在浏览器中的尝试与应用方法

2023-11-27 21:29:41

原生ES-Module在浏览器中的尝试与应用方法

随着JavaScript的发展，ES6标准引入了模块化的概念。模块化使得代码更具可读性、可维护性和可重用性。在Node.js中，模块化已经得到了广泛的应用，但是在浏览器中，原生ES-Module的支持还相对较新。

原生ES-Module在浏览器中的尝试主要探索通过type="module"属性加载模块的方式来使用模块化的JavaScript代码。这种方式的好处在于不需要借助于任何额外的工具或库，可以直接在浏览器中使用。

使用原生ES-Module

要使用原生ES-Module，首先需要在<script>标签上添加一个type="module"的属性来表示这个文件是作为module的方式来运行的。然后在对应的module文件中就是经常会在webpack中用到的那样。

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

在module文件中，可以使用import语句来引入其他模块，可以使用export语句来导出模块。

// module.js
import { add, subtract } from './math.js';

// 使用导入的模块
console.log(add(1, 2)); // 3
console.log(subtract(3, 1)); // 2

// 导出模块
export function multiply(a, b) {
  return a * b;
}

export function divide(a, b) {
  return a / b;
}

脚本加载模块

在脚本中加载模块可以使用import()函数。import()函数返回一个Promise对象，该Promise对象在模块加载完成后resolve，resolve的值是模块的导出对象。

// script.js
import('./module.js').then((module) => {
  // 使用导入的模块
  console.log(module.multiply(2, 3)); // 6
  console.log(module.divide(6, 2)); // 3
});