默认暴露,分别暴露,整体暴露的再次学习及常用知识

最新推荐文章于 2024-03-06 08:58:14 发布

未成年梦想

最新推荐文章于 2024-03-06 08:58:14 发布

阅读量4.7k

点赞数 7

分类专栏： HTML javascript ES6 文章标签： javascript 前端

本文链接：https://blog.csdn.net/u014582342/article/details/124787058

版权

javascript 同时被 3 个专栏收录

89 篇文章 2 订阅

订阅专栏

HTML

76 篇文章 2 订阅

订阅专栏

ES6

18 篇文章 1 订阅

订阅专栏

三个暴露相同点

可以理解为都是暴露出一个对象给其他使用!

无论是哪一个暴露方式,想要直接获取到暴露出去的对象,可以使用

import * as 名称 from "xxx.js"
//比如
import * as $API from "xxx.js"

默认暴露

默认暴露js代码里面,只可以有一个默认暴露(也就是只能由一个export default出现)否则出现Uncaught SyntaxError: Identifier '.default' has already been declared (at 1.js:2:8)报错
暴露出一个对象,直接就可以拿来使用

1.js内容

export default {
    a:10,
    b:100
}
//相当于向外暴露一个对象,对象当中只有一个default属性,值为暴露对象的值
// 上面暴露相当于是暴露下方对象给其他使用
{
    default:{
        a:10,
        b:100
    }
}

1.html内容

<body>
    <script type="module">
        // 默认暴露
        // 代码等同于 import {default as content} from "./1.js"
        import content from "./1.js"
        
        console.log(content);//输出{a: 10, b: 100}
    </script>
</body>

部分(分别)暴露

将暴露的内容汇聚成为一个对象给其他使用

1.js内容

export let a = 10;
export var b = function() { };
// 代码等同于暴露下方对象
{
    a: 10,
    b: function(){ }
}

1.html内容

<body>
    <script type="module">
        //部分(分别)暴露 并且进行解构赋值
        import { a, b } from "./1.js";
        console.log(a,b);//10   ƒ () { }
    </script>
</body>

整体(统一)暴露

1.js内容

//整体暴露
const a = 10;
let b = 10;
var c = {
    age:"18"
}
// 整体(统一)暴露只可以写成es6简写模式!
export {
    a,
    b,
    c
}
//整体(统一)暴露相当于暴露下方对象给其他使用
{
    a:10,
    b:10,
    c:{
        age:18
    }
}

1.html内容

<body>
    <script type="module">
        //整体暴露
        import * as content from "./1.js";
        console.log(content);//输出结果看图
    </script>
</body>

点开后

三种暴露获取暴露出去的对象

import * as 名称 from "xxx.js"
//比如
import * as $API from "xxx.js"

默认暴露

//js代码
	//默认暴露
export default {
    a:10,
    b:100
}
//html代码
<script type="module">
    // 默认暴露
    import * as content from "./1.js"
    console.log(content);//如图
</script>

输出结果如图

部分(分别)暴露

//js代码
	//部分(分别)暴露
export var a = 10;
export var b = function() { };

//html代码
<script type="module">
    // 部分(分别)暴露
    import * as content from "./1.js"
    console.log(content);//如图
</script>

输出结果如图

整体(统一)暴露

//js代码
	//整体暴露
const a = 10;
let b = 10;
var c = {
    age:"18"
}
export {
    a,
    b,
    c
}

//html代码
<script type="module">
    // 整体暴露
     import * as content from "./1.js"
     console.log(content);//如图
</script>

输出结果如图

默认暴露的引入并暴露一次性完成

在做项目的时候,有时候需要把所有的默认暴露的模块整合到一个模块当中去以便后期使用
- 也就是 A.js ,B.js ,C.js ,D.js 模块统一在 All.js 当中引入

用法格式: import { default as 别名名称 } from "模块路径" 针对默认暴露

//代码等同于

// module1.js
export default {
    a(){},
    b(){},
    C(){},
}

// All.js
export {default as module1} from "./module1.js";
//上面一行代码等同于下面二行代码的代码效果
    //1
import {default as module1} from "./module1.js"
    //2
export module1 {
    a(){},
    b(){},
    C(){}
}

或者export * as xxx from "./1.js" 针对分别暴露
后期如果需要使用到 All.js 整合暴露的东西
1. 比如绑定在Vue原型上: import * as $A P I f r o m " . / A l l . j s "; V u e . p r o t o t y p e .$ API = $A P I; 后期 m o d u l e 1 就这样子 t h i s .$ API.module1.a(); this. $A P I . m o d u l e 1 . b (); t h i s .$ API.module1.c();

总结

默认暴露是一个对象default为属性defau1t后面值为值的一个对象只能写一次
部分(分别)暴露是一个对象它是最终暴露出去的时候把所有暴露的变量自动封装到对象当中
整体(统一)暴露是一个对象这个对象是我们自己需要写的，把所有的需要暴露的变量写到我们的对象当中

未成年梦想

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
打赏
1
评论
默认暴露,分别暴露,整体暴露的再次学习及常用知识

三个暴露相同点可以理解为都是暴露出一个对象给其他使用!无论是哪一个暴露方式,想要直接获取到暴露出去的对象,可以使用import * as 名称 from "xxx.js"//比如import * as $API from "xxx.js"默认暴露默认暴露js代码里面,只可以有一个默认暴露(也就是只能由一个export default出现)否则出现Uncaught SyntaxError: Identifier '.default' has already been declar
复制链接

扫一扫