前言

• 編寫js模塊必須要搞懂import和export的關系
• Google Chrome 84.0.4147.135 (正式版本) （64 位） (cohort: Stable Installs Only)
• 修訂版本 c42bd09b3f24da1698d71d3b4f57402137163566-refs/branch-heads/4147@{#1102}
• 操作系統 Windows 10 OS Version 2004 (Build 19041.450)
• JavaScript V8 8.4.371.23
  注：使用命令 chrome://version/ 查看 JavaScript 版本
• 以 es6 的標準為主

分析

• require 為 es6 以前的模塊化解決方案。這里不介紹了。
• export 是導出模塊。
• import 是導入模塊。
• export 和 import 搭配使用。

export

export語法用于導出類、函數、對象、指定文件（或模塊）的原始值。

import

import語法用于導入類、函數、對象、指定文件（或模塊）的原始值。

導出、導入類

MyClass.js

class MyClass {}MyClass.prototype.hello = function() {console.log("hello"); }export { MyClass };

• 導出名為 MyClass 的類，且 MyClass 處在導出第 1 位

jsTestMyClass.html

<script type="module">import { MyClass } from "./MyClass.js";let myClass = new MyClass();myClass.hello(); </script>

• 導入名為 MyClass 的類，且 MyClass 處在導入第 1 位

另：

• 導出的花樣很多，這也是為啥要記錄一下的原因。
• 一定要記住：怎么導出的，就要怎么導入。導出和導入是搭配使用的。
• 導出和導入的配對花樣有哪些，后面慢慢補充，一篇記錄不清楚，那就再來一篇。

執行效果：

導出、導入函數

MyFunction.js

function hello() {console.log("hello"); }export { hello };

• 導出名為 hello 的函數，且 hello 處在導出第 1 位

jsTestMyFunction.html

<script type="module">import { hello } from "./MyFunction.js";hello(); </script>

• 導入名為 hello 的函數，且 hello 處在導入第 1 位

執行效果：

導出、導入對象

MyObject.js

function hello () {console.log("hello"); } var obj = { hello:hello };export { obj };

• 導出名為 obj 的對象，且 obj 處在導出第 1 位

jsTestMyObject.html

<script type="module">import { obj } from "./MyObject.js";console.log(obj);obj.hello(); </script>

• 導入名為 obj 的對象，且 obj 處在導入第 1 位

執行效果：

• 從打印 obj 的結果看，obj 是個對象

導出、導入指定文件（或模塊）的原始值

JsModule.js

function hello() {console.log("hello"); }function run() {console.log("run"); }function jump() {console.log("jump"); }export { hello, run, jump };

• 導出名為 hello 的函數，且 hello 處在導出第 1 位
• 導出第 2 位是 run 函數
• 導出第 3 位是 jump 函數

MyModule.js

export { hello } from "./JsModule.js";

• 導出名為 hello 的函數，且 hello 處在導出第 1 位
• hello 函數是從 JsModule.js 導入的

jsTestMyModule.html

<script type="module">import { hello } from "./MyModule.js";hello(); </script>

• 導入名為 hello 的函數，且 hello 處在導入第 1 位
• hello 函數是從 MyModule.js 導入的

執行效果：

為了理解簡單，均使用了導入導出第 1 位的模塊。

參考

https://www.cnblogs.com/libin-1/p/7127481.html
https://blog.csdn.net/youlinhuanyan/article/details/105211072

總結

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

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