1.export可以导出多个变量,函数,变量,函数需要一个一个导出,也可以以对象的方式导出{};
2.import的时候,也需要加{},且变量名,函数名需要和导出的一样。
3.export default 只能导出一个对象,且不加{},导入的时候对象名字可以和导出的名字不同,也不加{}
index.js:
export const sayHello = () => {
console.log("Hello")
}
index.html
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module">
import {sayHello} from "./index.js"
sayHello()
</script>
</body>
</html>
1.首先创建一个父类Father.js,使用export default默认导出。
class Father {
constructor(name, age) {
this.name = name;
this.age = age;
}
work() {
console.log('fater in the hard work');
}
}
export default Father;
2.在html的script中的使用,script默认写js代码,或者使用src引入js文件,默认不能使用module形式,但是script标签上加上type=module属性,就可以写导入模块。
<script type="module">
import Father from './father.js';
let father = new Father('父亲', 28);
father.work();
</script>
3.浏览器打开html页面,F12查看控制台输出:
4.使用export,导出一个Mother类。
export class Mother {
constructor(name,age){
this.name = name;
this.age = age;
}
// see 是原型对象上的属性
see(){
console.log(`mother name is ${this.name}、age ${this.age},mother Looking at the distance`);
}
}
在script中,使用export导出的模块,需要使用大括号{}
import { Mother } from './mother.js';
let mother = new Mother('母亲', 27);
mother.see();
但是使用export default默认导出模块,就不需要,具体两者之间的区别,可以百度查询。