JavaScript 模块导入导出

本文主要是介绍JavaScript 模块导入导出，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.分别导出

export const learn = 'javaScript 模块化'
export function modulesLearn() {
    return learn + '学习'
}

2.一个更方便的方法导出所有你想要导出的模块的方法是在模块文件的末尾使用一个export 语句
语句是用花括号括起来的用逗号分割的列表

export { fan, name }

3.默认导出 export default

4.重命名导入
在你的 import 和 export 语句的大括号中，
可以使用 as 关键字跟一个新的名字，来改变你在顶级模块中将要使用的功能的标识名字。
导出重新命名

export {
    function1 as newFunctionName,
    function2 as anotherNewFunctionName
  };

  // inside main.mjs
  import { newFunctionName, anotherNewFunctionName } from '/modules/module.mjs';

导入重新命名

inside module.mjs
export { function1, function2 };

// inside main.mjs
import { function1 as newFunctionName,
         function2 as anotherNewFunctionName } from '/modules/module.mjs';

5.导入整个模块（前提5.1)
导入每一个模块功能到一个模块功能对象上。可以使用以下语法形式：

import * as Module from '/modules/module.mjs';

这将获取module.mjs中所有可用的导出， 并使它们可以作为对象模块的成员使用， 从而有效地为其提供自己的命名空间。

Module.function1()
Module.function2()

5.1 导出必须是对象形式

export { name, draw, reportArea, reportPerimeter }

6.合并模块（合并子模块)

6.1:导入模块x.mjs，然后重新导出部分或全部导出
export * from ‘x.mjs’

6.2:子模块导出
export { Square };
父模块导入
import { Square } from './modules/square.mjs';
单行导入父模块
import { Square, Circle, Triangle } from './modules/shapes.mjs';

7.动态加载模块
浏览器中可用的JavaScript模块功能的最新部分是动态模块加载。
这允许您仅在需要时动态加载模块，而不必预先加载所有模块。

允许您将import()作为函数调用，将其作为参数传递给模块的路径。
它返回一个 promise，它用一个模块对象来实现，让你可以访问该对象的导出，

import('/modules/myModule.mjs')
  .then((module) => {
Do something with the module.
  });

由于promise履行会返回一个模块对象，因此该类成为对象的子特征，因此我们现在需要使用 Module访问构造函数。
在它之前，例如 Module.Square( … )。

end;
长风破浪会有时,直挂云帆济沧海;

这篇关于JavaScript 模块导入导出的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！