ES6模块化的实现
2023-02-18 16:30:18 时间
1.准备工作
<!-- 首先需要在HTML文件中引入两个js文件 类型需要设置为module -->
<script src="index.js" type="module"></script>
<script src="main.js" type="module"></script>
2.export使用
//main.js
//定义一些变量和函数
var name = '张三'
var age = 20
var flag = true
function sum(num1, num2){
return num1 + num2
}
//导出方式一
export {
flag, sum
}
//导出方式二
export var num1 = 1;
export var heigt = '1.88';
//导出函数/类
export function mul(num1, num2) {
return num1 * num2
}
export class Person {
run() {
console.log('跑')
}
}
//某些情况下,一个模块中包含某个功能,我们并不希望给这个功能命名,而是让导入者可以自己命名
//export default在同一个模块中,不允许同时存在多个
const address = '北京'
export default address
3.import使用
//index.js
//使用export指令导出模块对外接口,就可以通过import命令来加载对应的模块
//导入{}中定义的变量
import {flag, sum} from './main.js';
if(flag) {
console.log(1) //1
console.log(sum(10, 20)) //30
}
//直接导入export定义的变量
import {num1, height} from './main.js';
console.log(num1); //1000
console.log(height); //1.88
//导入export的function/class
import {mul, Person} from './main.js';
console.log(mul(10, 20)); //200
const p = new Person();
p.run(); //跑
//导入 export default中的内容
import addr from './main.js';
console.log(addr); //北京
//全部导入
import * as a from './main.js'
console.log(a.name); //张三
console.log(a.age); //20
相关文章
- 抓 https 加密数据,偷偷摸摸爽得很!
- 小游戏赛道迎来新一轮增长机会,技术升级实现多平台布局
- Photoshop 2021正式版更新,附全系列下载
- Ps | Adobe Photoshop 2023 for Win 24.1 中文激活版下载及安装教程
- 简单易用的监控告警系统 | HertzBeat 在 Rainbond 上的使用分享
- 原来Docker容器中设置时区这么简单
- 小游戏进入增长快车道,行业变现模式分析
- (一)汇编语言——基础知识
- ghost系统后只有C盘了别的盘的文件怎样恢复
- (二)汇编语言——寄存器
- (三)汇编语言——DOSBox
- 分布式是大数据处理的万能药?
- SAP ABAP 报表屏幕输入字段如何实现联动效果试读版
- 如何给 SAP ABAP ALV 报表的修改功能添加自定义校验逻辑试读版
- 参加 Spartacus 开源项目开发时需要注意的一些编程规范
- Salesforce LWC学习(四十) datatable的dynamic action的小坑浅谈
- 内科大软件工程导论复习内容笔记
- Prometheus及Grafana监控服务的安装使用
- SpringBoot:模块探究之spring-boot-cli
- java中的lambda表达式(从小白也能看懂做起)