模块化常用导入导出方式

1. export导出方式

// util.js
export const A = 1;
export const B = 2;
export function fn() {
    console.log("fn");
}

//等价于 ====>
// util.js
const A = 1;
const B = 2;
function fn() {
    console.log("fn");
}
export {A, B, fn}

// 提倡使用第二种，模块的接口内容、结构一目了然

• 整体导入

import * as util from "./util"
// 整体导入并赋值给 util 变量
// util = {A:1, B:2, fn:...}

• 按需导入

import {A, B as b} from "./util"
// A = 1   

// 引入B并改名为b 
// b = 2

---

2. export default 导出

本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。

// modules.js
function add(x, y) {
 return x * y;
}
export {add as default};
// 等同于
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';

// util.js
export const A = 1;
export const B = 2;
export default function fn() {
    console.log("fn");
}

• 导入默认值

import fn from "../util"
// fn = function () { console.log("fn"); }

• 按需导入

import fn, { A } from "../util"
// fn = function () { console.log("fn"); }
// A = 1

• 整体导入

import * as util from "../util"
// util = { A: 1, B: 2, default: function(){...} }