ES6模块化暴露方法

目录

1 模块化的介绍

2 ES6 暴露语法

2.1 ES6注意问题

2.2 暴露和引入方法

2.2.1 分别暴露和引入

2.2.2 统一暴露和引入

2.2.3 默认暴露和引入

---

1 模块化的介绍

前端JS的模块化主要有 CommonJS 和 ES6 Module 两种。

1. CommonJS 是 Node.js 中使用的一种模块化规范，它通过 require 和 module.exports 来实现模块化的暴露和引入。
2. ES6 Module 是 ECMAScript 6 标准中添加的模块化规范，它提供了一种现代化、标准化的解决方案，使用 import 和 export 关键字来实现模块的引入和暴露。

今天介绍的是：ES6 Module的暴露语法

2 ES6 暴露语法

2.1 ES6注意问题

普通的 JavaScript 脚本中，并不能使用ES6 Module，而是使用<script>标签来加载其他脚本文件

<script src="path/to/script.js"></script>

ES6 Module主要用于在模块系统中实现模块的导出和导入（比如 Vue项目开发）

2.2 暴露和引入方法

2.2.1 分别暴露和引入

分别暴露：每个export都暴露各自的方法或者变量。对于分别暴露，一般使用解构赋值来引入

例子

test.js模块的代码如下：

// test.js
export let a = 100; 
export function sayHello() { 
  console.log("Hello, World"); 
}

app.js文件引入test.js模块的方法如下：

//'./test.js'为文件路径
import { a, sayHello } from './test.js';
console.log(a); // 输出 100
sayHello(); // 输出 "Hello, World"

导入的变量名必须与导出的变量名相匹配，如果想改名字，应该使用 as 关键字，例如：

import { a as myA, sayHello as myHello } from './test.js';

console.log(myA); // 输出 100
myHello(); // 输出 "Hello, World"

2.2.2 统一暴露和引入

统一暴露和分别暴露区别在于：统一暴露只用一个 export  暴露所有的方法和变量

例子

test.js模块的代码如下：

// test.js
let a = 100; 
function sayHello() { 
  console.log("Hello, World"); 
}
export {a,sayHello}

引入方式和统一暴露引入方式一样：

//'./test.js'为文件路径
import { a, sayHello } from './test.js';
console.log(a); // 输出 100
sayHello(); // 输出 "Hello, World"

2.2.3 默认暴露和引入

一个js文件中只能有一个默认暴露，默认暴露的可以是一个常量，函数，对象等。

例子

test.js模块的代码如下：

// test.js
let a = 100; 
function sayHello() { 
  console.log("Hello, World"); 
}
export default { a , sayHello }

默认暴露使用直接引入，可以使用任意合法的变量名来引入该默认导出的对象，app.js文件引入test.js模块的方法如下：

// 变量名根据自己的习惯来定义，这里使用myName
//'./test.js'为文件路径
import myName from "./test.js"  //此处引入的也是一个对象
console.log(myName.a) // 100
myName.sayHello() // Hello, World