关于前端:ES6-exports的几种用法

ES6模块只反对动态导出,只能够在模块的最外层作用域应用export,不可在条件语句与函数作用域中应用。

Named exports (命名导出)

这种形式次要用于导出多个函数或者变量, 明确晓得导出的变量名称。
应用:只须要在变量或函数后面加 export 关键字即可。
应用场景:比方 utils、tools、common 之类的工具类函数集,或者全站对立变量等。

export 前面不能够是表达式,因为表达式只有值,没有名字。

// lib.js
export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}


// index.js 应用形式1
import { square, diag } from 'lib';
console.log(square(11)); // 121

// index.js 应用形式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

简写格局,对立列出须要输入的变量,例如下面的lib.js能够改写成:

// lib.js
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export { sqrt, square, add };

Default exports (默认导出)

这种形式次要用于导出类文件或一个性能比拟繁多的函数文件;
应用:只须要在变量或函数后面加 export default 关键字即可。

  1. 一个模块最多只能有一个默认导出;
  2. 默认导出能够视为名字是default的模块输入变量;
  3. 默认导出前面能够是表达式,因为它只须要值。

export default 与 export 的次要区别:

  • 不须要晓得导出的具体变量名;
  • 导入【import】时不须要 { } 包裹;

导出一个函数:

// myFunc.js
export default function () { ... };

// index.js
import myFunc from 'myFunc';
myFunc();

导出一个类:

// MyClass.js
class MyClass{
  constructor() {}
}
export default MyClass;

// index.js
import MyClass from 'MyClass';

Mixed exports (混合导出)

混合导出是Named exportsDefault exports组合导出。

混合导出后,默认导入肯定放在命名导入后面;

// lib.js
export const myValue = '';
export const MY_CONST = '';
export function myFunc() {
  ...
}
export function* myGeneratorFunc() {
  ...
}
export default class MyClass {
  ...
}

// index.js 【MyClass 必须在后面】
import MyClass, { myValue, myFunc } from 'lib';

比方 lodash:

// lodash.js
export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}

// index.js
import _, { each } from 'lodash';

Re-exporting (别名导出)

个别状况下,export 导出的变量名是原文件中的变量名,但也能够用 as 关键字来指定别名。这样做是为了简化或者语义化 export 的函数名。
同一个变量容许应用不同名字输入屡次

// lib.js
function getName() {
   ...
};
function setName() {
  ...
};

export {
  getName as get,
  getName as getUserName,
  setName as set
}

Module Redirects (直达模块导出)

为了防止下层模块导入太多的模块,可能应用底层模块作为直达,间接导出另一个模块的内容。

//  myFunc.js
export default function() {...};

// Header.js
export default Header
               
// Footer.js
export default Header

// lib.js
export * from 'myFunc';
export { default as Header } from './Header';
export { default as Footer } from './Footer'
export function each() {...};
 
// index.js
import myFunc, { Header, Footer, each } from 'lib';

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据