javascript es6 module 模块的使用

最新推荐文章于 2023-10-14 10:05:50 发布

夏华东的博客

最新推荐文章于 2023-10-14 10:05:50 发布

阅读量313

点赞数

文章标签： web

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

版权

文章目录

代码结构

在这里插入图片描述

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')
}
export { Fn1 as tempFn1, Fn2, Fn3 }

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

<!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>
    <!-- 引用moudle文件 注：要写 type="module"-->
    <script type="module" src='import.js'></script>
    <script type="module">
        import { Fn3 } from "./export.js"
        Fn3()
    </script>
</body>

</html>

运行index.html ，f12

在这里插入图片描述

夏华东的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javascript es6 module 模块的使用

文章目录代码结构export.jsimport.jsindex.html运行index.html ，f12代码结构export.js// export 用于导出变量和函数的// 导出变量方式1export let name = "张三"export let age = 19// 导出变量方式2let name1 = "李四"let age1 = 21export { name1, age1 }let name2 = "王五"let age2 = 21export { nam
复制链接

扫一扫