您的位置：首页 > 数码常识数码常识
js文件导入导出（js导出功能）
2025-05-10人已围观
js文件导入导出（js导出功能）
在 Web 的早期，网站主要由HTML和CSS组成。如果将任何 JavaScript 加载到页面中，它通常以小片段的形式提供效果和交互性。因此，JavaScript 程序通常编写在一个文件中并加载到一个script标签中。开发人员可以将 JavaScript 分解为多个文件，但所有变量和函数仍将添加到全局范围。
js导出功能
但网站随着Angular、React和Vue等框架的出现而不断发展，以及随着越来越多的公司创建高级 Web 应用程序，JavaScript 现在在浏览器中扮演着重要角色。因此，更需要使用第三方代码来执行常见任务，将代码分解为模块化文件，并避免污染全局命名空间。
ECMAScript 2015规范为 JavaScript 语言引入了模块，允许使用import和export语句。在本教程中，您将了解什么是 JavaScript 模块以及如何使用import和export组织代码。
模块化编程
在 JavaScript 中出现模块概念之前，当开发人员想要将他们的代码有组织地分离时，他们会创建多个文件并作为单独的脚本链接到页面中。为了演示这一点，创建一个示例index文件和两个 JavaScript 文件，functions.js 和 script.js.
该index文件将显示两个数字的和、差、积和商，并在script标签中链接到两个 JavaScript 文件。在文本编辑器中打开index并添加以下代码：
index
此 HTML 将在标题2中分别显示x和y的值。
该functions.js文件将包含加、减、乘、除四个数学函数。打开functions.js文件并添加以下内容：
functions.js
最后，该script.js文件将使用function.js 中的函数计算x和用，并显示结果：
script.js
设置这些文件并保存后，您可以在浏览器中打开index以显示所有结果：
对于有少量小脚本的网站，这是一种有效的代码划分方式。但是，这种方法存在一些问题，比如：
污染全局命名空间：您在脚本中创建的所有变量—— sum、difference等——现在都存在于window对象上。如果您尝试使用sum在另一个文件中调用另一个变量，则很难知道脚本中使用的哪个值，因为它们都将使用相同的window.sum变量。变量私有的唯一方法是将其放在函数范围内。DOM中名为x的id和var x之间甚至可能会有冲突。依赖管理：脚本必须按照从上到下的顺序加载，以确保正确的变量可用。将脚本保存为不同的文件给人一种分离的错觉，但是它本质上与浏览器页面中的单个内联< script >是一样的。
在ES6将原生模块添加到JavaScript语言之前，社区试图提出几种解决方案。第一个解决方案是用普通的JavaScript编写的，比如用对象或立即调用函数表达式(IIFEs)编写所有代码，并将它们放在全局名称空间中的单个对象上。这是对多脚本方法的一个改进，但是仍然存在至少在全局名称空间中放置一个对象的问题，并且没有使在第三方之间一致共享代码的问题变得更容易。
之后，出现了一些模块解决方案:
CommonJS，这是一种在Node.js中实现的同步方法。异步模块定义(AMD)，这是一种异步方法。通用模块定义(UMD)，这是一种支持前面两种风格的通用方法。
这些解决方案的出现使得开发人员更容易以包、模块的形式共享和重用代码，这些模块可以被分发和共享，比如在npm上找到的那些。虽然有许多解决方案，但没有一个是JavaScript自带的，所以必须实现像Babel、Webpack或Browserify这样的工具才能在浏览器中使用模块。
由于多文件方法的许多问题以及所提出的解决方案的复杂性，开发人员有兴趣将模块化编程方法引入 JavaScript 语言。因此，ECMAScript 2015 支持使用 JavaScript 模块。
A module 是一组代码，它充当接口以提供功能供其他模块使用，并且能够依赖其他模块的功能。模块导出以提供代码并导入以使用其他代码。模块很有用，因为它们允许开发人员重用代码，它们提供了许多开发人员可以使用的稳定、一致的接口，并且它们不会污染全局命名空间。
Modules（有时称为 ECMAScript modules或 ES modules）现在可以在 JavaScript 中本地使用，在本教程的其余部分中，您将探索如何在代码中使用和实现它们。
原生 JavaScript 模块
JavaScript 中的模块使用import 和 export关键字：
import：用于读取从另一个模块导出的代码。export：用于向其他模块导出代码。
为了演示如何使用它，请将您的functions.js文件更新为模块并导出函数。您将在每个函数前面添加 export，这将使它们可用于其他任何模块中。
将以下突出显示的代码添加到您的文件中：
functions.js
现在，在script.js中，您将使用import从functions.js文件中导入模块。
注意：import必须始终位于任何其他代码之前的文件顶部，并且还必须包含相对路径（在http://sjzlt.cn/shuma/这种情况下）。
将以下突出显示的代码添加到script.js：
script.js
请注意，单个函数是通过在花括号中命名它们来导入的。
为了确保这段代码作为一个模块而不是一个常规脚本被加载，在index中将 type="module " 添加到脚本标记中，凡是使用 import 或 export 的脚本文件都必须使用此属性:
index
此时，您将能够使用更新重新加载页面，网站现在将使用模块。浏览器支持度非常高，但是可以用caniuse来检查哪些浏览器支持。
请注意，如果您将该文件视为指向本地文件的直接链接，将会遇到以下错误:
由于CORS政策，模块必须在服务器环境中使用，您可以通过http-server在本地设置服务器环境，或者通过托管提供商在互联网上设置服务器环境。
模块在以下几个方面不同于常规脚本：
模块不会向全局 ( window) 范围内添加任何内容。模块始终处于严格模式。在同一个文件中加载同一个模块两次不会有任何效果，因为模块只执行一次模块需要服务器环境。
模块仍然经常与 Webpack 等构建工具一起使用，以增加对浏览器的支持和附加功能，但它们也可以直接在浏览器中使用。
接下来，您将探索更多使用import 和 export语法的方法。
命名导出
如前所述，使用export导出每个命名模块。以functions.js的简化版本为例:
functions.js
这将允许您使用花括号按名称导入sum和difference:
script.js
也可以使用别名来重命名函数。这样做可以避免同一模块中的命名冲突。在本例中，sum将被重命名为add，difference将被重命名为subtract。
script.js
在这里调用add()将产生sum()函数的结果。
使用该*语法，您可以将整个模块的内容导入到一个对象中。在这种情况下，sum和difference将成为 mathFunctions 对象上的方法。
script.js
基本数据类型、函数表达式、异步函数、类和实例化类都可以导出，只要它们具有标识符：
所有这些导出都可以成功导入。您将在下一节探索另一种类型的导出称为默认导出。
默认导出
在前面的示例中，您导出了多个命名export，并分别或作为一个对象导入它们。模块还可以包含默认export，使用default关键字。默认的导出不会用花括号导入，而是直接导入到命名的标识符中
以functions.js文件的以下内容为例：
functions.js
在script.js文件中，您可以导入默认函数，sum如下所示：
script.js
这可能是危险的，因为在导入过程中对默认导出的命名没有限制。在此示例中，默认函数作为difference导入，尽管它实际上是sum函数:
script.js
因此，通常首选使用命名导出。与命名导出不同，默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象示例：
functions.js
这可以通过以下方式将它作为book导入script.js:
script.js
同样，下面的示例演示了如何将匿名箭头函数导出为默认导出:
functions.js
这可以通过以下方式导入script.js：
script.js
命名导出和默认导出可以一起使用，如在此模块中导出两个命名值和一个默认值：
functions.js
您可以使用以下命令导入这些变量和默认函数：
script.js
现在script.js可以使用默认值和命名值。
结论
模块化编程设计实践允许您将代码分成单独的组件，这有助于使您的代码可重用和一致，同时还可以保护全局命名空间。模块接口可以在原生 JavaScript 中使用import 和 export关键字实现。在本文中，您了解了 JavaSvript 中模块的历史，如何将 JavaScript 文件分离为多个顶级脚本，如何使用模块化方法更新这些文件，以及命名和默认导出的import语法export。
上面就是小居数码小编今天给大家介绍的关于（js导出功能）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
分割pdf文件最简单的方法（怎样分割pdf文件）
pdf文件里面的文字修改方法（pdf里面的文字如何修改）
教你5招解决方法（微信文件过期怎么办）
excel筛选高级技巧（excel筛选功能）
154607
在 Web 的早期，网站主要由HTML和CSS组成。如果将任何 JavaScript 加载到页面中，它通常以小片段的形式提供效果和交互性。因此，JavaScript 程序通常编写在一个文件中并加载到一个script标签中。开发人员可以将 JavaScript 分解为多个文件，但所有变量和函数仍将添加到全局范围。
js导出功能
但网站随着Angular、React和Vue等框架的出现而不断发展，以及随着越来越多的公司创建高级 Web 应用程序，JavaScript 现在在浏览器中扮演着重要角色。因此，更需要使用第三方代码来执行常见任务，将代码分解为模块化文件，并避免污染全局命名空间。
ECMAScript 2015规范为 JavaScript 语言引入了模块，允许使用import和export语句。在本教程中，您将了解什么是 JavaScript 模块以及如何使用import和export组织代码。
模块化编程
在 JavaScript 中出现模块概念之前，当开发人员想要将他们的代码有组织地分离时，他们会创建多个文件并作为单独的脚本链接到页面中。为了演示这一点，创建一个示例index文件和两个 JavaScript 文件，functions.js 和 script.js.
该index文件将显示两个数字的和、差、积和商，并在script标签中链接到两个 JavaScript 文件。在文本编辑器中打开index并添加以下代码：
index
此 HTML 将在标题2中分别显示x和y的值。
该functions.js文件将包含加、减、乘、除四个数学函数。打开functions.js文件并添加以下内容：
functions.js
最后，该script.js文件将使用function.js 中的函数计算x和用，并显示结果：
script.js
设置这些文件并保存后，您可以在浏览器中打开index以显示所有结果：
对于有少量小脚本的网站，这是一种有效的代码划分方式。但是，这种方法存在一些问题，比如：
污染全局命名空间：您在脚本中创建的所有变量—— sum、difference等——现在都存在于window对象上。如果您尝试使用sum在另一个文件中调用另一个变量，则很难知道脚本中使用的哪个值，因为它们都将使用相同的window.sum变量。变量私有的唯一方法是将其放在函数范围内。DOM中名为x的id和var x之间甚至可能会有冲突。依赖管理：脚本必须按照从上到下的顺序加载，以确保正确的变量可用。将脚本保存为不同的文件给人一种分离的错觉，但是它本质上与浏览器页面中的单个内联< script >是一样的。
在ES6将原生模块添加到JavaScript语言之前，社区试图提出几种解决方案。第一个解决方案是用普通的JavaScript编写的，比如用对象或立即调用函数表达式(IIFEs)编写所有代码，并将它们放在全局名称空间中的单个对象上。这是对多脚本方法的一个改进，但是仍然存在至少在全局名称空间中放置一个对象的问题，并且没有使在第三方之间一致共享代码的问题变得更容易。
之后，出现了一些模块解决方案:
CommonJS，这是一种在Node.js中实现的同步方法。异步模块定义(AMD)，这是一种异步方法。通用模块定义(UMD)，这是一种支持前面两种风格的通用方法。
这些解决方案的出现使得开发人员更容易以包、模块的形式共享和重用代码，这些模块可以被分发和共享，比如在npm上找到的那些。虽然有许多解决方案，但没有一个是JavaScript自带的，所以必须实现像Babel、Webpack或Browserify这样的工具才能在浏览器中使用模块。
由于多文件方法的许多问题以及所提出的解决方案的复杂性，开发人员有兴趣将模块化编程方法引入 JavaScript 语言。因此，ECMAScript 2015 支持使用 JavaScript 模块。
A module 是一组代码，它充当接口以提供功能供其他模块使用，并且能够依赖其他模块的功能。模块导出以提供代码并导入以使用其他代码。模块很有用，因为它们允许开发人员重用代码，它们提供了许多开发人员可以使用的稳定、一致的接口，并且它们不会污染全局命名空间。
Modules（有时称为 ECMAScript modules或 ES modules）现在可以在 JavaScript 中本地使用，在本教程的其余部分中，您将探索如何在代码中使用和实现它们。
原生 JavaScript 模块
JavaScript 中的模块使用import 和 export关键字：
import：用于读取从另一个模块导出的代码。export：用于向其他模块导出代码。
为了演示如何使用它，请将您的functions.js文件更新为模块并导出函数。您将在每个函数前面添加 export，这将使它们可用于其他任何模块中。
将以下突出显示的代码添加到您的文件中：
functions.js
现在，在script.js中，您将使用import从functions.js文件中导入模块。
注意：import必须始终位于任何其他代码之前的文件顶部，并且还必须包含相对路径（在http://sjzlt.cn/shuma/这种情况下）。
将以下突出显示的代码添加到script.js：
script.js
请注意，单个函数是通过在花括号中命名它们来导入的。
为了确保这段代码作为一个模块而不是一个常规脚本被加载，在index中将 type="module " 添加到脚本标记中，凡是使用 import 或 export 的脚本文件都必须使用此属性:
index
此时，您将能够使用更新重新加载页面，网站现在将使用模块。浏览器支持度非常高，但是可以用caniuse来检查哪些浏览器支持。
请注意，如果您将该文件视为指向本地文件的直接链接，将会遇到以下错误:
由于CORS政策，模块必须在服务器环境中使用，您可以通过http-server在本地设置服务器环境，或者通过托管提供商在互联网上设置服务器环境。
模块在以下几个方面不同于常规脚本：
模块不会向全局 ( window) 范围内添加任何内容。模块始终处于严格模式。在同一个文件中加载同一个模块两次不会有任何效果，因为模块只执行一次模块需要服务器环境。
模块仍然经常与 Webpack 等构建工具一起使用，以增加对浏览器的支持和附加功能，但它们也可以直接在浏览器中使用。
接下来，您将探索更多使用import 和 export语法的方法。
命名导出
如前所述，使用export导出每个命名模块。以functions.js的简化版本为例:
functions.js
这将允许您使用花括号按名称导入sum和difference:
script.js
也可以使用别名来重命名函数。这样做可以避免同一模块中的命名冲突。在本例中，sum将被重命名为add，difference将被重命名为subtract。
script.js
在这里调用add()将产生sum()函数的结果。
使用该*语法，您可以将整个模块的内容导入到一个对象中。在这种情况下，sum和difference将成为 mathFunctions 对象上的方法。
script.js
基本数据类型、函数表达式、异步函数、类和实例化类都可以导出，只要它们具有标识符：
所有这些导出都可以成功导入。您将在下一节探索另一种类型的导出称为默认导出。
默认导出
在前面的示例中，您导出了多个命名export，并分别或作为一个对象导入它们。模块还可以包含默认export，使用default关键字。默认的导出不会用花括号导入，而是直接导入到命名的标识符中
以functions.js文件的以下内容为例：
functions.js
在script.js文件中，您可以导入默认函数，sum如下所示：
script.js
这可能是危险的，因为在导入过程中对默认导出的命名没有限制。在此示例中，默认函数作为difference导入，尽管它实际上是sum函数:
script.js
因此，通常首选使用命名导出。与命名导出不同，默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象示例：
functions.js
这可以通过以下方式将它作为book导入script.js:
script.js
同样，下面的示例演示了如何将匿名箭头函数导出为默认导出:
functions.js
这可以通过以下方式导入script.js：
script.js
命名导出和默认导出可以一起使用，如在此模块中导出两个命名值和一个默认值：
functions.js
您可以使用以下命令导入这些变量和默认函数：
script.js
现在script.js可以使用默认值和命名值。
结论
模块化编程设计实践允许您将代码分成单独的组件，这有助于使您的代码可重用和一致，同时还可以保护全局命名空间。模块接口可以在原生 JavaScript 中使用import 和 export关键字实现。在本文中，您了解了 JavaSvript 中模块的历史，如何将 JavaScript 文件分离为多个顶级脚本，如何使用模块化方法更新这些文件，以及命名和默认导出的import语法export。
上面就是小居数码小编今天给大家介绍的关于（js导出功能）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。
94%的朋友还想知道的：
分割pdf文件最简单的方法（怎样分割pdf文件）
pdf文件里面的文字修改方法（pdf里面的文字如何修改）
教你5招解决方法（微信文件过期怎么办）
excel筛选高级技巧（excel筛选功能）
154607
很赞哦！ ()
下一篇：返回列表