ES6 模块化
- 准备三个文件
- m1.js、m2.js、m3.js
- m1.js
// 分别暴露
export let school = {
name: '尚硅谷'
}
export let mySchool = '尚硅谷'
export function fn() {
console.log('我可以的！请相信自己！');
}
- m2.js
//统一暴露
let school = '尚硅谷'
function findJob() {
console.log('我们帮助你找工作');
}
export { school, findJob };
- m3.js
//默认暴露--其实就是把后面对象的值给了变量 default默认变量。
export default {
school:'aiguigu',
change: function () {
console.log('我们可以改变你');
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8" />
<Meta http-equiv="X-UA-Compatible" content="IE=edge" />
<Meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ES6 模块化</title>
</head>
<body>
<script type="module">
//1.通用的导入方式 --整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
//如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。
//使用open with live server
//import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。
// import * as m1 from "./m1.js";
// import * as m2 from "./m2.js";
// import * as m3 from "./m3.js";
// console.log(m2);
// console.log(m3);
//2.解构赋值形式
// import {school, mySchool,fn} from "./m1.js"
// console.log(school,mySchool);
// console.log(fn);
// import {school as a, findJob} from './m2.js'
// console.log(a,findJob);
//3.简便形式 针对默认暴露
// import m3 from "./m3.js"
//不能写import default as m3 from "./m3.js"错误
// 相当于import {default as m3} from "./m3.js"
//也不能写 import m2 from "./m2"--指针对默认暴露
console.log(m3);
</script>
</body>
</html>
第二种引入方式
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
