ES6中模块化详解

一个兜兜转转,从“北深”回到三线城市的小码农,热爱生活,热爱技术,在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号:果冻想

前言

因为ES6中的模块化是将来,所以就必须有必要好好的了解一下,学习一下,这篇文章就简单总结一下ES6中模块的概念,语法和用法。纯属个人总结,不喜勿喷。

下面我将通过a.js、b.js和c.js三个文件把ES6的知识点穿起来。

默认导出

导出语法:

export default 默认导出的成员

样例代码a.js:

// 默认暴露
export default {name: '果冻想',getInfo: function(){return "欢迎关注微信公众号:果冻想";}
}

注意事项:

  • export default 向外暴露的成员,可以使用任意的变量来接收;
  • 在每个模块中,只允许使用唯一一次export defalut,否则会报错;
  • 如果一个模块未export导出,但在另外一个模块中引入了,会返回一个空对象,不会报错。

统一导出

导出语法:

export {a, b, c};

样例代码b.js:

// 统一暴露
let name = '果冻想';function getInfo(){return "欢迎关注微信公众号:果冻想";
}export {name, getInfo};

分别导出

导出语法:

export a
export b

样例代码c.js:

// 分别暴露
export let name = '果冻想';export function getInfo(){return "欢迎关注微信公众号:果冻想";
}

导入方式汇总

直接上代码:

<script type="module">// 1. 通用的导入方式// 引入 a.js 模块内容import * as m1 from "./a.js";console.log(m1.default.name);console.log(m1.default.getInfo());// 引入 b.js 模块内容import * as m2 from "./b.js";console.log(m2.name);console.log(m2.getInfo());// 引入 c.jsimport * as m3 from "./c.js";console.log(m3.name);console.log(m3.getInfo());//2. 解构赋值形式import {name, getInfo} from "./b.js";console.log(name);console.log(getInfo());//3. 简便形式  针对默认暴露import a from "./a.js";console.log(a.name);console.log(a.getInfo());
</script>

在浏览器中如果无法直接运行,安装一个live server插件就OK了。

总结

一天一个小知识点,学到了~

一个兜兜转转,从“北深”回到三线城市的小码农,热爱生活,热爱技术,在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号:果冻想

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/595739.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习数据预处理—统计分析方法

数据预处理 1 数据规范化 量纲&#xff0c;指将一个物理导出量用若干基本量的乘方之积表示出来的表达式。数据的比较需要关注两点——绝对数值和量纲&#xff0c;而特征间因为量纲的存在导致无法直接通过绝对数值比较大小&#xff0c;也就无法判断特征间的重要性。例如若某个…

【SCI绘图】【曲线图系列2 python】多类别标签对比的曲线图

SCI&#xff0c;CCF&#xff0c;EI及核心期刊绘图宝典&#xff0c;爆款持续更新&#xff0c;助力科研&#xff01; 本期分享&#xff1a; 【SCI绘图】【曲线图系列2 python】多类别标签对比的曲线图&#xff0c;文末附完整代码。 1.环境准备 python 3 import proplot as pp…

【PostgreSQL】技术传承:使用Docker快速部署PostgreSQL数据库

前言 PostgreSQL的重要贡献者Simon Riggs因一起坠机事故不幸离世。Simon Riggs是英国著名的软件与服务领导者&#xff0c;也是PostgreSQL的主要开发者和贡献者。事故发生在英国当地时间3月26日13:41分&#xff0c;当时他驾驶的私人通用航空Cirrus SR22飞机在英国达克斯福德机场…

软件无线电原理

常规软件无线电接收器&#xff1a; 首先&#xff0c;来自天线的射频信号被放大&#xff0c;通常射频部分利用一个调谐器将感兴趣的频段区域的信号进行放大。这个放大的射频信号被送入一个混频器。来自本振的信号也被送入混频器&#xff0c;其频率由无线电的调谐控制决定。混频器…

如何自定义项目启动时的图案

说明&#xff1a;有的项目启动时&#xff0c;会在控制台输出下面的图案。本文介绍Spring Boot项目如何自定义项目启动时的图案&#xff1b; 生成字符图案 首先&#xff0c;找到一张需要设置的图片&#xff0c;使用下面的代码&#xff0c;将图片转为字符文件&#xff1b; impo…

Volatile

目录 介绍 Volatile保证可见性的原理 可见性问题 原理 Volatile保证有序性的原理 指令重排 内存屏障 如何解决volatile不保证原子性问题&#xff1f; 由Volatile解决的单例模式中双重检索问题(DCL) 介绍 volatile 是 Java 虚拟机提供的轻量级的同步机制&#xff08;三…

160.相交链表

题目描述 解题思路 ————看评论区大神的思路———— 设「第一个公共节点」为 node &#xff0c;「链表 headA」的节点数量为 aaa &#xff0c;「链表 headB」的节点数量为 bbb &#xff0c;「两链表的公共尾部」的节点数量为 ccc &#xff0c;则有&#xff1a; 头节点 …

llm dpo loss 实现 训练实例

原视频地址 dpo loss 过程代码实现感谢&#xff1a; 过程 代码实现 import paddle from tqdm import tqdmclass RefModel(paddle.nn.Layer):def __init__(self, hidden_size, voc_size):super(RefModel, self).__init__()self.em paddle.nn.Embedding(voc_size, hidden_size)…

C++——栈和队列容器

前言&#xff1a;这篇文章我们将栈和队列两个容器放在一起进行分享&#xff0c;因为这两个要分享的知识较少&#xff0c;而且两者在结构上有很多相似之处&#xff0c;比如栈只能在栈顶操作&#xff0c;队列只能在队头和队尾操作。 不同于前边所分享的三种容器&#xff0c;这篇…

CNAS软件测试公司有什么好处?如何选择靠谱的软件测试公司?

CNAS认可是中国合格评定国家认可委员会的英文缩写&#xff0c;由国家认证认可监督管理委员会批准设立并授权的国家认可机构&#xff0c;统一负责对认证机构、实验室和检验机构等相关机构的认可工作。 在软件测试行业&#xff0c;CNAS认可具有重要意义。它标志着一个软件测试公…

最新在线工具箱网站系统源码

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 系统内置高达72种站长工具、开发工具、娱乐工具等功能。此系统支持本地调用API&#xff0c;同时还自带免费API接口&#xff0c; 是一个多功能性工具程序&#xff0c;支持后台管理、上…

大学教材《C语言程序设计》(浙大版)课后习题解析 | 第十一、十二章

概述 本文主要提供《C语言程序设计》(浙大版) 第十一、十二章的课后习题解析&#xff0c;以方便同学们完成题目后作为参考对照。 专栏直达链接&#xff1a; 《C语言程序设计》(浙大版)_孟俊宇-MJY的博客-CSDN博客​http://t.csdnimg.cn/ZtcgY 一.第十一章&#xff08;指针进…