当前位置: 主页>网站教程>JS教程> 具体理解javascript中的modules、import和export

分享文章到：

具体理解javascript中的modules、import和export

发布时间：12/01 来源：未知浏览：关键词：

在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。假如将 JavaScript 加载到页面中，平常是以小片段的情势供给结果和交互，一样会把所有的 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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>JavaScript Modules</title>
  </head>

  <body>
    <h1>Answers</h1>
    <h2><strong id="x"></strong> and <strong id="y"></strong></h2>

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

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

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

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

    <script src="functions.js"></script>
    <script src="script.js"></script>
  </body>
</html>

这个页面很简便，就不具体说明了。

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 可以看到所有结果：

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

污染全局命名空间：你在足本中创立的所有变量（sum、 difference 等）此刻都存在于 window 对象中。假如你打算在另一个文件中使用另一个名为 sum 的变量，会很难知道在足本的其它位置到底用的是哪一个值变量，由于它们用的都是雷同的 window.sum 变量。独一可以使变量私有的办法是将其放在函数的作用域中。乃至在 DOM 中名为 x 的 id 大概会和 var x 存在冲突。
依靠治理：必需从上到下顺次加载足原本确保可以使用准确的变量。将足本离别留存存为不一样文件会发生别离的错觉，但本质上与放在页面中的单个 <script> 中雷同。

在 ES6 把原生模块增加到 JavaScript 说话此前，社区曾经尝试着供给了几种解决方案。第一个解决方案是用原生 JavaScript 编写的，例如将所有代码都写在 objects 或马上调取的函数表达式（IIFE）中，并将它们放在全局命名空间中的单个对象上。这是对多足本办法的一种改善，但是依然存在将至少一个对象放入全局命名空间的问题，并没有使在第三方之间一致地同享代码的问题变得愈加容易。

之后又显现了一些模块解决方案：CommonJS 是一种在 Node.js 实现的同步办法，异步模块定义（AMD）是一种异步办法，还有支撑前面两种样式的通用办法——通用模块定义（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 
  type="module" src="functions.js">
</script>
<script 
  type="module" src="script.js">
</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 来实现。

原文地址：https://www.taniarascia.com/javascript-modules-import-export/
作者：Tania Rascia
译文地址：https://segmentfault.com/a/1190000038275195

打赏

感谢您的支持，我会继续努力的!

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网建议打赏1～10元，土豪随意，感谢您的阅读！

上一篇：解决angular中的阅读器兼容性问题的办法介绍
下一篇：谈谈Node.js中的文件写入

共有150人阅读，期待你的评论！发表评论

本文标签

广告赞助

能出一分力是一分吧！

具体理解javascript中的modules、import和export

模块化编程

原生 JavaScript 模块

命名输出

默许输出

总结

相关文章

本文标签

广告赞助

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板