🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名 →

JavaScript ES2015:模块 Module

你可以创建 JavaScript 模块,在模块里你可以导出需要导出的东西,然后在其它的地方,你可以导入模块提供的东西。

创建模块

创建一个模块,可以放在一个单独的 js 文件里,比如 talk.js:

let greeting = 'hello'

export { greeting }

现在,talk.js 就是一个模块,导出模块里的东西使用的是 export ,这里我们导出来变量 greeting 。

使用模块

使用模块就是导入模块提供的东西,创建一个 js 文件,名字是 index.js,在这个文件里:

import { greeting } from './talk'

console.log(greeting)

执行上面的代码,会在控制台上输出 “hello”,这个值是在 talk 模块里导出的 greeting 表示的东西。在 index.js 里,我们用 import 导入了 talk 模块里导出的 greeting 。

在模块里导出多个东西

这样编辑一下 talk.js:

let greeting = 'hello'
let goodbye = 'see ya ~'

export { greeting, goodbye }

现在这个模块里导出了两样东西,greeting 与 goodbye 。

导入模块里的多个东西

再这样编辑一下 index.js:

import { greeting, goodbye } from './talk'
console.log(greeting, goodbye) // hello see ya ~

在 index.js 里,导入了来自 talk 模块的 greeting 与 goodbye。

模块里的默认导出

模块里可以提供一个默认导出的东西,在 talk.js 里:

let greeting = 'hello'
let goodbye = 'see ya ~'

const greet = (name) => {
  return `hello ${name}.`
}

export { greeting, goodbye }
export default greet

用 export default 导出了一个默认的东西,就是 greet 函数。

导入模块默认的东西

import greet, { greeting, goodbye } from './talk'

console.log(greeting, goodbye)
console.log(greet('ninghao'))

导入模块默认导出的东西不需要在它周围使用大括号({})。

使用别名

导出与导入的时候都可以使用别名。用的关键词是 as:

import greet, { greeting as g, goodbye as b } from './talk'

console.log(g, b)
console.log(greet('ninghao'))

参考资料

  1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statem...
  2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statem...
函数式编程 JavaScript
微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点