前端模块化----暴漏与接收数据

最新推荐文章于 2024-05-17 00:36:39 发布

原创最新推荐文章于 2024-05-17 00:36:39 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #node.js

知识专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中使用export和exportdefault来导出常量、函数、对象，以及它们之间的区别和用例。包括单值导出、多值导出、默认导出和批量导入的示例，有助于理解模块化开发的基础。

1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中，export、import可以有多个，export default仅有一个
3、通过export方式导出，在导入时要加{ }，export default则不需要
4、
(1) 输出单个值，使用export default
(2) 输出多个值，使用export
(3) export default与普通的export不要同时使用
案例：

//html代码块——通用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

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

第一种暴露：export——import 相对应的暴露跟接收。

b.js代码块

// 第一种暴露案例：暴露常量：
export let name = 'wangjie'; 
export let age = 20; 

// 第一种暴露案例：暴露方法：
export  function rende (a,b) {
    console.log(a+b);
}

a.js代码块

import {name,age} from './b.js' // 导入
console.log(name,age)

import  {rende} from "./b.js";
rende(1,2)

控制台输出结果在这里插入图片描述

第二种暴露（默认暴露1）export default——import[暴露一个对象或者常量]

b.js代码块

// 第二种 默认暴露 只能有一个[暴露一个常量]
export default {
    name: 'App'
}

a.js代码块

// 第二种暴露(默认暴露，单个暴露)
import obj from './b.js' // 导入
console.log(obj);

在这里插入图片描述

第三种暴露（默认暴露2）export default——import[暴露函数]

b.js代码块

// // 暴露函数
export default function abc(a,b){
console.log(a+b);
}

// // 暴露函数
export default function abc(a,b){
    console.log(a+b);
}

a.js代码块

import fun from './b.js' // 导入
fun(5,6);

控制台结果

在这里插入图片描述

第四种（伪3）：利用通配符*批量接受暴露出来的值。

b.js代码块

// 批量暴露元素     
export let name = 'zhangsan';
export let age = '24';
export let gender = '男';

a.js代码块

// 批量导入
import * as obj from './b.js'
console.log(obj.name);
console.log(obj.age);
console.log(obj.gender);

控制台结果
在这里插入图片描述