ECMAScript标准的两种语法--默认导出导入与命名式导出导入-阿里云开发者社区

ECMAScript标准的两种语法--默认导出导入与命名式导出导入

2024-05-30 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ECMAScript标准的两种语法--默认导出导入与命名式导出导入

上一篇分享了CommonJS 规范，CommonJS 规范是 Node.js 环境中默认的，后来官方推出 ECMAScript 标准语法，这种语法使用起来感觉更简单和灵活，并在vue开发中大量使用

我们接下来在一个需求中，体验下ECMAScript标准中的【默认与命名式】两种导出导入的语法：

需求：

封装并导出基地址和求数组元素和的函数，导入到 index.js 使用查看效果

一、默认导出导入：

1、导出语法：

export default {
  对外属性名: 模块内私有变量
}

2、导入语法

import 变量名 from '模块名或路径'

变量名的值接收的就是目标模块导出的对象

3、代码实现：

utils.js：导出

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"默认"导出
 */
const baseURL = 'http://hmajax.itheima.net'
const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)
 
// 默认导出
export default {
  url: baseURL,
  arraySum: getArraySum
}

index.js：导入

/**
 * 目标：基于 ECMAScript 标准语法，"默认"导入，工具属性和方法使用
 */
// 默认导入
import obj from './utils.js'
console.log(obj)
const result = obj.arraySum([10, 20, 30])
console.log(result) //60

二、命名导出和导入

1、命名导出语法：

export 修饰定义语句

2、命名导入语法：

import { 同名变量 } from '模块名或路径'

注意：同名变量指的是模块内导出的变量名

3、代码示例：

utils.js 导出

/**
 * 目标：基于 ECMAScript 标准语法，封装属性和方法并"命名"导出
 */
export const baseURL = 'http://hmajax.itheima.net'
export const getArraySum = arr => arr.reduce((sum, item) => sum += item, 0)

index.js 导入

/**
 * 目标：基于 ECMAScript 标准语法，"命名"导入，工具属性和方法使用
 */
// 命名导入
import {baseURL, getArraySum} from './utils.js'
console.log(obj)
console.log(baseURL)
console.log(getArraySum)
const result = getArraySum([10, 21, 33])
console.log(result)

三、命名与默认导出如何选择：

按需加载，使用命名导出和导入
全部加载，使用默认导出和导入

注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置

{ “type”: "module" }

结束！！！