了解 JavaScript 中的模块、导入和导出

在 Web 的早期，网站主要由HTML和CSS组成。如果将任何 JavaScript 加载到页面中，它通常以小片段的形式提供效果和交互性。因此，JavaScript 程序通常完全编写在一个文件中并加载到一个script标签中。开发人员可以将 JavaScript 分解为多个文件，但所有变量和函数仍将添加到全局范围。

但是随着网站随着Angular、React和Vue等框架的出现而不断发展，并且随着公司创建高级 Web 应用程序而不是桌面应用程序，JavaScript 现在在浏览器中扮演着重要角色。因此，更需要使用第三方代码来执行常见任务，将代码分解为模块化文件，并避免污染全局命名空间。

ECMAScript 2015规范为 JavaScript 语言引入了模块，允许使用import和export语句。在本教程中，您将了解什么是 JavaScript 模块以及如何使用import和export组织代码。

模块化编程

在 JavaScript 中出现模块概念之前，当开发人员想要将他们的代码组织成段时，他们会创建多个文件并作为单独的脚本链接到它们。为了演示这一点，创建一个示例index.html文件和两个 JavaScript 文件，functions.js以及script.js.

该index.html文件将显示两个数字的和、差、积和商，并在script标签中链接到两个 JavaScript 文件。在文本编辑器中打开index.html并添加以下代码：

index.html

  
    
    

    
  

  
    
Answers
    
 and 

    
Addition
    


    
Subtraction
    


    
Multiplication
    


    
Division
    


    
    
  

此 HTML 将在h2标题中显示变量x,y的值，以及在以下p元素中对这些变量进行操作的值。元素的id属性是为DOM 操作设置的，这将发生在script.js文件中；该文件还将设置 x和 y的值。有关 HTML 的更多信息，请查看我们的如何使用 HTML系列构建网站。

functions.js文件将包含将在第二个脚本中使用的数学函数。打开functions.js文件并添加以下内容：

functions.js

function sum(x, y) {
  return x + y
}

function difference(x, y) {
  return x - y
}

function product(x, y) {
  return x * y
}

function quotient(x, y) {
  return x / y
}

最后，script.js文件将确定x和y的值，将函数应用于它们，并显示结果：

script.js

const x = 10
const y = 5

document.getElementById('x').textContent = x
document.getElementById('y').textContent = y

document.getElementById('addition').textContent = sum(x, y)
document.getElementById('subtraction').textContent = difference(x, y)
document.getElementById('multiplication').textContent = product(x, y)
document.getElementById('division').textContent = quotient(x, y)

设置这些文件并保存后，您可以在浏览器中打开index.html以显示您的网站以及所有结果：

对于有少量小脚本的网站，这是一种有效的代码划分方式。但是，这种方法存在一些问题，包括：

• 污染全局命名空间：您在脚本中创建的所有变量—— sum、difference等——现在都存在于window对象上。如果您尝试使用sum在另一个文件中调用的另一个变量，则很难知道脚本中的任何时候将使用哪个值，因为它们都将使用相同的window.sum变量。变量私有的唯一方法是将其放在函数范围内。idDOM 中名为 的x和之间甚至可能存在冲突var x。
• 依赖管理：脚本必须按从上到下的顺序加载，以确保正确的变量可用。将脚本保存为不同的文件会产生分离的错觉，但这与

此时，您将能够重新加载包含更新的页面，并且网站现在将使用模块。浏览器支持非常高，但是可以使用caniuse来检查哪些浏览器支持它。请注意，如果您将文件视为指向本地文件的直接链接，则会遇到此错误：

Access to script at 'file:///Users/your_file_path/script.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

由于CORS 政策，模块必须在服务器环境中使用，您可以在本地使用http-server或在 Internet 上使用托管服务提供商进行设置。

模块在以下几个方面不同于常规脚本：

• 模块不会向全局 ( window) 范围添加任何内容。
• 模块始终处于严格模式。
• 在同一个文件中加载同一个模块两次没有效果，因为模块只执行一次/
• 模块需要服务器环境。

