导出(export)和导入(import)模块
模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。可以理解为每个模块都有自己的空间,即javaWeb中的域,如Request域或者Session域。export相当于往域中存数据,import相当于向域中取数据。还有每一个模块只加载一次是单例, 若再去加载同目录下同文件,直接从自己空间域中去读取。export和import都是相对于.js文件。
基本用法
1,export:新建一个export.js,定义数据
let myName = "wachs";
let myfn = function(){
return "哈哈哈哈,输出放在export中的数据!!!";
}
export { myName,myfn }
2,import:在importDemo.html中使用export.js中的数据。
<body>
<div id="app">
</div>
<script type="module">
import { myName, myfn } from "./js/export.js";
console.log(myfn());// 哈哈哈哈,输出放在export中的数据!!!
console.log(myName);// wachs
</script>
</body>
3,错误记录
错误1:
需要到<script>标签中加属性type="module",变为:<script type="module">
错误2:
import { myName, myAge, myfn, myClass } from "js/export.js"路径错误,路径必须以"/", "./", or "../".开头
as+别名
导入要和导出的as后面的名一一对应。
let myName = "wachs";
let myfn = function(){
return "哈哈哈哈,输出放在export中的数据!!!";
}
export { myName as myUserName,myfn as myfunction }
<body>
<div id="app">
</div>
<script type="module">
// import { myName, myfn } from "./js/export.js";
import { myUserName, myfunction } from "./js/export.js";
console.log(myfunction());
console.log(myUserName);
</script>
</body>
export default 命令
1,在一个文件或模块中,export、import 可以有多个,export default 仅有一个。export 方式导出,在导入时要加{ },export default 可以省略{ }。
2,使用方式:
export default + 对应的导出接口变量
如:export default {name:"App"},export default new VueRouter{},等...
3,例:
let myfunction = function(){
return "哈哈哈哈,输出放在export中的数据!!!";
}
//export default myfn as myfunction //export default方式不能使用as+别名
export default myfunction//export default + 变量
使用:
<body>
<script type="module">
import myfunction from "./js/export.js";//import b from "./xxx.js"; // 不需要加{}, 使用任意变量接收
//import {myfunction } from "./js/export.js";
console.log(myfunction());// 哈哈哈哈,输出放在export中的数据!!!
</script>
</body>
出现错误:
解决:把 import {myfunction } from "./js/export.js";中的{ }去掉,不需要加{ },可以使用任意变量接收数据。