深入理解ES6模块的默认导出与导入

最新推荐文章于 2024-08-12 18:06:30 发布

t0_54coder

最新推荐文章于 2024-08-12 18:06:30 发布

阅读量325

点赞数 5

文章标签： es6 前端 ecmascript 编程开发

本文链接：https://blog.csdn.net/m0_62153576/article/details/141023562

版权

深入理解ES6模块的默认导出与导入

引言

在JavaScript的ES6模块系统中，export 和 import 语句提供了一种灵活的方式来共享代码。其中，export default 是一种特殊的导出方式，允许我们将一个值作为模块的默认导出，而不必为其指定一个名字。这种方式在模块化编程中非常实用，尤其是在构建大型应用时。

默认导出详解

使用 export default，我们可以导出模块的一个单一功能，而不必为这个功能指定一个名称。这在某些情况下非常有用，比如当我们想要导出一个函数或类，而这个函数或类是模块的主要功能时。

示例代码

// 默认导出一个函数
export default function runByDefault() {
  console.log("Function is running by default!");
}

// 或者，导出一个类
export default class {
  static square(a) {
    return a * a;
  }
}

默认导入的应用

在导入模块时，如果模块使用了默认导出，我们可以自由地为导入的值选择一个变量名。这使得代码更加灵活，可以根据上下文来命名变量。

示例应用

// app.js 文件
import Something from "./lib.js";

export function displaySquare(id, number) {
  let squaredValue = Something.square(number);
  document.getElementById(id).innerHTML = squaredValue;
}

实例演示

以下是一个简单的实例，演示了如何使用默认导出和导入来实现一个功能。

HTML文件

<!DOCTYPE html>
<html>
<body>
  <div id="display-div"></div>
  <script type="module">
    import {displaySquare} from './js/app.js'
    displaySquare("display-div", 5);
  </script>
</body>
</html>