前端导出变量或模块方式详解

205 阅读1分钟

前言

前端导出变量或者模块方式主要有以下几种, 每种方式适用于不同的场景

方式

1. export(命名导出)

使用场景

适用与现代javaScript 项目导出函数和变量, 例如webpack等构建工具 当需要导出多个变量, 函数或者类时, 使用命名导出

示例
// module.js
export const name='也罢'
export function demoFun () {/*....*/}

2. export deault(默认导出)

使用场景

当模块值需要导出单个值(如类, 函数或者对象)时, 使用默认导出可以简化导入语法, 适用于库或者组件的主导出 导入时可以自定义名称

示例
// module.js
export default funtionDemo() {/*.....*/}
import functionDemo as Demo from './xxx'

3. module.exports

使用场景

在Node.js环境中, CommonJS 是模块标准化的标准, 适用于服务器端代码
此导出引入时配合require

示例
// demo.js
class demoController extends Controller {/*....*/}
module.exports = demoController
// 引入
const demoController = require('./demo.js')

4. 通过<script>标签导出

使用场景

在传统的HTML页面中, 可以将变量直接挂载到wwindow对象上
这种方式适合简单的页面或者小型项目, 但储存在命名冲突的风险

示例
<script>
const myName = '也罢'
window.myName = myName
</script>

总结

命名导出 适合导出多个内容,导入时需要花括号
默认导出 适合导出单一主要内容,导入时不需要花括号
CommonJS Node.js模块化导出, 适用于服务端导出