JavaScript之模块相关知识初了解

1.什么是模块？

模块就是一个js代码块
封装成模块的js文件，内部成员对外不可见，除非导出来
模块解决了js的模块开发与代码封装问题

2.模块有什么优势？

1.可维护性：每个模块都是独立的，各写各的互不影响，出错直接定位出错处。
可复用性：只需要一条`import`指令就可以导入
避免污染全局空间：模块处于自己的命名空间

模块是一个js文件，显然不能像之前一样，将js写入html中
模块要到一个独立的js文件中，并使用一些特别的语法和关键字

3.书写方式

变量、函数、类都可以导出、导入
3.1 单个导出
export let name="Jy";
3.2 多个导出-建议使用
let name="Jy";
let name2="Jy2";
let name3="Jy3";
let name4="Jy4";
export {name,name2 as myName,name3};
3.3 默认成员导出（默认导出成员也不要写大括号）
```export default name4;
### 3.4 导出默认成员和普通成员
```export {name,name4 as default};
console.log(name4);//Jy4
3.5 单个导入
需要写到标签<script type="module"></script>中
import {name} from './module.js';
console.log(name);//Jy
3.6 多个导入
```import {name,myName,name3 as myName2} from ‘./module.js’;
console.log(myName);//Jy2
### 3.7 默认成员导入(最大的区别是不用写大括号)
import name4 from ‘./module.js’;
console.log(name4);//Jy4
```
3.8 导入既有默认成员也有普通成员
import name4 ,{name} from './module.js';

4. 注模块使用时意事项

使用外部模块时禁止重复声明模块成员
模块成员不允许更新
一个模块中只允许有一个默认成员

5. 模块的命名空间

命名空间：是一个容器，内部可以包括任何类型的数据
命名空间是一个对象，可以挂载到当前全局中

将3.6中的多个导入使用命名空间，这样就可以使用相同的变量名了。
import * as space2 from './module.js';
let name="1";
console.log(name,space2.name);//1,Jy

1.什么是模块？

2.模块有什么优势？

3.书写方式

3.1 单个导出

3.2 多个导出-建议使用

3.3 默认成员导出（默认导出成员也不要写大括号）

3.5 单个导入

3.6 多个导入

3.8 导入既有默认成员也有普通成员

4. 注模块使用时意事项

5. 模块的命名空间

更多相关文章

随机推荐