您的位置是:网站首页>Javascript编程Javascript编程

详细了解javascript中的modules、import和export

少儿编程网2021-07-01 14:48:46Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介在互联网的洪荒时代,网站主要用HTML和CSS开发的。如果将JavaScript加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的JavaScript代码全都写在一个文件中,并加载到一个script标签中。尽管可以把JavaScript拆分为多个文件,但是所有的变量和函数仍然会被添加到

I3s少儿编程网-https://www.pxcodes.com

在互联网的洪荒时代,网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中,通常是以小片段的形式提供效果和交互,一般会把所有的 JavaScript 代码全都写在一个文件中,并加载到一个 script 标签中。尽管可以把 JavaScript 拆分为多个文件,但是所有的变量和函数仍然会被添加到全局作用域中。I3s少儿编程网-https://www.pxcodes.com

但是后来 JavaScript 在浏览器中发挥着重要的作用,迫切需要使用第三方代码来完成常见任务,并且需要把代码分解为模块化的文件,避免污染全局命名空间。I3s少儿编程网-https://www.pxcodes.com

ECMAScript 2015 规范在 JavaScript 语言中引入了 module,也有了 import 和 export 语句。在本文中,我们一起来学习 JavaScript 模块,以及怎样用 importexport 来组织代码。I3s少儿编程网-https://www.pxcodes.com

模块化编程

在 JavaScript 中出现模块的概念之前,当我们想要把自己的代码组织为多个块时,一般会创建多个文件,并且将它们链接为单独的脚本。下面先举例说明,首先创建一个 index.html 文件和两个JavaScript文件“ functions.jsscript.jsI3s少儿编程网-https://www.pxcodes.com

index.html 文件用来显示两个数字的和、差、乘积和商,并链接到 script 标签中的两个 JavaScript 文件。打开 index.html 并添加以下代码:I3s少儿编程网-https://www.pxcodes.com

index.htmlI3s少儿编程网-https://www.pxcodes.com

<!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>

这个页面很简单,就不详细说明了。I3s少儿编程网-https://www.pxcodes.com

functions.js 文件中包含将会在第二个脚本中用到的数学函数。打开文件并添加以下内容:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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 的值,以及调用前面那些函数并显示结果:I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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 可以看到所有结果:I3s少儿编程网-https://www.pxcodes.com

I3s少儿编程网-https://www.pxcodes.com

对于只需要一些小脚本的网站,这不失为一种有效的组织代码的方法。但是这种方法存在一些问题:I3s少儿编程网-https://www.pxcodes.com

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

在 ES6 把原生模块添加到 JavaScript 语言之前,社区曾经尝试着提供了几种解决方案。第一个解决方案是用原生 JavaScript 编写的,例如将所有代码都写在 objects 或立即调用的函数表达式(IIFE)中,并将它们放在全局命名空间中的单个对象上。这是对多脚本方法的一种改进,但是仍然存在将至少一个对象放入全局命名空间的问题,并没有使在第三方之间一致地共享代码的问题变得更加容易。 I3s少儿编程网-https://www.pxcodes.com

之后又出现了一些模块解决方案:CommonJS 是一种在 Node.js 实现的同步方法,异步模块定义(AMD)是一种异步方法,还有支持前面两种样式的通用方法——通用模块定义(UMD)。I3s少儿编程网-https://www.pxcodes.com

这些解决方案的出现使我们可以更轻松地以的形式共享和重用代码,也就是可以分发和共享的模块,例如 npm。但是由于存在许多解决方案,并且都不是 JavaScript 原生的,所以需要依靠 Babel、Webpack 或 Browserify之类的工具才能在浏览器中使用。I3s少儿编程网-https://www.pxcodes.com

由于多文件方法存在许多问题,并且解决方案很复杂,所以开发人员对把模块化开发的方法引入 JavaScript 语言非常感兴趣。于是 ECMAScript 2015 开始支持 JavaScript moduleI3s少儿编程网-https://www.pxcodes.com

module 是一组代码,用来提供其他模块所使用的功能,并能使用其他模块的功能。 export 模块提供代码,import 模块使用其他代码。模块之所以有用,是因为它们允许我们重用代码,它们提供了许多可用的稳定、一致的接口,并且不会污染全局命名空间。I3s少儿编程网-https://www.pxcodes.com

模块(有时称为 ES 模块)现在可以在原生 JavaScript 中使用,在本文中,我们一起来探索怎样在代码中使用及实现。I3s少儿编程网-https://www.pxcodes.com

原生 JavaScript 模块

JavaScript 中的模块使用importexport 关键字:I3s少儿编程网-https://www.pxcodes.com

  • import:用于读取从另一个模块导出的代码。
  • export:用于向其他模块提供代码。

接下来把前面的的 functions.js 文件更新为模块并导出函数。在每个函数的前面添加 exportI3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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 模块中检索代码。I3s少儿编程网-https://www.pxcodes.com

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

script.js 中的代码改成下面的样子:I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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)

