es6的模块功能主要由两个命令构成：export和import。
export用于规定模块的对外接口，import用于输入其它模块提供的功能。
自定义模块：
//modules目录下的index.js文件
export const name = 'tom';
export const age = '18';
export function getName() {
return `my name is ${name}`;
}
注意： 抛出函数的时候不能先定义函数之后再抛出函数名。
错误写法：
function getName() {
return `my name is ${name}`;
}
export getName();
正确写法：
export const name = 'tom';
export const age = '18';
export function getName() {
return `my name is ${name}`;
}
//或者
const name = 'tom';
const age = '18';
function getName() {
return `my name is ${name}`;
}
export {name, age, getName};
引用自定义模块：
注意： 引用模块时，script标签上一定要加上type="module"。
<script type="module">
import {name, age, getName} from './modules/index.js';
console.log(name);//tom
console.log(age);//18
console.log(getName());//my name is tom
</script>
export default
一个模块中可以有多个export，但是export default只能有一个。使用
export default导出，在引入时可以随便命名，但是它也必须单独写在导入时的{}
之外，且只能写在{}前面。
const name = 'tom';
const age = '18';
function getName() {
return `my name is ${name}`;
}
export {name, age, getName};
const obj = {
fun: 'fun'
};
export default obj;
<script type="module">
//export default obj;给它命名为a
import a, {name, age, getName} from './modules/index.js';
console.log(name);
console.log(age);
console.log(getName());
console.log(a);//{fun: "fun"}
</script>
有时候我们希望一次引入模块中的所有
<script type="module">
import * as module1 from './modules/index.js';
console.log(module1);//Module {Symbol(Symbol.toStringTag): "Module"}
console.log(module1.name);//tom
console.log(module1.age);//18
console.log(module1.getName());//my name is tom
console.log(module1.default);//{fun: "fun"}
</script>
导入类
class Person {
constructor() {
}
getName() {
return 'tom';
}
}
export default Person;
<script type="module">
import Person from './modules/index.js';
console.log(Person);/*class Person {
constructor() {
}
getName() {
return 'tom';
}
}*/
let p = new Person();
console.log(p.getName());//tom
</script>
