javascript es6 module 模块的使用（解决button调用type=“module“的问题）

夏华东的博客

已于 2022-04-08 18:05:51 修改

阅读量1.7k

点赞数 1

文章标签： javascript windows html5

于 2022-04-08 18:05:28 首次发布

本文链接：https://blog.csdn.net/weixin_44493841/article/details/124047818

版权

这篇博客详细介绍了如何在JavaScript ES6模块中导出和导入变量、函数，以及如何在HTML中通过button元素调用模块中的函数。文章通过代码示例展示了通过id绑定按钮调用函数和转换为window全局函数两种方法，并强调了模块导入的静态特性。

摘要由CSDN通过智能技术生成

javascript es6 module 模块的使用（解决button调用type="module"的问题）

文章目录

javascript es6 module 模块的使用（解决button调用type="module"的问题）

代码结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-280g158r-1649412243702)(./javascript%20es6%20module%20模块%20的使用1.png)]

export.js

// export 用于导出变量和函数的
// 导出变量 方式1
export let name = "张三"
export let age = 19
// 导出变量 方式2
let name1 = "李四"
let age1 = 21
export {name1, age1}

let name2 = "王五"
let age2 = 21
export {name2, age2}
// 导出对象
let obj = {
    name: '小明',
    age: 18
}
export {obj}

// 导出函数
export function addFn(a, b) {
    console.log(a + b)
}

// 导出多个函数
function Fn1() {
    console.log('运行Fn1')
}

function Fn2() {
    console.log('运行Fn2')
}

function Fn3() {
    console.log('运行Fn3')
}

function btn1() {
    console.log("点击按钮")
}

export {Fn1 as tempFn1, Fn2, Fn3, btn1}

import.js

// import 用于导入变量和函数的
// 导入变量
import { name, age } from "./export.js"
console.log('你好，我叫' + name + ',今年' + age)
import { name1, age1 } from "./export.js"
console.log('你好，他叫' + name1 + ',今年' + age1)
// 变量取别名
import { name2 as myName, age2 } from "./export.js"
console.log('你好，我别名叫' + myName + ',今年' + age2)

// 导入变量只读，不能修改
// age = 50 // 会报错

// 导入的对象属性是可以修改的
import { obj } from "./export.js"
obj.age = 50
console.log(obj)

// 导入函数
import { addFn } from './export.js'
addFn(10, 20)

// 导入多个函数
import { tempFn1, Fn2 } from "./export.js"
tempFn1()
Fn2()

// module import是静态导入
// 不能使用表达式和变量那些运行时才能看到结果的代码

let path = './export.js'
// import { tempFn1, Fn2 } from path;  //会报错
// if (1 == 1) { import { tempFn1, Fn2 } from "./export.js" }  // 会报错

index.html

button通过id调用module中函数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>moudle的使用示例</title>
</head>

<body>

<button id="bt">
    点击按钮
</button>

<!-- 引用moudle文件 注：要写 type="module"-->
<script type="module" src='import.js'></script>
<script type="module">
    // 导入
    import {Fn3, btn1} from "./export.js"
    // 调用
    Fn3()
    // button调用函数
    // 通过 id 绑定按钮,(否则button无法调用函数btn1)
    let btn2 = document.getElementById('bt')
    btn2.onclick = function () {
        btn1()
    };
</script>

</body>

</html>

button通过window调用module中函数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>moudle的使用示例</title>
</head>

<body>

<button onclick="btn2()">
    点击按钮
</button>

<!-- 引用moudle文件 注：要写 type="module"-->
<script type="module" src='import.js'></script>
<script type="module">
    // 导入
    import {Fn3, btn1} from "./export.js"
    // 调用函数
    Fn3()
    // button调用函数
    // 转为全局函数，才能被button调用。
    window.btn2 = btn1
</script>

</body>

</html>