极客教程什么时候应该使用 ES6 import 的花括号
ES6模块可以带或不带花括号进行导入，因此有必要了解应该在哪些情况下使用花括号。通过澄清导入ES6模块时花括号必要的场景，开发人员可以确保他们的代码以高效和准确的方式编写。
ES6有两种类型的导出：
默认导出：
export default App; //example of default export
...
import App from path...
命名导出：ES6中的花括号{}用于导入命名导出。
export Gfg = 'GeeksforGeeks' //example of named export
...
import {Gfg} from path...
ES6模块是JavaScript内置的模块格式。该模块包含变量、函数、类或对象。如果我们想在其他文件或模块中访问这些内容，我们使用诸如 export 和 import 等关键字。
ES6的导入和导出：
导入： 您可以使用import关键字导入变量、函数或类。
语法：
import x from “path_to_js_file”;
// If you want to import all the members at once
// then you can do that using a ' * ' symbol.
import * as exp from "./convert.js";
导出： 我们可以使用导出声明从JavaScript模块中导出值。这里的值指的是变量、函数、类或对象。
变量的语法：
export let variable_A = 10;
函数的语法：
export function fun_A() { /* … */ };
类的语法：
export class Class_Name {
constructor() {
// Statements
}
}
运行步骤：
步骤 1： 创建一个名为 convert.js 的文件，在其中我们将创建一个名为 convert_dollar_to_rupee 的函数，该函数将把美元金额转换为卢比。
步骤 2：
- 创建一个名为 index.htm 的文件，我们将在其中创建一个简单的网页，包含一个输入框和一个按钮。
- 首先，我们将导入 convert_dollar_to_rupee 函数，该函数将把美元值转换为卢比。
- 我们将在网页上通过弹出窗口显示输出结果。
示例 1： 我们创建一个货币转换应用程序，将美元转换为卢比。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
h2 {
text-align: center;
}
.convert {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input,
select {
padding: .8em;
margin-bottom: 1%;
font-family: sans-serif;
}
select {
cursor: pointer;
}
button {
padding: .5em;
font-size: .8rem;
cursor: pointer;
margin-top: 1%;
}
</style>
</head>
<body>
<h2>Currency Conversion</h2>
<div class="convert">
<input type="number" id="amount"
placeholder="Enter Amount">
<button id="convertButton">
Convert
</button>
<button id="exchangeRate">
Exchange Rate
</button>
</div>
</body>
<script type="module">
import convert_dollar_to_rupee, { MULTIPLIER } from './convert.js';
const amountInput = document.getElementById("amount");
const choice = document.getElementById("choice");
const convertButton = document.getElementById("convertButton");
const exchangeRateButton = document.getElementById("exchangeRate");
let exchangeRate = MULTIPLIER;
// Add event listener to button
convertButton.addEventListener('click', () => {
let amount = amountInput.value;
// Display
alert(convert_dollar_to_rupee(amount));
// Clear the amount input
amountInput.value = "";
})
// Display Exchange Rate
exchangeRateButton.addEventListener("click", () => {
let str = `1 US Dollar equals ${exchangeRate}`;
alert(str); //82.77
})
</script>
</html>
Javascript
// File name: convert.js
// Named Export
export const MULTIPLIER = 82.77;
// Default export
export default function (amount) {
return amount * MULTIPLIER;
}
输出：
在这个例子中，convert.js文件实现的导出类型被称为命名导出。在这种情况下，我们需要添加花括号并确保导入的名称与导出的名称相同，因为你是通过其导出名称来导入特定的内容。
示例2：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Currency Converter</title>
<style>
h2 {
text-align: center;
}
.convert {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
input {
padding: .8em;
margin-bottom: 1%;
font-family: sans-serif;
}
button {
padding: .5em;
font-size: .8rem;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Rupee to Dollar Conversion</h2>
<div class="convert">
<input type="number" id="amount"
placeholder="Enter Amount">
<button id="convertButton">Convert</button>
</div>
<script type="module">
import convert_dollar_to_rupee from './convert.js';
const amountInput = document.getElementById("amount");
const convertButton = document.getElementById("convertButton");
// Add event listener to button
convertButton.addEventListener('click', () => {
let amount = amountInput.value;
// Display
alert(convert_dollar_to_rupee(amount));
// Clear the amount input
amountInput.value = "";
})
</script>
</body>
</html>
Javascript
// File name: convert.js
const MULTIPLIER = 82.77;
export default function (amount) {
return amount * MULTIPLIER;
}
输出：
注意：
在这种情况下，不管你在导入时给它分配什么名称，都没有关系。因为它总是解析为convert.js的默认导出内容。