如何在JavaScript模块中导出函数、对象或原始值

dirac 06-01 172

前言：

此刻咱们对“importjs”都比较关怀，同学们都想要知道一些“importjs”的相关知识。那么小编也在网络上收集了一些对于“importjs””的相关内容，希望兄弟们能喜欢，小伙伴们快快来了解一下吧！

在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

无论您是否声明，导出的模块都处于严格模式。 export 语句不能用在嵌入式脚本中。

语法

存在两种 exports 导出方式：

命名导出（每个模块包含任意数量）默认导出（每个模块包含一个）

// 导出单个特性export let name1, name2, …, nameN; // also var, constexport let name1 = …, name2 = …, …, nameN; // also var, constexport function FunctionName(){...}export class ClassName {...}// 导出列表export { name1, name2, …, nameN };// 重命名导出export { variable1 as name1, variable2 as name2, …, nameN };// 解构导出并重命名export const { name1, name2: bar } = o;// 默认导出export default expression;export default function (…) { … } // also class, function*export default function name1(…) { … } // also class, function*export { name1 as default, … };// 导出模块合集export * from …; // does not set the default exportexport * as name1 from …; // Draft ECMAScript® 2O21export { name1, name2, …, nameN } from …;export { import1 as name1, import2 as name2, …, nameN } from …;export { default } from …;

nameN：要导出的标识符（以便其他脚本通过 import 语句进行导入）.

描述

有两种不同的导出方式，命名导出和默认导出。你能够在每一个模块中定义多个命名导出，但是只允许有一个默认导出。每种方式对应于上述的一种语法：

命名导出：

// 导出事先定义的特性export { myFunction, myVariable };// 导出单个特性（可以导出 var，let，//const,function,class）export let myVariable = Math.sqrt(2);export function myFunction() { ... };

默认导出：

// 导出事先定义的特性作为默认值export { myFunction as default };// 导出单个特性作为默认值export default function () { ... }export default class { .. }// 每个导出都覆盖前一个导出

在导出多个值时，命名导出非常有用。在导入期间，必须使用相应对象的相同名称。

但是，可以使用任何名称导入默认导出，例如：

// 文件 test.jslet k; export default k = 12;

// 另一个文件import m from './test'; // 由于 k 是默认导出，所以可以自由使用 import m 替代 import kconsole.log(m);        // 输出为 12

你也可以重命名命名导出以避免命名冲突：

export { myFunction as function1,         myVariable as variable };

重导出 / 聚合

为了使模块导入变得可用，在一个父模块中“导入/导出”这些不同模块也是可行的。也就是说，你可以创建单个模块，集中多个模块的多个导出。

这个可以使用“export from”语法实现：

export { default as function1,         function2 } from 'bar.js';

与之形成对比的是联合使用导入和导出：

import { default as function1,         function2 } from 'bar.js';export { function1, function2 };

Copy to Clipboard

但这里的 function1 和 function2 在当前模块中变得不可用。

备注：尽管与 import 等效，但以下语法在语法上无效：

import DefaultExport from 'bar.js'; // 有效的

export DefaultExport from 'bar.js'; // 无效的

Copy to Clipboard

这里正确的做法是重命名这个导出：

export { default as DefaultExport } from 'bar.js';

示例

使用命名导出

在模块 my-module.js 中，可能包含以下代码：

// module "my-module.js"function cube(x) {  return x * x * x;}const foo = Math.PI + Math.SQRT2;var graph = {    options: {        color:'white',        thickness:'2px'    },    draw: function() {        console.log('From graph draw function');    }}export { cube, foo, graph };

然后，在你的 HTML 页面的顶级模块中：

import { cube, foo, graph } from 'my-module.js';graph.options = {    color:'blue',    thickness:'3px'};graph.draw();console.log(cube(3)); // 27console.log(foo);    // 4.555806215962888

着重注意以下几点：

在你的 HTML 中需要包含 type="module" 的 <script> 元素这样的脚本，以便它被识别为模块并正确处理不能通过 file:// URL 运行 JS 模块 — 这将导致 CORS 错误。你需要通过 HTTP 服务器运行。使用默认导出

如果我们要导出一个值或得到模块中的返回值，就可以使用默认导出：

// module "my-module.js"export default function cube(x) {  return x * x * x;}

Copy to Clipboard

然后，在另一个脚本中，可以直接导入默认导出：

import cube from './my-module.js';console.log(cube(3)); // 27

模块重定向

举个例子，假如我们有如下层次结构：

childModule1.js: 导出 myFunction 和 myVariablechildModule2.js: 导出 myClassparentModule.js: 作为聚合器（不做其他事情）顶层模块：调用 parentModule.js 的导出项

你的代码看起来应该像这样：

// childModule1.js 中let myFunction = ...; // assign something useful to myFunctionlet myVariable = ...; // assign something useful to myVariableexport {myFunction, myVariable};

// childModule2.js 中let myClass = ...; // assign something useful to myClassexport myClass;

Copy to Clipboard

// parentModule.js 中// 仅仅聚合 childModule1 和 childModule2 中的导出// 以重新导出他们export { myFunction, myVariable } from 'childModule1.js';export { myClass } from 'childModule2.js';

Copy to Clipboard

// 顶层模块中// 我们可以从单个模块调用所有导出，因为 parentModule 事先// 已经将他们“收集”/“打包”到一起import { myFunction, myVariable, myClass } from 'parentModule.js'

规范

Specification

ECMAScript Language Specification

# sec-exports

浏览器兼容性

Report problems with this compatibility data on GitHub

desktop

mobile

server

Chrome

Edge

Firefox

Opera

Safari

Chrome Android

Firefox for Android

Opera Android

Safari on iOS

Samsung Internet

WebView Android

Deno

Node.js

export

Toggle history

10.1

Toggle history

10.3

Toggle history

8.0

Toggle history

1.0

Toggle history

13.2.0

footnotemore

Toggle history

default keyword with export

Toggle history

10.1

Toggle history

10.3

Toggle history

8.0

Toggle history

1.0

Toggle history

13.2.0

footnotemore

Toggle history

export * as namespace

Toggle history

14.1

Toggle history

14.5

Toggle history

11.0

Toggle history

1.0

Toggle history

13.2.0

footnotemore

Toggle history

Legend

Tip: you can click/tap on a cell for more information.

本文地址：http://www.longkongtuishu.com/ca7b1DWsEA1cC.html

标签： #importjs

如何在JavaScript模块中导出函数、对象或原始值

如何在JavaScript模块中导出函数、对象或原始值

Vue实战060：require与import的区别和使用