es 模块的基础知识，深度了解

Posted 2021-01-16 yayaxuping

// 一模块的基础知识

/**

* export :用于模块输出的出口

* import :文件引入的入口

*/

// 1,第一种方式使用export方式输出

var a = ‘a‘;

var b = ‘v‘;

export { a, b };

// 2，使用export作为默认值输出

export {

a as streamV1,

b as streamV2

};

// 3,export 可以处于任何位置，只要顶端就可以, 不能处于块级作用域

/**

* import 文件模块加载

*/

// 1,直接模块加载

import { a, b } from ‘./ass‘;

// 2,直接模块输出

import * as cricle from ‘./ass‘

cricle.a // a

/**

* export default 默认输出的命令，import模块加载，不需要{}模块加载

*

*/

// 1、匿名函数直接使用, import可以直接 模块加载，直接输出名字

export default function () {

console.log(‘foo‘);

}

import customName from ‘./export-default‘;

// 2,直接输出函数

function add(x, y) {

return x * y;

}

export { add as default }

// 直接相当

export default add;

import { default as foo } from ‘./add‘;

import foo from ‘./modules‘

/**

* export 与 import 的复合写法

*/

export { foo, bar } from ‘./my_module‘;

// 可以简单理解为

import { foo, bar } from ‘./my_module‘;

export { foo, bar };

// 二、导出列表

export { detectCats, Kittydar };

// no `export` keyword required here

function detectCats(canvas, options) { ... }

class Kittydar { ... }

// 三、重命名导出和导入

import { flip as flipOmelet } from "eggs.js";

import { flip as flipHouse } from "real-estate.js"

function v1() { ... }

function v2() { ... }

export {

v1 as streamV1,

v2 as streamV2,

v2 as streamLatestVersion

};

// 四、默认的导入、导出

import colors from "colors/safe";

export default {

field1: value1,

field2: value2

};

// 模块对象,像命名空间

import * as cows from "cows";

// 聚合模块，它不会在当前作用域中绑定将要导出的变量

export { Tea, Cinnamon } from "sri-lanka";

/**

* 深入理解 ES6 模块机制 https://zhuanlan.zhihu.com/p/33843378?group_id=947910338939686912

*/