js模块化：默认导出 export default
前言
- 接 js模块化：require、import和export
- 研究一下默认导出
- 默认导出形式1：export { xx as default }
- 默认导出形式2：export default { xx }
export default
在使用 export 导出后，import 导入时需要使用花括号对应模块。使用 export default 后，可以省略花括号。
示例
DefaultMyClass.js
class MyClass {}
MyClass.prototype.hello = function() {
console.log("hello");
}
export { MyClass as default };
- 导出的 MyClass 类是默认导出
jsTestDefaultMyClass.html
<script type="module">
import TheClass from "./DefaultMyClass.js";
console.log(TheClass);
let theClass = new TheClass();
theClass.hello();
script>
- MyClass 类是默认导出，那就特殊一些，不用花括号了。
- MyClass 类是默认导出，更加特殊的是，名字可以随便起，叫 TheClass 也可以。
执行效果：
换个默认导出试试
DefaultMyClass.js
class MyClass {}
MyClass.prototype.hello = function() {
console.log("hello");
}
class NewClass {}
NewClass.prototype.hello = function() {
console.log("new hello");
}
export { MyClass, NewClass as default };
- 导出的 NewClass 类是默认导出
jsTestDefaultMyClass.html
<script type="module">
import TheClass from "./DefaultMyClass.js";
console.log(TheClass);
let theClass = new TheClass();
theClass.hello();
script>
- 代码没有变，但是执行结果变量。改为调用 NewClass 的 hello 方法了。
执行效果：
我还用 MyClass 呢
DefaultMyClass.js
class MyClass {}
MyClass.prototype.hello = function() {
console.log("hello");
}
class NewClass {}
NewClass.prototype.hello = function() {
console.log("new hello");
}
export { MyClass, NewClass as default};
- 不解释了
jsTestDefaultMyClass.html
<script type="module">
import TheClass, { MyClass } from "./DefaultMyClass.js";
console.log(TheClass);
let theClass = new TheClass();
theClass.hello();
console.log(MyClass);
let myClass = new MyClass();
myClass.hello();
script>
执行效果：
有干扰这么办
DefaultMyClass.js
class MyClass {}
MyClass.prototype.hello = function() {
console.log("hello");
}
class NewClass {}
NewClass.prototype.hello = function() {
console.log("new hello");
}
class GreyClass {}
GreyClass.prototype.hello = function() {
console.log("grey hello");
}
export { GreyClass, NewClass as default, MyClass};
jsTestDefaultMyClass.html
<script type="module">
import TheClass, { GreyClass as NewGreyClass, default as NewClass, MyClass } from "./DefaultMyClass.js";
console.log(TheClass);
let theClass = new TheClass();
theClass.hello();
console.log(NewGreyClass);
let greyClass = new NewGreyClass();
greyClass.hello();
console.log(NewClass);
let newClass = new NewClass();
newClass.hello();
console.log(MyClass);
let myClass = new MyClass();
myClass.hello();
script>
执行效果：
export default {}
DefaultMyClass.js
class MyClass {}
MyClass.prototype.hello = function() {
console.log("hello in MyClass");
}
function hello() {
console.log("hello function");
}
var obj = { hello:()=>{ console.log("hello in obj"); } };
var age = 18;
export default { MyClass, hello, obj, age};
jsTestDefaultMyClass.html
<script type="module">
import myModules from "./DefaultMyClass.js";
console.log(myModules);
let myClass = new myModules.MyClass();
myClass.hello();
myModules.hello();
myModules.obj.hello();
console.log("age=",myModules.age);
script>
执行效果：
参考
https://www.cnblogs.com/libin-1/p/7127481.html