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

// 一模块的基础知识
/**
* 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
*/

猜你喜欢

转载自www.cnblogs.com/yayaxuping/p/9879193.html