前端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
相关推荐
HashTang21 分钟前
不用再配服务器了!这套 Next.js + Cloudflare 模板,一个人搞定全栈出海
前端·后端·边缘计算
liu****21 分钟前
4.基础开发工具(一)
linux·开发语言·1024程序员节
文火冰糖的硅基工坊21 分钟前
[人工智能-大模型-72]:模型层技术 - 模型训练六大步:①数据预处理 - 基本功能与对应的基本组成函数
开发语言·人工智能·python
小龙报26 分钟前
《C语言疑难点 --- 字符函数和字符串函数专题(上)》
c语言·开发语言·c++·算法·学习方法·业界资讯·visual studio
凭君语未可31 分钟前
深度解析Java的多态特性
java·开发语言
Cory.眼34 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
csbysj202042 分钟前
DTD 元素:XML 与 SGML 文档结构解析指南
开发语言
傻童:CPU1 小时前
C语言练习题
c语言·开发语言
前端架构师-老李1 小时前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
极地星光1 小时前
协程:实战与系统集成(高级篇)
开发语言