前端JS模块化对外暴露的三种方法

对外暴露有三种方式,分别时默认暴露、统一暴露、分别暴露。

但值得注意的是,使用import(引入)和export(暴露)关键字只能在模块系统中如vue中使用,不能在普通的js使用。

一.默认暴露

1.在新建的test.js文件中

javascript 复制代码
export default {
  a(){
    console.log(111);
  },
  b(){
    console.log(222);
  }
}

2.在需要使用的页面中

javascript 复制代码
import test from '../../api/test.js'
javascript 复制代码
console.log(test.a()); //111

二.统一暴露

1.在新建的test.js文件中

javascript 复制代码
 function a(){
    console.log('111');
 }
 function b(){
    console.log('222');
 }
 export {a,b}

2.在需要使用的页面中

javascript 复制代码
import {a,b} from '../../api/test.js'
javascript 复制代码
console.log(a()); //111

三.分别暴露

1.在新建的test.js文件中

javascript 复制代码
 export function a(){
    console.log('111');
 }
 export function b(){
    console.log('222');
 }

2.在需要使用的页面中

javascript 复制代码
import {a,b} from '../../api/test.js'
javascript 复制代码
console.log(a()); //111
相关推荐
li35741 天前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj1 天前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel1 天前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel1 天前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
honder试试1 天前
焊接自动化测试平台图像处理分析-模型训练推理
开发语言·python
^Rocky1 天前
JavaScript性能优化实战
开发语言·javascript·性能优化
ponnylv1 天前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
萧邀人1 天前
第一课、Cocos Creator 3.8 安装与配置
开发语言
西陵1 天前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld1 天前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试