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

三个暴露相同点

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

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

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 整合暴露的东西

比如绑定在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 from "./All.js"; Vue.prototype. APIfrom"./All.js";Vue.prototype.API = A P I ; 后期 m o d u l e 1 就这样子 t h i s . API; 后期module1就这样子this. API;后期module1就这样子this.API.module1.a(); this. A P I . m o d u l e 1. b ( ) ; t h i s . API.module1.b(); this. API.module1.b();this.API.module1.c(); 总结默认暴露是一个对象default为属性defau1t后面值为值的一个对象只能写一次部分(分别)暴露是一个对象它是最终暴露出去的时候把所有暴露的变量自动封装到对象当中整体(统一)暴露是一个对象这个对象是我们自己需要写的，把所有的需要暴露的变量写到我们的对象当中

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/928081.html

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

发表评论

评论列表（0条）