模块仍然经常与 Webpack 等捆绑器一起使用，以增加对浏览器的支持和附加功能，但它们也可以直接在浏览器中使用。

接下来，您将探索更多使用importandexport语法的方法。

命名导出

如前所述，使用export语法将允许您单独导入已按名称导出的值。以这个简化版本为例functions.js：

functions.js

export function sum() {}
export function difference() {}

这将允许您使用花括号导入sum并按名称：difference

script.js

import {sum, difference} from './functions.js'

也可以使用别名来重命名函数。您可以这样做以避免同一模块内的命名冲突。在本例中，sum将重命名为add并将difference重命名为subtract。

script.js

import {
  sum as add,
  difference as subtract
} from './functions.js'

add(1, 2) // 3

在这里调用add()将产生sum()函数的结果。

使用该*语法，您可以将整个模块的内容导入到一个对象中。在这种情况下，sum和difference将成为mathFunctions对象上的方法。

script.js

import * as mathFunctions from './functions.js'

mathFunctions.sum(1, 2) // 3
mathFunctions.difference(10, 3) // 7

原始值、函数表达式和定义、异步函数、类和实例化类都可以导出，只要它们具有标识符：

// Primitive values
export const number = 100
export const string = 'string'
export const undef = undefined
export const empty = null
export const obj = {name: 'Homer'}
export const array = ['Bart', 'Lisa', 'Maggie']

// Function expression
export const sum = (x, y) => x + y

// Function defintion
export function difference(x, y) {
  return x - y
}

// Asynchronous function
export async function getBooks() {}

// Class
export class Book {
  constructor(name, author) {
    this.name = name
    this.author = author
  }
}

// Instantiated class
export const book = new Book('Lord of the Rings', 'J. R. R. Tolkein')

所有这些导出都可以成功导入。您将在下一节中探讨的另一种导出类型称为默认导出。

默认导出

在前面的示例中，您导出了多个命名导出并将它们单独导入或作为一个对象导入，每个导出作为对象上的一个方法。模块还可以包含默认导出，使用default关键字。默认导出不会使用大括号导入，而是直接导入到命名标识符中。

以functions.js文件的以下内容为例：

functions.js

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

在script.js文件中，您可以导入默认函数，sum如下所示：

script.js

import sum from './functions.js'

sum(1, 2) // 3

这可能很危险，因为在导入期间您可以命名默认导出没有任何限制。在这个例子中，默认函数被导入，difference虽然它实际上是sum函数：

script.js

import difference from './functions.js'

difference(1, 2) // 3

因此，通常首选使用命名导出。与命名导出不同，默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象示例：

functions.js

export default {
  name: 'Lord of the Rings',
  author: 'J. R. R. Tolkein',
}

您可以book按以下方式导入它：

functions.js

import book from './functions.js'

同样，以下示例演示了将匿名箭头函数导出为默认导出：

functions.js

export default () => 'This function is anonymous'

这可以通过以下方式导入script.js：

script.js

import anonymousFunction from './functions.js'

命名导出和默认导出可以一起使用，如在此模块中导出两个命名值和一个默认值：

functions.js

export const length = 10
export const width = 5

export default function perimeter(x, y) {
  return 2 * (x + y)
}

您可以使用以下命令导入这些变量和默认函数：

script.js

import calculatePerimeter, {length, width} from './functions.js'

calculatePerimeter(length, width) // 30

现在脚本可以使用默认值和命名值。

结论

模块化编程设计实践允许您将代码分成单独的组件，这有助于使您的代码可重用和一致，同时还可以保护全局命名空间。模块接口可以在原生 JavaScript 中使用importandexport关键字实现。在本文中，您了解了 JavaSvript 中模块的历史，如何将 JavaScript 文件分离为多个顶级脚本，如何使用模块化方法更新这些文件，以及命名和默认导出的import语法export。

要了解有关 JavaScript 中模块的更多信息，请阅读Mozilla 开发人员网络上的模块。如果您想探索 Node.js 中的模块，请尝试我们的如何创建 Node.js 模块教程。