【学习打卡】第4天 前端工程师2022版 module第一讲

课程名称：前端工程师2022版

课程章节： module

主讲老师：elex

课程内容：

今天学习的内容包括：

module是什么？导入导出的方式？

课程收获：

module：模块

1、导入导出//导出的2种方式
// export default
// export

///变量
const age=19;
export default age;

const name='jennie';
// export {name}
//函数
function func() {
console.log('today')
}

// export {func}

//类
class Person{}
// export {Person}

//同时导出
export {Person as p,func,name}<script type="module">  //一定要加module
// 1.基本用法
// export 声明或语句
// 一个模块没有导出，也可以将其导入
// 被导入的代码都会执行一遍，也仅会执行一遍
import './base.js'  //只执行一遍
//   console.log(age);  ❌ 不能直接访问module中的变量

// 2.基本用法
// 可以随便起名,但是最好是顾名思义
// 一个模块只能有一个 export default
// 不能随意命名

//   import age from './base.js';   //必须对应export default
//   console.log(age); 
//   import {name} from './base.js';   //export const name='jennie';
//   console.log(name); 

//导入函数
//   import {func} from './base.js'
//   console.log(func);

//导入类
//     import {p} from './base.js'
//   console.log(p);

// 2.多个导出
//   import {p,func as fn,name} from './base.js'
//   console.log( p,fn,name);

// 4.整体导入
// 会导入所有输出，包括通过 export default 导出的
import * as obj from './base.js'

console.log(obj);  //输出module对象 

// 5.同时导入
//   import {p,func as fn,name} from './base.js'
console.log( p,fn,name,age)
// 一定是 export default 的在前
import age,{p,func as fn,name} from './base.js'

</script>