【JavaScript】模块化开发

模块化开发是指将复杂的代码拆分为独立的模块,每个模块负责完成特定的功能,不同的模块之间可以通过使用export关键字将代码导出为模块,其他模块可以使用import关键字导入该模块。

import export

javascript 复制代码
//index.js
let title = "小明"
let web = "baidu.com"

/*
let getWeb = () => {
    return "www.baidu.com"
}
*/
let getWeb = () => "www.baidu.com"

export { title, web, getWeb } //将多个变量或函数分别导出
javascript 复制代码
<script type="module">
    //从 index.js 文件中导入 title、web、getWeb 变量/函数
    import { title as webTitle, web, getWeb } from './index.js'

    console.log(webTitle)
    console.log(web)
    console.log(getWeb())
</script>

default

javascript 复制代码
let title = "小明"
let web = "baidu.com"

let getWeb = () => "www.baidu.com"

//将一个对象作为整体导出, 导出的对象包含 title、web、getWeb 三个属性
export default { title, web, getWeb }
javascript 复制代码
<script type="module">
    import obj from "./index.js"

    console.log(obj.title)
    console.log(obj.web)
    console.log(obj.getWeb())
</script>

as

javascript 复制代码
//index.js
let title = "小明"
let web = "baidu.com"
let getWeb = () => "www.baidu.com"
export { title, web, getWeb } //将多个变量或函数分别导出
javascript 复制代码
// import * as obj防止命名冲突
<script type="module">
    import * as obj from "./index.js"

    console.log(obj.title)
    console.log(obj.web)
    console.log(obj.getWeb())
</script>
相关推荐
liliangcsdn7 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero10 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui14 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚16 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴17 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte20 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常22 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常23 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾24 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101827 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端