モジュール、JavaScript のインポートとエクスポートを見てみましょう

javascriptこのコラムでは、モジュールのインポートとエクスポートの使用法を紹介します

おすすめ (無料): javascript (ビデオ)

インターネットの先史時代、Web サイトは主に HTML と CSS を使用して開発されました。 JavaScript がページに読み込まれると、通常、小さなフラグメントでエフェクトやインタラクションが提供されます。通常、すべての JavaScript コードは 1 つのファイルに記述され、script タグに読み込まれます。 JavaScript は複数のファイルに分割できますが、すべての変数と関数はグローバル スコープに追加されます。

しかしその後、JavaScript がブラウザーで重要な役割を果たし、一般的なタスクを完了するためにサードパーティのコードを使用する緊急の必要性が生じ、グローバル名前空間の汚染を避けるためにコードをモジュール ファイルに分割する必要がありました。 。

ECMAScript 2015 仕様では、JavaScript 言語の module とインポートおよびエクスポート ステートメントが導入されました。この記事では、JavaScript モジュールと、import と export を使用してコードを整理する方法について学びます。

モジュラー プログラミング

モジュールの概念が JavaScript に登場する前、コードを複数のブロックに編成したいときは、通常、複数のファイルを作成し、それらを個別にリンクしていました。スクリプト。以下に例を示します。まず、index.html ファイルと 2 つの JavaScript ファイル「functions.js と script.js」を作成します。

index.html

このファイルは、2 つの数値の和、差、積、商を表示するために使用され、script タグで 2 つの JavaScript ファイルにリンクされています。index を開きます。 html そして、次のコードを追加します。

index.html

nbsp;html>

  
    <meta>
    <meta>

    <title>JavaScript Modules</title>
  

  
    <h1 id="Answers">Answers</h1>
    <h2>
<strong></strong> and <strong></strong>
</h2>

    <h3 id="Addition">Addition</h3>
    <p></p>

    <h3 id="Subtraction">Subtraction</h3>
    <p></p>

    <h3 id="Multiplication">Multiplication</h3>
    <p></p>

    <h3 id="pision">pision</h3>
    <p></p>

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

このページは非常に簡単なので、詳細は説明しません。

functions.js

ファイルには、2 番目のスクリプトで使用される数学関数が含まれています。ファイルを開いて、次の内容を追加します:

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

を開いてすべての結果を確認します:

#いくつかの小さなスクリプトのみを必要とする Web サイトの場合、これはコードを整理する効果的な方法ですが、この方法にはいくつかの問題があります。グローバル名前空間: スクリプトで作成したすべての変数 (

sum

、

difference

など) は、
• window オブジェクトに存在します。別のファイル変数で sum という名前の別の変数を使用すると、すべて同じ window.sum 変数を使用するため、スクリプト内の他の場所でどの値変数が使用されているかを知るのが難しくなります。変数をプライベートにする唯一の方法は、変数を関数のスコープに置くことです。DOM 内の x という名前の id であっても、var x と競合する可能性があります。 #依存関係管理: 正しい変数が使用されるようにするには、スクリプトを上から下にロードする必要があります。スクリプトを別のファイルとして保存すると、分離されているように見えますが、本質的にはスクリプトを別のファイルに配置するのと同じです。ページ上の単一の .
ES6 が JavaScript 言語にネイティブ モジュールを追加する前に、コミュニティはいくつかのソリューションを提供しようとしました。最初のソリューションはネイティブで書かれていました。 JavaScript 。オブジェクトまたは即時呼び出し関数式 (IIFE) 内にすべてのコードを記述し、それらをグローバル名前空間内の単一のオブジェクトに配置するなど。これはマルチスクリプトのアプローチよりも改善されていますが、少なくとも 1 つのオブジェクトをグローバル名前空間に入れるという問題が依然としてあり、サードパーティ間でコードを一貫して共有するという問題はそれほど簡単にはなりません。
• その後、いくつかのモジュール ソリューションが登場しました: CommonJS は Node.js に実装された同期メソッド、Asynchronous Module Definition (AMD) は非同期メソッド、そして前の 2 つのスタイルをサポートする一般的なメソッドがあります。ユニバーサル モジュール定義 (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 中国語 Web サイトの他の関連記事を参照してください。