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" }

结束!!!

本专栏后续会持续分享node.js与前端工程化的相关技能,从基础到高级,欢迎大家订阅!

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值