ES6模块化的导入导出,export和import

写在前面

在js的历史上一直没有模块(module)体系,无法将一个大程序拆分成相互依赖的小文件,再用简单的方法拼装起来,这对开发大型的、复杂的项目形成了巨大障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,

而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

使用

用一个简单的案例介绍一下模块化
在这里插入图片描述创建一个简单的html项目。在js文件夹下创建一个js文件。

let name="lly"
let age=21
let school="QUST"
function a(){
	console.log("我将用export default来导出函数a")
}
export {name,age,school}
export default a

在index.html引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="module">
			import {name,age,school} from "./js/module1.js"
			import fun1 from "./js/module1.js"
			console.log("我的名字是"+name)
			fun1();
		</script>
	</body>
</html>

export可以理解为抛出变量。我们在.js文件中定义的变量怎么让其能够被引用呢。那就是要在js文件的最后把我们需要给外面的变量用export命令抛出

模块功能主要有两个命令构成:export 和 import。 export 命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一个js文件就是一个模块,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部某个变量,就必须使用export关键字输出该变量。

注意:export 命令规定的是对外接口,接口名与模块内部变量之间,必须与模块的变量建立一一对应关系。(有种键值对的意思),简单来说导出的变量他必须有一个值。export 语句不能放在代码块内,如函数内,否则会报错。因为此做法使其无法做到静态化,违背了 ES6 模块的设计理念。
在这里插入图片描述

import命令

重命名

import {name as name1} from 'xxx.js'
console.log(name)//空
console.log(name1)//成功使用模块的变量

①import 导入的值都是只读的,不允许修改输入的接口。

②可以修改导入的对象 ,可以修改导入对象的属性,但不推荐这样做,建议把导入的变量(不管是普通变量还是对象)都当做只读的。

③import…from 中 from 后面的路径可以是绝路径也可以是相对路径。

④js模块导入时可以省略后面 的 .js后缀。

⑤import 命令具有提升效果,它会把import命令提升到模块的头部,首先执行。

⑥执行同一个import命令多次,默认只会执行一次,不会执行多次

⑦从同一个模块通过多条import加载不同变量,但它们对应的是同一个模块实例。import语句是 单例模式(Singleton)

⑧不推荐 import 和 require 在同一个模块使用,因为他们的执行时期不一样,导致的结果可能就不一样。目前在模块中使用 require 还需要 Babel 转换比较麻烦。

⑨整体加载模块(常用)
module2
在这里插入图片描述

import * as all from "./js/module2.js"
log(all)

在这里插入图片描述
symbol是ES6新增的数据类型,这里不加介绍。可以理解唯一的一个大对象使用方法和对象差不多
all.content就可以拿到内容了。

export 和export default

export 输出的变量或函数都有自己的名字,我们也可以重命名:

function test(){...}
function test2(){....}
function test3(){...}

export {test as fun1,test2 as fun2,test3 as fun3}

而使用 export default 导出的值,import导入可以为这个导出值自定义名称。
就不用先重命名了

function a(){
return "一斤代码"
}
export defalut a
import fun2 from "xx.js"
log(fun2())//一斤代码

①export default 只能使用一次,export可以使用多次

②后面不能跟变量声明语句

参考博客

https://www.cnblogs.com/zjl-712/p/11432787.html

猜你喜欢

转载自blog.csdn.net/qq_42285889/article/details/107920553
今日推荐