JavaScript 模块

模块(Modules)

JavaScript 模块允许您将代码分解成单独的文件。

这会使维护代码库更加容易。

模块是使用 import 语句从外部文件导入的。

模块还依赖于 <script> 标签中的 type="module"

实例

<!DOCTYPE html>
<html lang="en">

<body>
    <p id="demo"></p>
    <script type="module">
        import message from "/demo/js/message.js";
        document.getElementById("demo").innerHTML=message();
    </script>
</body>
</html>

导出

带有函数变量的模块可以存储在任何外部文件中。

导出有两种类型:命名导出默认导出

命名导出(Named Exports)

让我们创建一个名为 person.js 的文件,并在其中填充我们要导出的内容。

您可以通过两种方式创建命名导出。一种是逐个内联创建,另一种是在文件底部一次性全部创建。

逐个内联创建:person.js

export const name = "Bill";
export const age = 19;

在文件底部一次性创建:

person.js

const name = "Bill";
const age = 19;

export {name, age};

默认导出(Default Exports)

让我们创建另一个名为 message.js 的文件,并用其演示默认导出。

一个文件中只能有一个默认导出。

实例

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};

export default message;

两种方式将模块导入到文件中,具体取决于它们是命名导出还是默认导出。

命名导出是使用大括号构造的。默认导出不是。

从命名导出中导入

从文件 person.js 导入命名导出:

<!DOCTYPE html>
<html>

<body>

    <h1>JavaScript 模块</h1>

    <p id="demo"></p>

    <script type="module">
        import { name, age } from "/demo/js/person.js";

        let text = "My name is " + name + ", I am " + age + ".";

        document.getElementById("demo").innerHTML = text;
    </script>

</body>

</html>

从默认导出导入

从文件 message.js 导入默认导出:

<!DOCTYPE html>
<html>

<body>

    <h1>JavaScript 模块</h1>

    <p id="demo"></p>

    <script type="module">
        import message from "/demo/js/message.js";

        document.getElementById("demo").innerHTML = message();

    </script>

</body>

</html>

注意

模块仅适用于 HTTP(s) 协议。

通过 file:// 协议打开的网页无法使用导入/导出。

相关推荐
Themberfue1 分钟前
Java多线程详解⑤(全程干货!!!)线程安全问题 || 锁 || synchronized
java·开发语言·线程·多线程·synchronized·
plmm烟酒僧3 分钟前
Windows下QT调用MinGW编译的OpenCV
开发语言·windows·qt·opencv
测试界的酸菜鱼14 分钟前
Python 大数据展示屏实例
大数据·开发语言·python
web行路人22 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00124 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
晨曦_子画24 分钟前
编程语言之战:AI 之后的 Kotlin 与 Java
android·java·开发语言·人工智能·kotlin
Black_Friend32 分钟前
关于在VS中使用Qt不同版本报错的问题
开发语言·qt
子非鱼92142 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂44 分钟前
ajax关于axios库的运用小案例
前端·javascript·ajax
希言JY1 小时前
C字符串 | 字符串处理函数 | 使用 | 原理 | 实现
c语言·开发语言