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

最新推荐文章于 2024-06-09 20:17:27 发布

分析猛如虎，操作菜如鸡

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量392

点赞数

分类专栏：知识文章标签： javascript 前端 html node.js

本文链接：https://blog.csdn.net/Ripe_L/article/details/124394380

版权

知识专栏收录该内容

7 篇文章 2 订阅

订阅专栏

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);

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

分析猛如虎，操作菜如鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端模块化----暴漏与接收数据

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&
复制链接

扫一扫