vue知识点之export和import

export和import是ES6提出的模块化规范。这篇文章主要就是详细介绍export和import的用法。

export

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出。

1. 输入变量用法

⏰ 方法1

export let a = 'zhangsan';

⏰ 方法2

let a = 'zhangsan';
export {a};

⏰ 多个变量的输出

let a = 'zhangsan';
let b = 'lisi';
let c = 'wangwu';
export {a, b, c};

🔊 小结： 如果先定义变量，再使用export输出变量时，一定是export {变量}；

2. 函数或类的用法

⏰ 方法1

export function multiply(x, y) {
    return x * y;
};

⏰ 方法2

function multiply(x, y) {
    return x * y;
}
export {multiply};

⏰ 批量输出

function multiply(x, y) {
    return x * y;
}
function add(x, y) {
    return x + y;
}
export {multiply, add};

🔊小结：如果先定义函数或类，再使用export输出函数或类时，一定是export {函数名或类名}；

3.export default（默认导出）

之前的例子里，除了整体加载外，都需要知道定义的变量或函数名，如果用户只想用输出的内容，就可以使用export default；

⏰ 1. 用法

export default function () {
    console.log('nihao');
}

import test from './util';
test(); 

🔊 小结：使用export default 时，import语句不用大括号，且只能导出一个变量/函数/对象。

import

export定义了模块的对外接口，其他JS文件就可以通过import来加载这个模块。

1. 用法

import {a, add} from './utils';

🔊 小结：import导入export输出的变量或函数/类必须要使用大括号包裹，且导入的变量名必须与export中的一致。

2. module的整体加载

除了指定加载某个输出值，还可以用（*）指定一个对象，所有的变量都会加载在这个对象上。

export function multiply(x, y) {
    return x * y;
}
export function add(x, y) {
    return x + y;
}

import * as calculate from './util';
calculate.multiply(4, 7);
calculate.add(4, 7);

🔊小结：使用整体加载的方式，import时不需要使用大括号，直接用*代表整体。

别名

在export或者import语句中可以使用as给变量、函数或者类设置别名。

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};
import * as circle from './circle';

import（）函数

import和export 命令只能用在模块的顶层，不能放在代码块中。否则会报错。这样的设计。可以提高编译器效率，但是没有办法实现运行时加载。
因为require是运行加载，所以import命令没有办法代替require的动态加载功能。因此引入了import()函数。完成动态加载。

1. 语法

import(specifier);  // specifier用来指定所要加载的模块的位置

2. 用途

⏰ 按需加载

button.addEventListener('click', event => {
    import('./dialogBox.js')
    .then(dialogBox => {
        dialogBox.open();
    })
    .catch(error => {
        
    })
})

⏰ 条件加载

// import（）可以放在if...else语句里，实现条件加载
if (condition) {
    import('moduleA').then(...);
} else {
    import('moduleB').then(...);
}