집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 모듈 가져오기 및 내보내기를 살펴보겠습니다.

JavaScript에서 모듈 가져오기 및 내보내기를 살펴보겠습니다.

coldplay.xixi앞으로: 2020-12-29 17:31:492562검색

javascript이 칼럼에서는 모듈의 사용법, 가져오기 및 내보내기를 소개합니다

권장(무료): javascript(동영상)

인터넷 선사시대에는 웹사이트가 주로 웹사이트였습니다. HTML과 CSS로 개발되었습니다. JavaScript가 페이지에 로드되는 경우 일반적으로 효과와 상호 작용을 제공하는 작은 조각 형태입니다. 일반적으로 모든 JavaScript 코드는 하나의 파일에 작성되고 script 태그에 로드됩니다. JavaScript를 여러 파일로 분할할 수 있더라도 모든 변수와 함수는 여전히 전역 범위에 추가됩니다. script 标签中。尽管可以把 JavaScript 拆分为多个文件，但是所有的变量和函数仍然会被添加到全局作用域中。

但是后来 JavaScript 在浏览器中发挥着重要的作用，迫切需要使用第三方代码来完成常见任务，并且需要把代码分解为模块化的文件，避免污染全局命名空间。

ECMAScript 2015 规范在 JavaScript 语言中引入了 module，也有了 import 和 export 语句。在本文中，我们一起来学习 JavaScript 模块，以及怎样用 import 和 export 来组织代码。

模块化编程

在 JavaScript 中出现模块的概念之前，当我们想要把自己的代码组织为多个块时，一般会创建多个文件，并且将它们链接为单独的脚本。下面先举例说明，首先创建一个 index.html 文件和两个JavaScript文件“ functions.js 和 script.js。

index.html 文件用来显示两个数字的和、差、乘积和商，并链接到 script 标签中的两个 JavaScript 文件。打开 index.html 并添加以下代码：

index.html

nbsp;html>

  
    <meta>
    <meta>

    <title>JavaScript Modules</title>
  

  
    <h1>Answers</h1>
    <h2>
<strong></strong> and <strong></strong>
</h2>

    <h3>Addition</h3>
    <p></p>

    <h3>Subtraction</h3>
    <p></p>

    <h3>Multiplication</h3>
    <p></p>

    <h3>pision</h3>
    <p></p>

    <script></script>
    <script></script>

这个页面很简单，就不详细说明了。

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('pision').textContent = quotient(x, y)

保存之后在浏览器中打开 index.html 可以看到所有结果：

JavaScript에서 모듈 가져오기 및 내보내기를 살펴보겠습니다.

对于只需要一些小脚本的网站，这不失为一种有效的组织代码的方法。但是这种方法存在一些问题：

污染全局命名空间：你在脚本中创建的所有变量（sum、 difference 等）现在都存在于 window 对象中。如果你打算在另一个文件中使用另一个名为 sum 的变量，会很难知道在脚本的其它位置到底用的是哪一个值变量，因为它们用的都是相同的 window.sum 变量。唯一可以使变量私有的方法是将其放在函数的作用域中。甚至在 DOM 中名为 x 的 id 可能会和 var x 存在冲突。
依赖管理：必须从上到下依次加载脚本来确保可以使用正确的变量。将脚本分别保存存为不同文件会产生分离的错觉，但本质上与放在页面中的单个 <script></script>

ECMAScript 2015 사양에서는 가져오기 및 내보내기 문과 함께 JavaScript 언어에

모듈

을 도입했습니다. 이 문서에서는 JavaScript 모듈과 가져오기 및 내보내기를 사용하여 코드를 구성하는 방법에 대해 알아봅니다.

모듈형 프로그래밍

JavaScript에 모듈 개념이 등장하기 전에는 코드를 여러 블록으로 구성하려고 할 때 일반적으로 여러 파일을 만들어 별도의 스크립트에 연결했습니다. 아래 예를 들어보겠습니다. 먼저 index.html 파일과 두 개의 JavaScript 파일 “functions.js 및 script.js를 만듭니다. code>index.html 파일은 두 숫자의 합계, 차이, 곱 및 몫을 표시하는 데 사용되며 script 태그의 두 JavaScript 파일에 연결됩니다. .html에 다음 코드를 추가하세요.

index.html🎜🎜

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

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

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

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

🎜이 페이지는 매우 간단하므로 자세한 내용은 다루지 않겠습니다. 🎜🎜functions.js 파일. 두 스크립트에 사용된 수학 함수가 포함됩니다. 파일을 열고 다음 콘텐츠를 추가합니다. 🎜🎜🎜functions.js🎜🎜

import { sum, difference, product, quotient } from './functions.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('pision').textContent = quotient(x, y)

🎜마지막으로 script.js 파일을 사용하여 결정합니다. x와 y의 값, 그리고 이전 함수를 호출하고 결과를 표시합니다: 🎜🎜🎜script.js🎜🎜

<script>
</script>
<script>
</script>

🎜저장 후 브라우저에서 index.html을 열어 모든 내용을 확인하세요. 결과: 🎜🎜 67f3c37d5a143b6c6c97042f69a886a. png

🎜 🎜작은 스크립트 웹사이트만 필요한 사람들에게는 이것이 코드를 구성하는 효과적인 방법입니다. 그러나 이 방법에는 몇 가지 문제가 있습니다. 🎜

