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

三个暴露相同点

可以理解为都是暴露出一个对象给其他使用!
无论是哪一个暴露方式,想要直接获取到暴露出去的对象,可以使用
1
2
3
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>

点开后

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

1
2
3

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 $API from “./All.js”; Vue.prototype.$API = $API; 后期module1就这样子this.$API.module1.a(); this.$API.module1.b(); this.$API.module1.c();