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

三个暴露相同点

可以理解为都是暴露出一个对象给其他使用!
无论是哪一个暴露方式,想要直接获取到暴露出去的对象,可以使用
```
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 APIfrom"./All.js";Vue.prototype.API from "./All.js"; Vue.prototype.APIfrom"./All.js";Vue.prototype.API = API;后期module1就这样子this.API; 后期module1就这样子this.API;后期module1就这样子this.API.module1.a(); this.API.module1.b();this.API.module1.b(); this.API.module1.b();this.API.module1.c();

总结

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

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

vue项目接口地址暴露_vue组件暴露和.js文件暴露接口操作
1.将同一类型的组件放在一个文件夹下 2.在此文件夹下创建一个index.js 3.在index.js中导入组件,并把他们暴露出去 1.写法一 import studentCourse1 from ' ...
Vue+Element ui el-date-picker默认当前年月日时分秒并且可再次选择
el-date-picker 通常都是时间选择器获取焦点的时候获取当前时间,现在的需求是表单进入时间框默认当前年月日分秒,并且可以再次获取选中时间. 下面是我的解决办法,希望可以帮到你们! 1.首先要 ...
再次学习mysql优化
再次学习mysql优化表的设计规范化(三范式) 添加索引(普通索引.主键索引.唯一索引.全文索引) 分表(水平分割.垂直分割) 读写分离(写add.update.delete) 存储过程对mysq ...
再次学习MOOC《Geogebra的教学应用》的过程记录与体会（1）
再次学习MOOC<Geogebra教学应用>的过程记录与体会(1) 一.为什么再次学习Geogebra教学应用这门MOOC 虽然参加了这门MOOC的第一期的学习,成绩也相当不错,在之后的工 ...
java muki_再次学习 java 类的编译
做JAVA开发的都知道myeclipse, 我们在myeclipse中新建一个类,然后保存, 如何正常的话,那么在项目指定的目录(也就是项目的output目录)就会生成同名的class文件, 可是,我 ...
Java虚拟机启动整体流程和基础学习（内容很多，不可快餐阅读），推理+源码论证
不啰嗦,直接看: ISA指令强关联CPU平台,那么汇编语言也一定强关联CPU平台,而C语言又是对汇编最简单的抽象,也就一定会耦合不同CPU平台的代码,这也就是意味着,在写C/C++项目的时候,必须要考 ...
再次学习基础爬虫，爬取大学排名。
练习基础爬虫.对应的URL:http://www.zuihaodaxue.com/zuihaodaxuepaiming2018.html 分析: 先获取对应的全部代码: 查看一下获取了什么: 主函数中 ...
再次学习javascript中的參数传递
javascript中的全部函数的參数传递都是依照值传递的,做了以下測试: function addTen(num){num +=10;return num; }var count = 20; var ...
git 命令详解_再次学习Git版本控制工具
微信公众号:PHP在线 Git 究竟是怎样的一个系统呢?为什么在SVN作为版本控制工具已经非常流行的时候,还有Git这样一个版本控制工具呢?Git和SVN的区别在哪儿呢?Git优势又在哪呢?下面PHP ...
android tv字体,best登陆「永久地址0365.tv」android默认字体android使用代码使用新的字体的常用代码...
页面类类名称:MainActivity package com.example.android_fonts_test; import android.support.v7.app.ActionBar ...

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

三个暴露相同点

默认暴露

部分(分别)暴露

整体(统一)暴露

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

默认暴露

输出结果如图

部分(分别)暴露

输出结果如图

整体(统一)暴露

输出结果如图

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

总结

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

最新文章

热门文章