注意:要通过在花括号中命名单个函数来导入。I3s少儿编程网-https://www.pxcodes.com

为了确保代码作为模块导入,而不是作为常规脚本加载,要在 index.html 中的 script 标签中添加type="module"。任何使用 importexport 的代码都必须使用这个属性:I3s少儿编程网-https://www.pxcodes.com

index.htmlI3s少儿编程网-https://www.pxcodes.com

<script 
  type="module" src="functions.js">
</script>
<script 
  type="module" src="script.js">
</script>

由于受限于 CORS 策略,必须在服务器环境中使用模块,否则会出现下面的错误:I3s少儿编程网-https://www.pxcodes.com

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.

模块与常规脚本不一样的地方:I3s少儿编程网-https://www.pxcodes.com

  • 模块不会向全局(window)作用域添加任何内容。
  • 模块始终处于严格模式。
  • 在同一文件中把同一模块加载两次不会出问题,因为模块仅执行一次
  • 模块需要服务器环境。

模块仍然经常与打包程序(如 Webpack)一起配合使用,用来增加对浏览器的支持和附加功能,但它们也可以直接用在浏览器中。I3s少儿编程网-https://www.pxcodes.com

接下来探索更多使用 importexport 语法的方式。I3s少儿编程网-https://www.pxcodes.com

命名导出

如前所述,使用 export 语法允许你分别导入按名称导出的值。以这个 function.js 的简化版本为例:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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

这样允许你用花括号按名称导入 sumdifferenceI3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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

也可以用别名来重命名该函数。这样可以避免在同一模块中产生命名冲突。在这个例子中,sum 将重命名为 add,而 difference 将重命名为 subtractI3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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

add(1, 2) // 3

在这里调用 add() 将产生 sum() 函数的结果。I3s少儿编程网-https://www.pxcodes.com

使用 * 语法可以将整个模块的内容导入到一个对象中。在这种情况下,sumdifference 将成为 mathFunctions 对象上的方法。I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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

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

原始值、函数表达式和定义、异步函数、类和实例化的类都可以导出,只要它们有标识符就行:I3s少儿编程网-https://www.pxcodes.com

// 原始值
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')

所有这些导出都可以成功被导入。接下来要探讨的另一种导出类型称为默认导出。I3s少儿编程网-https://www.pxcodes.com

默认导出

在前面的例子中我们导出了多个命名的导出,并分别或作为一个对象导入了每个导出,将每个导出作为对象上的方法。模块也可以用关键字 default 包含默认导出。默认导出不使用大括号导入,而是直接导入到命名标识符中。I3s少儿编程网-https://www.pxcodes.com

functions.js 文件为例:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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

script.js 文件中,可以用以下命令将默认函数导入为 sumI3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

import sum from './functions.js'

sum(1, 2) // 3

不过这样做很危险,因为在导入过程中对默认导出的命名没有做任何限制。在这个例子中,默认函数被导入为 difference,尽管它实际上是 sum 函数:I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

import difference from './functions.js'

difference(1, 2) // 3

所以一般**使用命名导出。与命名导出不同,默认导出不需要标识符——原始值本身或匿名函数都可以用作默认导出。以下是用作默认导出的对象的示例:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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

可以用以下命令将其作为 book 导入:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

import book from './functions.js'

同样,下面的例子演示了如何将匿名箭头函数导出为默认导出:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

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

可以这样导入:I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

import anonymousFunction from './functions.js'

命名导出和默认导出可以彼此并用,例如在这个模块中,导出两个命名值和一个默认值:I3s少儿编程网-https://www.pxcodes.com

functions.jsI3s少儿编程网-https://www.pxcodes.com

export const length = 10
export const width = 5

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

可以用以下命令导入这些变量和默认函数:I3s少儿编程网-https://www.pxcodes.com

script.jsI3s少儿编程网-https://www.pxcodes.com

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

calculatePerimeter(length, width) // 30

现在默认值和命名值都可用于脚本了。I3s少儿编程网-https://www.pxcodes.com

总结

模块化编程设计允许我们把代码分成单个组件,这有助于代码重用,同时还可以保护全局命名空间。一个模块接口可以在原生 JavaScript 中用关键字 importexport 来实现。I3s少儿编程网-https://www.pxcodes.com

原文地址:https://www.taniarascia.com/javascript-modules-import-export/I3s少儿编程网-https://www.pxcodes.com

作者:Tania RasciaI3s少儿编程网-https://www.pxcodes.com

译文地址:https://segmentfault.com/a/1190000038275195I3s少儿编程网-https://www.pxcodes.com

更多编程相关知识,请访问:编程学习!!

以上就是详细了解javascript中的modules、import和export的详细内容,更多请关注少儿编程网其它相关文章!I3s少儿编程网-https://www.pxcodes.com

来源:php中文网I3s少儿编程网-https://www.pxcodes.com


相关文章:

支持一下 ( )

详细了解javascript中的modules、import和export

      匿名评论
    • 评论
    人参与,条评论
    详细了解javascript中的modules、import和export

微信公众号

免费视频教程

先知道