前言
前端导出变量或者模块方式主要有以下几种, 每种方式适用于不同的场景
方式
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模块化导出, 适用于服务端导出