模块化开发思想
- 本质为了解决 JS 文件之间相互引用， 用来开发大型的 web 应用
- 将项目的各个功能，封装成很多个JS组件 ，开发时，分开去研发各个组件，
- 最后利用 es6 提供的模块系统 将各个组件导入到一个指定的 主JS 组件中。
- 模块化开发依托于两个关键字：
export{ } 导出
import {解构} from '路径' 导入
1. 导出 export
- 一个文件只能有一个 export default
- 在这里可以将这个文件里面的所有方法一起导出
// 1. 导出普通变量
export let a = 12; // 写法一
let a1 = 1;
export { // 写法二
a1 as a2, // 别名导出(命名冲突)
}
// 2. 导出方法
export let fn1 = () => { // 写法一
console.log('这是方法一');
}
let fna1 = () => {
console.log('这是方法一');
}
export { // 写法二
fn1,
}
// 3. 导出一个类
export class Man{ // 写法一
name = '男人';
}
class Woman{ // 写法二
name = '女人';
}
export {
Woman,
}
// 写法三
export default {
// 一个文件只能有一个 export default
// 在这里可以将这个文件里面的所有方法一起导出
Woman,
Man,
a,
a1,
// 由于这个文件 是将一个文件整体导出 所以导入时也不一样。不能使用 解构 来接。
// import 变量 from '路径'。
}
2. 导入 import
// import 变量 from '路径'。 使用 export default 导出时使用。
import {
a as a1, // 更改名字(命名冲突)
Man,
} from "./7. export";
