// Build out our basic SafeString type
function SafeString(string) {
this.string = string;
}
SafeString.prototype.toString = function() {
return "" + this.string;
};
export default SafeString;
我以前从未见过export default。是否有任何等效的东西export default可以更容易理解？
export default 用于从脚本文件导出单个类、函数或原语。
导出也可以写成
export default function SafeString(string) {
this.string = string;
}
SafeString.prototype.toString = function() {
return "" + this.string;
};
这用于在另一个脚本文件中导入此函数
在app.js 中说，你可以
import SafeString from './handlebars/safe-string';
顾名思义，它用于从脚本文件或module中导出函数、对象、类或表达式
实用程序.js
export function cube(x) {
return x * x * x;
}
export const foo = Math.PI + Math.SQRT2;
这可以导入并用作
应用程序.js
import { cube, foo } from 'Utilities';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
或者
import * as utilities from 'Utilities';
console.log(utilities.cube(3)); // 27
console.log(utilities.foo); // 4.555806215962888
当使用 export default 时，这要简单得多。脚本文件只导出一件事。 立方体.js
export default function cube(x) {
return x * x * x;
};
并用作 App.js
import Cube from 'cube';
console.log(Cube(3)); // 27
export default function(){}当函数没有名称时可以使用。一个文件中只能有一个默认导出。另一种方法是命名导出。
此页面详细描述export default了我认为非常有用的module的其他详细信息。
JavaScript 中的“导出默认值”是什么？
在默认导出中，导入的命名是完全独立的，我们可以使用我们喜欢的任何名称。
我将用一个简单的例子来说明这一行。
假设我们有三个module和一个index.html文件：
export function hello() {
console.log("Modul: Saying hello!");
}
export let variable = 123;
export function hello2() {
console.log("Module2: Saying hello for the second time!");
}
export let variable2 = 456;
module3.js
export default function hello3() {
console.log("Module3: Saying hello for the third time!");
}
<script type="module">
import * as mod from './modul.js';
import {hello2, variable2} from './modul2.js';
import blabla from './modul3.js'; // ! Here is the important stuff - we name the variable for the module as we like
mod.hello();
console.log("Module: " + mod.variable);
hello2();
console.log("Module2: " + variable2);
blabla();
</script>
输出是：
modul.js:2:10 -> Modul: Saying hello!
index.html:7:9 -> Module: 123
modul2.js:2:10 -> Module2: Saying hello for the second time!
index.html:10:9 -> Module2: 456
modul3.js:2:10 -> Module3: Saying hello for the third time!
所以更长的解释是：
如果您想为module导出单个内容，则使用“导出默认值”。
所以重要的是“从'./modul3.js'导入blabla ”——我们可以说：
“从 './modul3.js导入pamelanderson ”，然后pamelanderson();. 当我们使用 'export default' 时，这将工作得很好，基本上就是这样 -当它是 default 时，它允许我们随意命名它。
PS：如果你想测试示例 - 先创建文件，然后在浏览器中允许CORS -> 如果你使用 Firefox 在浏览器的 URL 中输入：about:config -> 搜索“privacy.file_unique_origin” - > 将其更改为“false” -> 打开 index.html -> 按 F12 打开控制台并查看输出 -> 享受，不要忘记将 CORS 设置恢复为默认值。
PS2：对不起，愚蠢的变量命名
更多信息在link2medium和link2mdn 中。
如此MDN 页面所述
有两种不同类型的导出，命名的和默认的。每个module可以有多个命名导出，但只有一个默认导出 [...] 命名导出可用于导出多个值。导入时，必须使用对应对象的相同名称。但默认导出可以使用任何名称导入
例如：
let myVar; export default myVar = 123; // in file my-module.js
import myExportedVar from './my-module' // we have the freedom to use 'import myExportedVar' instead of 'import myVar' because myVar was defined as default export
console.log(myExportedVar); // will log 123