ES6_创建模块脚本，以重复使用不同文件的js代码块（通过导出、导入实现）

ES6引入了一种在JavaScript文件之间轻松共享代码的方法。这涉及导出文件的一部分以用于一个或多个其他文件，并在需要时导入所需的部分。为了利用此功能，需要在HTML文档中创建一个具有type为module的脚本：

<html>
  <body>
    <!--使用此模块类型的脚本现在可以使用导出和导入功能-->
    <script type="module" src="index.js"></script>
  </body>
</html>

《导出》

在某一个.JS文件中（这里假设是math_functions.js），导出的语法为：

//导出法一：
export const add = (x, y) => {
  return x + y;
}

//导出法二：
const add = (x, y) => {
  return x + y;
}
export { add };

//导出法三：
export { add, subtract }; //将需要导出的n个函数名用逗号分隔

《导入》

import will find add in math_functions.js, import just that function for you to use, and ignore the rest. The ./ tells the import to look for the math_functions.js file in the same folder as the current file. The relative file path (./) and file extension (.js) are required when using import in this way.

import将在math_functions.js中找到add，只导入该函数供您使用，而忽略其余部分。（./）告诉import去查找与当前文件位于同一文件夹中的math_functions.js文件。以这种方式使用import时，需要相对文件路径（./）和文件扩展名（.js）。　　

在另外的要引用它们的.JS文件中，导入的语法为：

//导入法一：
import { add } from './math_functions.js';

//导入法二：
import { add, subtract } from './math_functions.js';//可以从文件中导入多个项

//导入法三：

import * as myMathModule from "./math_functions.js";//与当前文件myMathModule处于同一文件夹的math_functions.js

文件的全部内容将被导入当前文件myMathModule中。

//使用方法：
myMathModule.add(2,3);
myMathModule.subtract(5,3);

《导出默认、导入默认》

在前面的导出部分中，我们了解了称为命名导出的语法。这使我们能在其他文件中使用多个函数和变量。

我们还需要了解另一种导出语法，即export default（导出默认）语法。通常，如果从文件中只导出一个值，则将使用此语法。

它还用于为文件或模块创建回退值：

export default function add(x, y) {
  return x + y;
}

export default function(x, y) {
  return x + y;
}

上面例子中，第一个是命名函数，第二个是匿名函数。

由于export default用于为模块或文件声明回退值，因此每个模块或文件中只能有一个值作为默认导出。

此外，请注意，不能将export default与var、let或const一起使用！

想以哪个函数作为模块或文件的回退值就在哪个函数前加上export default即可。

同样的，要把其他文件的export default的值导入当前文件中，语法与之前的导入稍有不同。我们来假设

add是math_functions.js文件的默认导出值，则当前文件的导入默认的写法为：

import add from "./math_functions.js";

语法在只在一个关键点上有所不同，即导入的值add没有被大括号‘｛｝’包围。不管math_functions.js文件的默认导出值是什么，add也只是作为承接这个值的变量名而已。换句话说，在导入默认值时，我们可以在此处使用任何名称。

posted @ 2022-09-15 22:26 枭二熊阅读(346) 评论(0) 收藏举报

梟二熊

ES6_创建模块脚本，以重复使用不同文件的js代码块（通过导出、导入实现）

公告