es6模块化暴露语法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 一、模块化是什么
• 二、JS module(es6)暴露语法
• • 1.分别暴露
  • 2.统一暴露
  • 3.默认暴露
• 总结

提示：以下是本篇文章正文内容，下面案例可供参考

一、模块化是什么

前端JS的模块化主要有 CommenJS(node)、JS module(es6)两种，今天我们讲的是JS module(es6)的暴露语法

二、JS module(es6)暴露语法

JS module是es6中的语法，用来模块化的开发。使用export、import语法，有三种对外暴露方式：分别暴露、统一暴露、默认暴露。

需要注意的是 JS module并不能在普通的js文件中使用，export和import关键字仅可在模块系统（如vue项目中）中使用，所以不能在普通的js脚本中使用

1.分别暴露

分别暴露，就是允许页面中有多个export，每个export都暴露各自的方法或者变量。
test.js中的模块：

export function a(){
  console.log('a');
}
export function b(){
  console.log('b');
}

引入方法：

import {a,b} from './text.js'
 
a() // 'a'
b() // 'b'

2.统一暴露

统一暴露和分别暴露方法差不多，区别就是分别有多个export，统一只需要一个，他们的import都需要一个对象{ }来接受暴露的对象名。
test.js中的模块：

function a(){
  console.log('a');
}
function b(){
  console.log('b');
}
export {a,b}

引入方法：

import {a,b} from './text.js'
 
a() // 'a'
b() // 'b'

3.默认暴露

默认暴露（export default）和他们的区别就是一个页面只能有一个export暴露方法
test.js中的模块：

export default {
  a(){
    console.log('a');
  },
  b(){
    console.log('b');
  }
}

引入方法：

import qwe from './text.js'
 
qwe.a() // 'a'
qwe.b() // 'b'

总结