ES6模块开发：导出与导入实例

export 与 import 模块导入导出各种类型的变量，如字符串，数值，函数，类。

• 导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
• 不仅能导出声明还能导出引用（例如函数）。
• export 命令可以出现在模块的任何位置，但必需处于模块顶层。
• import 命令会提升到整个模块的头部，首先执行。
  

1. /**
   
2. * index.js
   
3. * @author 恪晨
   
4. * @since 2023/8/17
   
5. */
   
6. // 方式1
   
7. // const hello = function(key){
   
8. //     console.log('Hello World!');
   
9. // };
   
10. // exports.hello = hello;
    
11. //
    
12. 
    
13. // 方式2
    
14. class WangTest {
    
15. static print() {
    
16.         console.log(11);
    
17. }
    
18. }
    
19. export default WangTest;
    
20. 
    
21. 
    
22. // 方式3
    
23. // const test1 = function () {
    
24. //     return 'test1';
    
25. // }
    
26. //
    
27. // const test2 = function () {
    
28. //     console.log('test2');
    
29. // }
    
30. //
    
31. // module.exports = {
    
32. //     test1,
    
33. //     test2
    
34. // }

复制代码

1. /*-----export [test.js]-----*/
   
2. let myName = "Tom";
   
3. let myAge = 20;
   
4. let myfn = function(){
   
5.     return "My name is" + myName + "! I'm '" + myAge + "years old."
   
6. }
   
7. let myClass =  class myClass {
   
8.     static a = "yeah!";
   
9. }
   
10. export { myName, myAge, myfn, myClass }
    
11. 
    
12. /*-----import [xxx.js]-----*/
    
13. import { myName, myAge, myfn, myClass } from "./test.js";
    
14. console.log(myfn());// My name is Tom! I'm 20 years old.
    
15. console.log(myAge);// 20
    
16. console.log(myName);// Tom
    
17. console.log(myClass.a );// yeah!

复制代码

as 的用法

• export 命令导出的接口名称，须和模块内部的变量有一一对应关系。
• 导入的变量名，须和导出的接口名称相同，即顺序可以不一致。
  

1. /*-----export [test.js]-----*/
   
2. let myName = "Tom";
   
3. export { myName as exportName }
   
4. 
   
5. /*-----import [xxx.js]-----*/
   
6. import { exportName } from "./test.js";
   
7. console.log(exportName);// Tom
   
8. 使用 as 重新定义导出的接口名称，隐藏模块内部的变量
   
9. /*-----export [test1.js]-----*/
   
10. let myName = "Tom";
    
11. export { myName }
    
12. /*-----export [test2.js]-----*/
    
13. let myName = "Jerry";
    
14. export { myName }
    
15. /*-----import [xxx.js]-----*/
    
16. import { myName as name1 } from "./test1.js";
    
17. import { myName as name2 } from "./test2.js";
    
18. console.log(name1);// Tom
    
19. console.log(name2);// Jerry

复制代码

export default 命令

• 在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
• export default 中的 default 是对应的导出接口变量。
• 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
• export default 向外暴露的成员，可以使用任意变量来接收。
  

1. var a = "My name is Tom!";
   
2. export default a; // 仅有一个
   
3. export default var c = "error";
   
4. // error，default 已经是对应的导出变量，不能跟着变量声明语句
   
5. 
   
6. import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收

复制代码