Jetons un coup d'oeil aux modules, Importer et Exporter en JavaScript

javascriptLa colonne présente l'utilisation des modules, Import et Export

Recommandé (gratuit) : javascript (Vidéo)

À l'ère préhistorique d'Internet, les sites Web étaient principalement développés en utilisant HTML et CSS. Si JavaScript est chargé dans une page, il fournit généralement des effets et des interactions sous forme de petits extraits. Généralement, tout le code JavaScript est écrit dans un seul fichier et chargé dans une balise script. Même si JavaScript peut être divisé en plusieurs fichiers, toutes les variables et fonctions sont toujours ajoutées à la portée globale.

Mais JavaScript joue un rôle important dans les navigateurs, et il existe un besoin urgent d'utiliser du code tiers pour effectuer des tâches courantes, et le code doit être décomposé en fichiers modulaires pour éviter de polluer l'espace de noms global. .

La spécification ECMAScript 2015 a introduit le module dans le langage JavaScript, ainsi que les instructions d'importation et d'exportation. Dans cet article, nous découvrirons les modules JavaScript et comment utiliser import et export pour organiser le code.

Programmation modulaire

Avant l'apparition du concept de modules en JavaScript, lorsque nous voulions organiser notre code en plusieurs blocs, nous créions généralement plusieurs fichiers et les lions dans des fichiers séparés. scripts. Donnons un exemple ci-dessous. Créez d'abord un fichier index.html et deux fichiers JavaScript « functions.js et script.js Le fichier

index.html est utilisé pour afficher la somme, la différence, le produit et le quotient de. deux nombres. , et créez un lien vers les deux fichiers JavaScript dans la balise script Ouvrez index.html et ajoutez le code suivant :

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>
  

. Cette page est très simple. , je n'entrerai pas dans les détails. Le fichier

functions.js contient les fonctions mathématiques qui seront utilisées dans le deuxième script. Ouvrez le fichier et ajoutez ce qui suit :

.

fonctions..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
}

Enfin, le fichier script.js permet de déterminer les valeurs de x et y, d'appeler les fonctions précédentes et d'afficher les résultats :

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)

Après l'enregistrement, ouvrez-le dans le navigateurindex.html pour voir tous les résultats :

Pour les sites Web qui n'ont besoin que de quelques petits scripts, c'est une bonne idée. Une manière efficace d'organiser le code, mais cette approche pose quelques problèmes :

• pollue l'espace de noms global 🎜> : toutes les variables que vous créez dans le script (sum, difference etc.) existent désormais dans l'objet window Si vous envisagez d'utiliser une autre variable nommée sum dans un autre fichier, ce sera difficile. pour savoir quelle valeur est utilisée ailleurs dans les variables du script, car elles utilisent toutes la même variable window.sum. La seule façon de rendre une variable privée est de la mettre dans la portée de la fonction x. 🎜> dans le DOM peut être identique à <.> Il y a un conflit idvar x
Gestion des dépendances
•  : Les scripts doivent être chargés de haut en bas pour garantir que les bonnes variables peuvent. être utilisé. Enregistrer les scripts sous différents fichiers donnera l'illusion de séparation. Mais c'est essentiellement la même chose que de le mettre dans un seul dans la page. Avant que ES6 n'ajoute des modules natifs au langage JavaScript, la communauté essayait d'en fournir plusieurs. solutions. La solution est d'écrire en JavaScript natif, par exemple d'écrire tout le code dans des objets ou des expressions de fonction immédiatement invoquées (IIFE) et de les placer sur un seul objet dans l'espace de noms global. C'est pour l'approche multi-script. mais il reste toujours le problème de placer au moins un objet dans l'espace de noms global et ne facilite pas le partage de code de manière cohérente entre tiers <script></script>Modules plus tard Solution : CommonJS est une méthode synchrone implémentée dans Node.js. , La définition de module asynchrone (AMD) est une méthode asynchrone, et il existe une méthode universelle qui prend en charge les deux styles précédents - la définition de module universelle (UMD)
L'émergence de ces solutions nous facilite le partage et la réutilisation du code. sous forme de

packages

, c'est-à-dire des modules pouvant être distribués et partagés, comme npm. Mais comme de nombreuses solutions existent et qu'aucune n'est native de JavaScript, vous devez vous appuyer sur des outils comme Babel, Webpack ou Browserify pour les utiliser dans le navigateur.

En raison des nombreux problèmes liés à l'approche multi-fichiers et de la complexité des solutions, les développeurs sont très intéressés à apporter des méthodes de développement modulaires au langage JavaScript. ECMAScript 2015 a donc commencé à prendre en charge le

module

JavaScript.

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 来实现。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!