ES6模块化：export(导出)/import(导入)

最新推荐文章于 2024-10-07 17:32:01 发布

小码哥呀

最新推荐文章于 2024-10-07 17:32:01 发布

阅读量1.4k

点赞数 1

分类专栏： VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_46112274/article/details/122923635

版权

VUE 专栏收录该内容

62 篇文章 9 订阅

订阅专栏

1、ES6模块化：export(导出)/import(导入)

1.1、export(导出)基本使用

直接导出
以对象形式导出

在这里插入图片描述

导出函数
导出类
export default

在这里插入图片描述

aaa.js导出

// 1、以对象形式导出
let name = 'youyuxi'
let age = 18
let height= 1.88

export {name,age,height}

// 2、直接导出
export let name1='youyuxi'
export let age1=19
export let height1=1.78

// 3、导出函数
export function mul(num1,num2){
  return num1 * num2;
}
//导出类
export class Person{
  run(){
    console.log('在奔跑');
  }
}

// 4、在同一个模块中只能导出一个export deafult
export default function(argument){
  console.log(argument);
}

在这里插入图片描述

1.2、import(导入)基本使用

在这里插入图片描述

bbb.js导入

// 1、导入{}中定义的变量
import {name,age,height} from './aaa.js'

// 2、直接导入export定义的变量
import {name1,age1,height1} from './aaa.js'
console.log(name1);
console.log(age1);
console.log(height1);

// 3、导入export的函数或类
import {mul,Person} from './aaa.js';
console.log(mul(30,50));

const p = new Person();
p.run();

// 4、导入export default 
import fun from './aaa.js';
fun('你好')

// 5、统一全部导入，（统一导入要导出的所有）
import * as aaa from './aaa.js'
console.log(aaa.name);
console.log(aaa.age);

浏览器打印：

main.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <script src="aaa.js" type="module"></script>
  <script src="bbb.js" type="module"></script>
</body>
</html>

在这里插入图片描述