前言

• 接 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

總結

以上是生活随笔為你收集整理的js模块化：默认导出 export default的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。