ES6自定义模块

在ES6中,我们可以使用 exportimport 关键字来定义和使用自定义模块。

定义模块

导出(export)
  1. 命名导出(Named Exports)

    使用 export 关键字来导出模块中的变量、函数、类等。例如:

    javascript 复制代码
    // mathUtils.js
    export const sum = (a, b) => a + b;
    export const subtract = (a, b) => a - b;

    这里我们导出了 sumsubtract 函数。

  2. 默认导出(Default Export)

    使用 export default 关键字可以导出模块的默认值,一个模块只能有一个默认导出。例如:

    javascript 复制代码
    // utils.js
    const multiply = (a, b) => a * b;
    export default multiply;

    这里我们默认导出了 multiply 函数。

使用模块
导入(import)

使用 import 关键字来引入其他模块导出的内容。

  1. 命名导入(Named Imports)

    引入命名导出的变量、函数等。例如:

    javascript 复制代码
    // app.js
    import { sum, subtract } from './mathUtils';
    
    console.log(sum(5, 3)); // 输出 8
    console.log(subtract(5, 3)); // 输出 2
  2. 默认导入(Default Imports)

    引入默认导出的内容。例如:

    javascript 复制代码
    // app.js
    import multiply from './utils';
    
    console.log(multiply(5, 3)); // 输出 15
  3. 混合导入(Mixing Named and Default Imports)

    可以同时导入命名导出和默认导出。例如:

    javascript 复制代码
    // app.js
    import multiply, { sum } from './utils';
    
    console.log(sum(5, 3)); // 输出 8
    console.log(multiply(5, 3)); // 输出 15

注意事项

  • exportimport 必须在顶层作用域使用,不能嵌套在函数或条件语句中。
  • 导入路径可以是相对路径或者绝对路径。
  • 模块的导出和导入是静态的,意味着在编译阶段就确定了导入模块的内容。

使用ES6模块系统能够帮助我们更好地组织和管理JavaScript代码,提高代码的可维护性和可重用性。

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法