javascript中的import export

参考资料

javascript中的import作用类似于java中的import，我需要使用另一个文件中的方法、变量就需要import这个文件。但与java中import区别在于，你只能使用所引入文件中export出去的方法、变量等。

1）基本使用

先创建一个js文件test.js

export function get(a) {
          
   
    return a;
}

然后创建另一个js文件test2.js

import {
          
   get} from ./test.js
console.log(get(test2));

在页面中引入

<script src="/js/test2.js" type="module"></script>

可以在console里看到输出了test2

2）export default

通常使用import时需要用{}将需要引入的变量和方法括起来，并且我需要知道这些方法名和变量名。

export default function d() {
          
   
    return default;
}

我们可以通过这种方法引入test.js中export default输出的方法、变量

import defaultName from ./test.js
console.log(defaultName ());

export default就是以匿名的方式输出一个默认值，import模块在不用{}指定引入的变量名时，会引入这个默认值，其中defaultName 是自己起的一定要有的别名。

3）import *

import * 可以把所有export（除export default）输出的方法、变量都引入进来

import * as casualName from ./test.js

default是匿名的，所以没法用名字引用。需要同时引入default可以这样写

import defaultName, * as casualName from ./test.js

4）import export同时使用

创建test.js

var i = 0;
export function geti() {
          
   
    return i++;
}

创建test2.js

import {
          
   geti} from ./test.js
export {
          
   geti};
console.log(geti());

创建test3.js

import {
          
   geti} from ./test2.js
console.log(geti());

输出为 这样可以将test中的geti方法由test2传递给test3使用，test3没有直接引用test。

5）export from

将上面的test2改为

export {
          
   geti} from ./test.js
console.log(geti());

结果报错了：Uncaught ReferenceError: geti is not defined 这条语句只能把test中geti传给test3使用，自己不能使用。

还可以给传递的方法改名

export {
          
   geti as geta} from ./test.js

import {
          
   geta} from ./test2.js
console.log(geta());

还可以将geti转为default默认值

export {
          
   geti as default} from ./test.js

import geti from ./test2.js
console.log(geti());

还可以传递所有方法

export * from ./test.js

import * as defaultName from ./test2.js
console.log(defaultName.geti());

6）重复import同一模块

创建test.js

var i = 0;
export function geti() {
          
   
    return i++;
}
console.log("test");

分别创建test2.js，test3.js内容相同

import {
          
   geti} from ./test.js
console.log(geti());

页面中引入

<script src="/js/test2.js" type="module"></script>
<script src="/js/test3.js" type="module"></script>

输出为 可以看到test.js只执行了一遍，并且是按顺序第一次import时执行的。