ES6-module的使用
2022/1/1 23:15:27
本文主要是介绍ES6-module的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
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>
第二种引入方式
这篇关于ES6-module的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-06小米11i印度快充版ROM合集:极致体验,超越期待
- 2024-10-06【ROM下载】小米11i 5G 印度版系统, 疾速跃迁,定义新速度
- 2024-10-06【ROM下载】小米 11 青春活力版,青春无极限,活力全开
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求