export和import的用法总结

EasonTyler 发布于2019-08-26 11:42 / 1742人阅读

摘要：把直接加到声明前面就可以省略无论怎样输出，输入的时候都需要。其实这种导出方式可以看成是命名导出的变种，只不过把命名写成了。对应输入的例子参考文章详解中与的用法和区别我在

ES6中export一般的用法有两种

命名导出（Named exports）

默认导出（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...

专线服务 idc机房托管写的文件import 对于云计算的总结的用法 cdn的用法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107400.html

javascript中import和export用法总结

摘要：前者用于服务器，后者用于浏览器。某些打包工具可以允许或要求使用扩展名。的形式需要的支持，比如将导出在中的对象或值。如上，也是的内容，和是一对。比如如命名导出引入的命名导出等价为，值得注意的是在该模块中不能直接使用和。 import import 和 require 的区别 import 和js的发展历史息息相关，历史上 js没有模块(module)体系，无法将一个大程序拆分成互相依赖的...

ideaa 2019-08-23 12:00 评论0 收藏0
一篇文章总结redux、react-redux、redux-saga

摘要：编辑器顶层组件不就了吗这就是。官方提供的绑定库。具有高效且灵活的特性。在的中，可以使用或者等来监听某个，当某个触发后，可以使用发起异步操作，操作完成后使用函数触发，同步更新，从而完成整个的更新。不就ok了吗？这就是 react-redux。Redux 官方提供的 React 绑定库。具有高效且灵活的特性。 React Redux 将组件区分为容器组件和 UI 组件前者会处理逻辑...

April 2019-05-21 19:08 评论0 收藏0
前端模块化杂记

摘要：入口模块返回的赋值给总结在剖析了整体的流程之后，可以看到相关的技术细节还是比较清晰的，学无止境引用混合使用详解的语法前端模块化规范前言 CMDAMD简介 Commonjs简介 Module简介 Common和Module的区别 Module与webpack Module与Babel 一些问题总结引用前言前端模块化在近几年层出不穷，有Node的CommonJs,也有属于cl...

GitCafe 2019-08-26 13:29 评论0 收藏0
探索 JS 中的模块化

摘要：的主要思想是异步模块，主逻辑在回调函数中执行，这和浏览器前端所习惯的开发方式不谋而合，应运而生。是目前开发中使用率最高的模块化标准。原文链接: http://yanjiie.me 偶然的一个周末复习了一下 JS 的模块标准，刷新了一下对 JS 模块化的理解。从开始 Coding 以来，总会周期性地突发奇想进行 Code Review。既是对一段时期的代码进行总结，也是对那一段时光的...

SoapEye 2019-08-22 18:21 评论0 收藏0