当前位置: 首页 > news >正文

export和import的用法总结

ES6中export一般的用法有两种

  1. 命名导出(Named exports)
  2. 默认导出(Default exports)

命名导出(Named exports)

就是每一个需要输出的数据类型都要有一个name,统一输入一定要带有{},即便只有一个需要输出的数据类型。这种写法清爽直观,是推荐的写法。

//------ lib.js ------
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function diag(x, y) {
    return sqrt(square(x) + square(y));
}

export {sqrt, square, diag}

//------ main.js ------
import { square, diag } from 'lib';                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

把export直接加到声明前面就可以省略{}

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

//------ main.js ------
import { square, diag } from 'lib';                
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5

无论怎样输出,输入的时候都需要{}

别名导入(Aliasing named imports)

当从不同模块输入的变量名相同的时候

import {speak} from './cow.js'
import {speak} from './goat.js'    

这些写法显然会造成混乱

正确的方法是这样的

import {speak as cowSpeak} from './cow.js'
import {speak as goatSpeak} from './goat.js'

可是,当从每个模块需要输入的方法很多的时候,这种写法就显得十分的繁琐、冗长,例如

import {
  speak as cowSpeak,
  eat as cowEat,
  drink as cowDrink
} from './cow.js'

import {
  speak as goatSpeak,
  eat as goatEat,
  drink as goatDrink
} from './goat.js'

cowSpeak() // moo
cowEat() // cow eats
goatSpeak() // baa
goatDrink() // goat drinks

解决方案就是命名空间导入了

命名空间导入(Namespace imports)
import * as cow from './cow.js'
import * as goat from './goat.js'

cow.speak() // moo
goat.speak() // baa

十分的简洁优雅

默认导出(Default exports)

默认输出就不需要name了,但是一个js文件中只能有一个export default。

//------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

其实这种导出方式可以看成是命名导出的变种,只不过把命名写成了default。

虽然export default只能有一个,但也可以输出多个方法。

export default {
  speak () {
    return 'moo'
  },
  eat () {
    return 'cow eats'
  },
  drink () {
    return 'cow drinks'
  }
}

输入与命名空间输入类似

import cow from './default-cow.js'
import goat from './default-goat.js'

cow.speak() // moo
goat.speak() // baa

如果我们在编写模块的时候使用的输出方法不统一,那么引入的时候就需要考虑不同模块输入的方式。这种麻烦可以通过自引用的方法消除。方法如下

编写两种输入方式通用的模块

import * as myself from './ambidextrous-cow.js' // import this file into itself

// this module's own namespace is its default export
export default myself

export function speak () {
  console.log('moo')
}

这样在输入的时候就不需要考虑输入方式了。

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow.speak() // moo
alsocow.speak() // moo

两种输入方法均可。

这种方法也有一个小缺点,就是在我们编写的模块中,有一个function是常用的,我们想默认输出,可export default已经使用了,而我们知道export default在一个模块中只能使用一次。这时就要使用Object.assign

import * as myself from './ambidextrous-cow.js' 

export default Object.assign(speak, myself) 

export function speak () {
  console.log('moo')
}

需要注意的是,Object.assign只能用于function。

对应输入的例子

import cow from './ambidextrous-cow'
import * as alsocow from './ambidextrous-cow'

cow() // moo
cow.speak() // moo
alsocow.speak() // moo

参考文章

1.[es6] import, export, default cheatsheet

2.详解JavaScript ES6中export import与export default的用法和区别

3.ES Modules: Using named exports as the default export

4.export in MDN

我在github
https://github.com/zhuanyongx...

相关文章:

  • Picasso源码阅读笔记九
  • 《Python编程快速上手》第8.9.2实践练习
  • Intel发布P4500、P4600 NVMe SSD:规格释疑
  • Gradle:Gradle入门
  • 超简便安装mysql
  • 个人开发—进度记录(十)
  • 【技巧】从键盘读入一串字符并输出
  • [转] Webpack 打包优化之体积篇
  • Java并发编程实战系列16之Java内存模型(JMM)
  • [20180224]expdp query 写法问题.txt
  • Android SDK Manager 和 AVD Manager使用
  • Ubuntu 开机挂载分区
  • SQL自动审核工具archer
  • django生产环节部署
  • 设计模式 代理模式(Proxy)
  • 230. Kth Smallest Element in a BST
  • Akka系列(七):Actor持久化之Akka persistence
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • cookie和session
  • Docker: 容器互访的三种方式
  • Elasticsearch 参考指南(升级前重新索引)
  • electron原来这么简单----打包你的react、VUE桌面应用程序
  • Java 23种设计模式 之单例模式 7种实现方式
  • Spring Boot MyBatis配置多种数据库
  • Three.js 再探 - 写一个跳一跳极简版游戏
  • 力扣(LeetCode)22
  • 前嗅ForeSpider中数据浏览界面介绍
  • 使用SAX解析XML
  • 一个JAVA程序员成长之路分享
  • 正则表达式小结
  • 正则学习笔记
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • 正则表达式-基础知识Review
  • "无招胜有招"nbsp;史上最全的互…
  • # 数据结构
  • #include
  • #QT(串口助手-界面)
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (论文阅读23/100)Hierarchical Convolutional Features for Visual Tracking
  • (每日持续更新)jdk api之FileFilter基础、应用、实战
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (算法)N皇后问题
  • (转)jQuery 基础
  • .dwp和.webpart的区别
  • .NET Compact Framework 多线程环境下的UI异步刷新
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .net MySql
  • .NET实现之(自动更新)
  • .NET中统一的存储过程调用方法(收藏)
  • @DateTimeFormat 和 @JsonFormat 注解详解
  • @GlobalLock注解作用与原理解析