🎜전역 네임스페이스 오염🎜: 다음에서 생성하는 모든 변수. 이제 스크립트(sum, difference 등)가 window 개체에 존재합니다. sum를 사용하면 스크립트의 다른 곳에서 어떤 값 변수가 사용되는지 알기 어렵습니다. 변수를 비공개로 만드는 유일한 방법은 모두 동일한 <code>window.sum 변수를 사용하기 때문입니다. DOM에 있는 x라는 이름의 id도 var x 🎜
와 충돌할 수 있습니다. 🎜종속성 관리. 🎜: 올바른 변수를 사용할 수 있도록 스크립트를 위에서 아래로 로드해야 합니다. 스크립트를 별도의 파일로 저장하면 분리된 것처럼 보이지만 본질적으로 페이지의 단일 <script></script>에 배치하는 것과 같습니다. 🎜🎜🎜ES6가 JavaScript 언어에 기본 모듈을 추가하기 전에 커뮤니티는 여러 솔루션을 제공하려고 노력했습니다. 첫 번째 해결책은 기본 JavaScript로 작성하는 것입니다. 예를 들어 모든 코드를 객체 또는 즉시 호출 함수 표현식(IIFE)에 작성하고 이를 전역 네임스페이스의 단일 객체에 배치합니다. 이는 다중 스크립트 접근 방식에 비해 개선되었지만 여전히 하나 이상의 개체를 전역 네임스페이스에 배치해야 하는 문제가 있으며 제3자 간에 코드를 지속적으로 공유하는 문제를 더 쉽게 만들지는 않습니다. 🎜🎜이후 몇 가지 모듈 솔루션이 나타났습니다. CommonJS는 Node.js에서 구현된 동기식 메서드이고, AMD(Asynchronous Module Definition)는 비동기식 메서드이며, 이전 두 가지 스타일을 지원하는 범용 메서드인 Common Module Definition(UMD)이 있습니다. ). 🎜🎜이러한 솔루션의 출현으로 우리는 🎜패키지🎜 형식, 즉 npm과 같이 배포 및 공유가 가능한 모듈의 코드를 더 쉽게 공유하고 재사용할 수 있게 되었습니다. 그러나 많은 솔루션이 존재하지만 JavaScript에 기본으로 제공되는 솔루션은 없기 때문에 브라우저에서 이를 사용하려면 Babel, Webpack 또는 Browserify와 같은 도구에 의존해야 합니다. 🎜🎜다중 파일 접근 방식의 많은 문제와 솔루션의 복잡성으로 인해 개발자는 모듈식 개발 방법을 JavaScript 언어에 도입하는 데 큰 관심을 갖고 있습니다. 그래서 ECMAScript 2015에서는 JavaScript 🎜module🎜을 지원하기 시작했습니다. 🎜
module 是一组代码，用来提供其他模块所使用的功能，并能使用其他模块的功能。 export 模块提供代码，import 模块使用其他代码。模块之所以有用，是因为它们允许我们重用代码，它们提供了许多可用的稳定、一致的接口，并且不会污染全局命名空间。

模块（有时称为 ES 模块）现在可以在原生 JavaScript 中使用，在本文中，我们一起来探索怎样在代码中使用及实现。

原生 JavaScript 模块

JavaScript 中的模块使用import 和 export 关键字：
- import：用于读取从另一个模块导出的代码。
- export：用于向其他模块提供代码。
接下来把前面的的 functions.js 文件更新为模块并导出函数。在每个函数的前面添加 export 。

functions.js
```
export function sum(x, y) {
  return x + y
}

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

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

export function quotient(x, y) {
  return x / y
}
```
在 script.js 中用 import 从前面的 functions.js 模块中检索代码。

注意：import 必须始终位于文件的顶部，然后再写其他代码，并且还必须包括相对路径（在这个例子里为 ./）。

把 script.js 中的代码改成下面的样子：

script.js
```
import { sum, difference, product, quotient } from './functions.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('pision').textContent = quotient(x, y)
```
注意：要通过在花括号中命名单个函数来导入。

为了确保代码作为模块导入，而不是作为常规脚本加载，要在 index.html 中的 script 标签中添加type="module"。任何使用 import 或 export 的代码都必须使用这个属性：

index.html
```
<script>
</script>
<script>
</script>
```
由于受限于 CORS 策略，必须在服务器环境中使用模块，否则会出现下面的错误：
```
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.
```
模块与常规脚本不一样的地方：
- 模块不会向全局（window）作用域添加任何内容。
- 模块始终处于严格模式。
- 在同一文件中把同一模块加载两次不会出问题，因为模块仅执行一次
- 模块需要服务器环境。
模块仍然经常与打包程序（如 Webpack）一起配合使用，用来增加对浏览器的支持和附加功能，但它们也可以直接用在浏览器中。

接下来探索更多使用 import 和 export 语法的方式。

命名导出

如前所述，使用 export 语法允许你分别导入按名称导出的值。以这个 function.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
```
原始值、函数表达式和定义、异步函数、类和实例化的类都可以导出，只要它们有标识符就行：
```
// 原始值
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']

// 函数表达式
export const sum = (x, y) => x + y

// 函数定义
export function difference(x, y) {
  return x - y
}

// 匿名函数
export async function getBooks() {}

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

// 实例化类
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
```
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 中用关键字 import 和 export 来实现。

위 내용은 JavaScript에서 모듈 가져오기 및 내보내기를 살펴보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：예제를 통해 JavaScript 배열 메소드 Slice()를 사용하는 방법을 알아보세요.다음 기사：예제를 통해 JavaScript 배열 메소드 Slice()를 사용하는 방법을 알아보세요.