ES模块化的导入和导出

最新推荐文章于 2023-02-13 10:28:53 发布

秋英之空

最新推荐文章于 2023-02-13 10:28:53 发布

阅读量909

点赞数 1

分类专栏：前端面试题 js node

原文链接：http://www.manongjc.com/detail/22-wbaxqeelnmnxvym.html

版权

js 同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端面试题

4 篇文章 0 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

ES模块化的导入和导出

本文章向大家介绍ES模块化的导入和导出，主要包括ES模块化的导入和导出使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

环境准备
模块化
export、import
export default
import 和 require 的区别
参考

环境准备

三个文件 1.html、a.js 和 b.js，并要能使代码在服务器环境下运行（不然后面会报跨域的错误）

1.html

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="./a.js"></script>
    <script src="./b.js"></script>
</body>
</html>

a.js

let flag = false

b.js

console.log(flag)

这是三个特别特别简单的代码，然后我们让他们在服务器上运行，为了方便我就使用 vscode 的 Live Server插件运行代码

运行结果

打开控制台后，会发现输出一行 false

模块化

由此可以看出，在js文件中定义的变量已经污染了全局，随着项目的增大这可能会导致不必要的麻烦

于是我们需要进行如下操作

<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>

当在 script 标签上加上 type="module"就代表这个文件是一个模块，之中定义的属性在全局就访问不到了。

然后我们再看控制台，就会发现如下的错误

这就表明我们在 js 中定义的变量已经不会污染全局了

但是有些时候我们还是需要引用不同 js 文件中的变量的，那么看下面

export、import

export

在ES6中，不同模块的内容是不会共享的，我们必须将需要的内容通过 export 给暴露出去，如下

a.js

// 1.单个导出
export var num1 = 1000
export var height = 1.8

// 2.批量导出
let flag = false
let sum = 100
export {
flag,sum
}

// 3.导出方法
export function add(x, y){ return x + y}

// 4.导出类
export class Person{

constructor(name, age){
this.name = name
this.age = age
}

show(){
console.log(this.name + ’ ’ + this.age + ’ 岁’)
}
}

这里需要注意的是，批量导入并不是我们平时认为的ES6增强写法

export {
	flag,sum
}

如果你认为上面代码等于如下的，那就错了

export {
	flag: flag,
	sum: sum
}

他会报下面的错误，并且连编译器也会认为这个写法不合法

import

1、接下来我们想在 b.js这个文件用到上述所有的变量，这时我们可以使用 import进行导入，于是乎如下

b.js

import values from './a.js'
console.log(values);

在 node.js 中我们常常将 a.js 通过 const values = require('./a.js')将a.js的变量一股脑的全部导入到 values 这个变量中

所以面对 import 我们很自然的就想这么用，但是意外就发生了，如果如上述所写，就会出现下面的错误

说是啥没有提供一个默认导出的变量，这个先放着，后面再讲

2、正确写法如下

b.js

import {num1, height, flag, sum, add, Person} from './a.js'

console.log(num1)
console.log(height)
console.log(flag)
console.log(sum)
console.log(add(1, 3))
console.log(new Person(‘小明’, 20))
new Person(‘小明’, 20).show()

输出结果如下

这里可以发现，我们要想使用 a.js 文件中的某个变量必须要用 {}括起来，这就和之前面批量导出用 export {}的花括号，括住想要导出的变量相对应了

import * as

之前面我们通过 import {} from 将想要导出的变量全部写在花括号里，但是若里面的变量太多，又全部都需要使用，那么这种写法可真要累死人

所幸有个更方便的写法，如下所示，我们可以将 a.js 中的所有文件全部导入到 values 变量中，然后用 values.xx的方式调用

b.js

import * as values from './a.js'

console.log(values.num1)
console.log(values.height)
console.log(values.flag)
console.log(values.sum)
console.log(values.add(1, 3))
console.log(new values.Person(‘小明’, 20))
new values.Person(‘小明’, 20).show()

输出结果也没有任何变化，和上面的一样

export default

1、之前我们首次使用 import，想用导入全部变量时出现了如下错误

import values from './a.js'

2、现在我们就应该能懂的为什么会报错，并且 export default 是什么意思了，我们先在 a.js 加上一行

a.js

export default function mul(x, y){
  return x * y
}

3、然后再在 b.js 文件中引入

b.js

import values from './a.js'

console.log(values(2, 10))

输出结果

所以 export default 的作用就是导出一个默认变量，这个默认变量就是扛把子，之后我们使用 import xx from aa 的时候就会将 aa 中的默认变量赋到 xx 上面，而无需使用 import { xx } from aa 了

注意

1、如果我们按照之前花括号的方式进行导入

import {mul} from './a.js'

console.log(values(2, 10))

会报这样的错误

2、经过测试，有如下三种方法可以导入 export default 默认暴露出的变量

import values from './a.js'
import {default as m} from './a.js'
import * as val from './a.js'

console.log(values(2, 10))
console.log(m(3, 10))
console.log(val.default(4, 10))

输出结果

import 和 require 的区别

最后再来说一下 import 和 require 的区别

出现的时间、地点不同

	年份	出处
require/exports	2009	CommonJS
import/export	2015	ECMAScript2015（ES6）

不同端(客户端/服务器)的使用限制

	require/exports	import/export
Node.js	所有版本	Node 9.0+（启动需加上 flag --experimental-modules） Node 13.2+（直接启动）
Chrome	不支持	61+
Firefox	不支持	60+
Safari	不支持	10.1+
Edge	不支持	16+

原生浏览器不支持 require/exports，可使用支持 CommonJS 模块规范的 Browsersify、webpack 等打包工具，它们会将 require/exports 转换成能在浏览器使用的代码。
import/export 在浏览器中无法直接使用，我们需要在引入模块的 script 元素上添加type="module属性。

require/exports 是运行时动态加载，import/export 是静态编译

秋英之空

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES模块化的导入和导出

ES模块化的导入和导出本文章向大家介绍ES模块化的导入和导出，主要包括ES模块化的导入和导出使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。目录环境准备模块化export、importexportimportimport * asexport defaultimport 和 require 的区别参考环境准备三个...
复制链接

扫一扫

专栏目录