模块Module

前言

不知道有没有小伙伴和我一样，对于在vue中使用import去导入文件有些时候会有点迷茫，因为，有的导入要带一个花括号“{}”，有的又不用。后面我就又去看了JS关于模块的这一部分。下面就是我重新学习了解到的东西了。

介绍

模块简单来说就是文件。

模块之间是可以相互加载的，使用指令export和import可以交换功能。

export 关键字可以从当前模块导出变量、函数、类等。

import 关键字允许从其他模块导入功能。

例如，sayHi文件中导出了一个函数，

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}

main文件导入并使用了该函数

// 📁 main.js
import { sayHi } from './sayHi.js';
​
alert(sayHi); // function...
sayHi('John'); // Hello, John!

我们可以看到这里的导入是需要用花括号的，接下来就要讲的就是不用花括号的情况了。

默认导出

通常我们在导出的时候需要带花括号，但是如果我们使用的是默认导出，在引用的时候就不需要用花括号了。

引入默认导出的情况：

import User from './user.js'; // 有效
import MyUser from './user.js'; // 也有效

从上面的例子中，我们可以看到默认导出在引入的时候的名字是可以自己随意命名的。

要注意的是，每个文件最多只能有一个默认的导出。

当然，我们也可以对默认的导出进行一个命名。

// 就像我们在函数之前添加了 "export default" 一样
export {sayHi as default};
​
import {default as User, sayHi} from './user.js';

那我们需要使用命名的导出还是使用默认的导出？

命名的导出是明确的，需要我们写下正确的名字才能使用。可以从名字上获得其的一些功能信息。但是对于默认的导出，我们在导入的时候总是需要去命名，也就是说，一个团队的成员面对相同的默认导出可能使用的是不一样的命名。这就会产生一些代码的不一致。

as修改名字

我们可以将导出与声明分开，下面是一个例子：

// 📁 say.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
​
function sayBye(user) {
  alert(`Bye, ${user}!`);
}
​
export {sayHi, sayBye}; // 导出变量列表

导入和导出都存在as 语法，也就是说我们可以改变导出的名字

export {sayHi as hi, sayBye as bye};
​
import {sayHi as hi, sayBye as bye} from './say.js';

重新导出

当我们在写一个巨大的有很多的功能的包的时候，我们想要导入者只通过主文件就可以使用其他的所有功能，而不是让导入者可以看到我们包的所有文件，并且可以访问。所以此时就需要使用到重新导出。

在主文件中导入，然后在主文件重新导出

// 📁 auth/index.js
​
// 导入 login/logout 然后立即导出它们
import {login, logout} from './helpers.js';
export {login, logout};
​
// 将默认导出导入为 User，然后导出它
import User from './user.js';
export {User};
...

重新导出默认导出的处理：

// 将默认导出重新导出为 User
export {default as User} from './user.js';

我们可以通过*重新导出所有的导出，但是要注意的是，这并不包括默认导出。

export * from './user.js'; // 重新导出命名的导出

动态导入，import()表达式

上面说的导入和导出都是静态的。

静态的导出不能声明import的如何参数，模块路径必须是原始类型字符串，不能是函数调用，另外我们也不能根据条件在运行的时候导入。

此时就需要有一个动态导入，使用import表达式。

async function load() {
    let say = await import('./say.js');
    say.hi(); // Hello!
    say.bye(); // Bye!
    say.default(); // Module loaded (export default)!
}

要注意的是，动态导入只在块级作用域内有效，如果超出了这个块级作用域，动态导入的函数、对象什么的就都失去了作用。