ES6 模块化语法

目录

ES6 模块化语法

分别暴露

统一暴露

 ​编辑

默认暴露

ES6 模块化引入方式


ES6 模块化语法

模块功能主要由两个命令构成:export import

export 命令用于规定模块的对外接口(哪些数据需要暴露,就在数据前面加上关键字即可)

import 命令用于输入其他模块提供的功能(一个模块想用另一个模块的功能的时候使用)

分别暴露

统一暴露

 

默认暴露

export default{....}后面跟上你要暴露的数据,可以是任意类型

想要使用里面你的属性和方法就要加上default

ES6 模块化引入方式

1. 通用的导入方式

        引入 m1.js 模块内容

        import * as m1 from "./src/js/m1.js";

        //引入 m2.js 模块内容

        import * as m2 from "./src/js/m2.js";

        //引入 m3.js

        import * as m3 from "./src/js/m3.js";

2. 解构赋值形式

        import {school, teach} from "./src/js/m1.js";

        import {school as guigu, findJob} from "./src/js/m2.js";

        import {default as m3} from "./src/js/m3.js";

3. 简便形式  针对默认暴露

        import m3 from "./src/js/m3.js";

        console.log(m3);

总结

在js中<script src=""></script>和使用import有什么区别

在JavaScript中,<script src=""></script> 和 import 语句都是用于引入外部代码的方式,但它们有一些关键的区别,主要涉及到使用场景、语法、模块系统以及兼容性等方面。

<script src=""></script>
使用场景:
通常用于在HTML文件中直接引入外部的JavaScript文件。
适用于传统的脚本加载方式,也可以用于模块化的脚本(如果使用了合适的模块加载器,比如RequireJS)。
语法:
直接在HTML的<head>或<body>标签内使用<script src="path/to/your/script.js"></script>。
模块系统:
默认不支持ES6模块系统(除非指定了type="module")。
如果要使用ES6模块,可以在<script>标签中添加type="module"属性,例如<script type="module" src="path/to/your/module.js"></script>。
兼容性:
广泛兼容所有现代浏览器。
import
使用场景:
主要用于在JavaScript模块中导入其他模块或功能。
适用于ES6模块系统。
语法:
在JavaScript文件内部使用import语句,例如import { functionName } from 'module-name';或import * as moduleName from 'module-name';。
模块系统:
是ES6模块系统的一部分,支持静态导入(编译时解析依赖)。
可以在同一个文件内多次使用import语句来导入不同的模块或功能。
支持默认导出和命名导出。
兼容性:
需要现代浏览器支持ES6模块,或者通过构建工具(如Webpack、Rollup)和Babel等转译器来兼容旧版浏览器。
区别总结
加载方式:<script src=""></script>是在HTML中直接加载外部脚本,而import是在JavaScript模块内部导入其他模块。
模块系统:<script>标签默认不支持ES6模块,但可以通过添加type="module"来使用ES6模块;import是ES6模块系统的核心特性。
兼容性:<script>标签在所有现代浏览器中都得到广泛支持;import需要现代浏览器支持ES6模块,或者通过构建工具和转译器来兼容旧版浏览器。
使用场景:<script>标签更适合在HTML中加载脚本,而import更适合在JavaScript模块之间导入依赖。
选择使用哪种方式取决于你的项目需求、目标浏览器以及是否使用了构建工具或模块加载器。

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

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

相关文章

【Spring boot】微服务项目的搭建整合swagger的fastdfs和demo的编写

文章目录 1. 微服务项目搭建2. 整合 Swagger 信息3. 部署 fastdfsFastDFS安装环境安装开始图片测试FastDFS和nginx整合在Storage上安装nginxnginx安装不成功排查:4. springboot 整合 fastdfs 的demodemo编写1. 微服务项目搭建 版本总结: spring boot: 2.6.13springfox-boot…

无线电磁波在自由空间的衰减

自由空间损耗&#xff0c;指的是电磁波在空气中传播时候的能量损耗&#xff0c;电磁波在穿透任何介质的时候都会有损耗。在传输路径上的损耗&#xff0c;即为路径损耗。 自由空间路径损耗&#xff08;Free Space Path Loss&#xff09;的基本公式&#xff1a; 简化的自由空间损…

UE5实现可销毁对象的淡化销毁

进入对象材质 设置 的不透明蒙版 不透明蒙版见 UE材质不透明蒙版选项-CSDN博客 默认混合模式(不透明)下无法进行设置&#xff0c;将混合模式修改为 混合模式见 UE5材质混合模式-CSDN博客 新添加Texture sample节点 关于Texture sample&#xff1a;UE5材质Texture Sample …

【Linux学习】【Ubuntu入门】1-7 ubuntu下磁盘管理

1.准备一个U盘或者SD卡&#xff08;插上读卡器&#xff09;&#xff0c;将U盘插入主机电脑&#xff0c;右键点击属性&#xff0c;查看U盘的文件系统确保是FAT32格式 2.右键单击ubuntu右下角图标&#xff0c;将U盘与虚拟机连接 参考链接 3. Ubuntu磁盘文件&#xff1a;/dev/s…

文件的处理(c语言)

首先了解下文件的作用 文件可以把数据直接放在电脑的硬盘上&#xff0c;实现了数据的持久化 什么是文件 文件就是磁盘上的文件。在程序设计中&#xff0c;文件通常有俩种&#xff0c;一种是程序文件&#xff0c;另一种是数据文件&#xff08;这是从文件功能来分类的&#xff…

shell编程之awk

awk 是 Linux 以及 UNIX 环境中现有的功能最强大的数据处理工具。简单地讲&#xff0c; awk 是一种处理文本数据的编程语言。awk 的设计使得它非常适合于处理由行和列组成的文本数据。而在 Linux 或者 UNIX 环境中&#xff0c;这种类型的数据是非常普遍的。 除此之外&#xff…

数据库-基础理论

文章目录 前言一、ORM框架二、ACID原则三、事务Transaction四、N1问题五、Normalization三范式六、FMEA方法论&#xff08;Failure Mode and Effects Analysis&#xff09;七、Profiling和PerformanceSchema查询分析 前言 基础理论 ORM框架、ACID原则、事务Transaction、N1问…

用 Python 从零开始创建神经网络(九):反向传播(Backpropagation)

反向传播&#xff08;Backpropagation&#xff09; 引言1. 分类交叉熵损失导数&#xff08;Categorical Cross-Entropy loss derivative&#xff09;2. 分类交叉熵损失导数 - 代码实现3. Softmax激活函数导数&#xff08;Softmax activation derivative&#xff09;4. Softmax激…

Transformer详解及衍生模型GPT|T5|LLaMa

简介 Transformer 是一种革命性的神经网络架构&#xff0c;首次出现在2017年的论文《Attention Is All You Need》中&#xff0c;由Google的研究团队提出。与传统的RNN和LSTM模型不同&#xff0c;Transformer完全依赖于自注意力&#xff08;Self-Attention&#xff09;机制来捕…

C0034.在Ubuntu中安装的Qt路径

Qt安装路径查询 在终端输入qmake -v如上中/usr/lib/x86_64-linux-gnu就是Qt的安装目录&#xff1b;

Swift 实现查找链表入环点:快慢指针法

文章目录 前言摘要描述题解答案题解代码题解代码分析示例测试及结果时间复杂度空间复杂度总结 前言 本题由于没有合适答案为以往遗留问题&#xff0c;最近有时间将以往遗留问题一一完善。 142. 环形链表 II 不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无…

stable-diffusion-webui在conda pycharm中运行

目录 简介下载conda环境配置环境变量修改launch_utils.py文件运行stable-diffusion-webui下载模型文本生成图片参考 简介 stable-diffusion-webui是AI绘画 Stable Diffusion浏览器UI界面&#xff0c;为用户提供了一个简单、直观的方式来利用 Stable Diffusion 技术创建视觉内容…

小柴冲刺软考中级嵌入式系统设计师系列二、嵌入式系统硬件基础知识(7)嵌入式Soc

越努力&#xff0c;越幸运&#xff01; 分享一个晚霞&#xff0c;真的好美啊&#x1f496;&#xff01; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 不得不说&#xff0c;我还是喜欢在人少的地方生活啊。 flechazohttps://www.zhihu.com/people/ji…

【云计算网络安全】解析 Amazon 安全服务:构建纵深防御设计最佳实践

文章目录 一、前言二、什么是“纵深安全防御”&#xff1f;三、为什么有必要采用纵深安全防御策略&#xff1f;四、以亚马逊云科技为案例了解纵深安全防御策略设计4.1 原始设计缺少安全策略4.2 外界围栏构建安全边界4.3 访问层安全设计4.4 实例层安全设计4.5 数据层安全设计4.6…

产业用机器人中的旋转花键若损伤有何影响?

旋转花键在产业用机器人中是关键的组件之一&#xff0c;如果机器人中的旋转花键损坏&#xff0c;会对机器人的运行和性能产生一定影响。以下是可能的影响&#xff1a; 1、功能受限&#xff1a;旋转花键用于连接两个旋转部件&#xff08;例如电机轴和传动轴&#xff09;&#xf…

基于STM32的火灾报警装置的Proteus仿真

文章目录 一、火灾报警1.题目要求2.思路2.1 主控2.2 传感器2.3 设定阈值--按键2.4 报警和通风2.5 OLED显示2.6 电源部分2.7 远程终端 3.仿真3.1 未仿真时3.2 仿真开始&#xff0c;界面13.3 切换界面23.4 切换界面3 4.仿真程序4.1 程序说明4.2 主函数4.3 OLED显示函数 二、总结 …

人脸检测开源项目介绍【持续更新】

DeepFace 介绍&#xff1a;DeepFace是一个轻量级的人脸识别和面部属性分析框架&#xff0c;专为Python设计。它集成了多种前沿的深度学习模型&#xff0c;包括VGG-Face、FaceNet、OpenFace、DeepFace、DeepID、ArcFace、Dlib、SFace和GhostFaceNet等&#xff0c;能够进行年龄、…

RabbitMQ 之 死信队列

一、死信的概念 先从概念解释上搞清楚这个定义&#xff0c;死信&#xff0c;顾名思义就是无法被消费的消息&#xff0c;字面意思可以这样理 解&#xff0c;一般来说&#xff0c;producer 将消息投递到 broker 或者直接到 queue 里了&#xff0c;consumer 从 queue 取出消息进行…

使用 LSTM(长短期记忆网络) 模型对时间序列数据(航空旅客人数数据集)进行预测

代码功能 数据准备 加载数据&#xff1a;从公开的航空旅客人数数据集&#xff08;Airline Passengers Dataset&#xff09;中读取时间序列数据。 对数变换和平稳化&#xff1a;对数据应用 log1p 函数减少趋势和波动&#xff0c;使模型更容易学习规律。 归一化处理&#xff1a;…

《操作系统 - 清华大学》5 -2:覆盖技术

文章目录 1. 目标2. 覆盖的基本原理3. 覆盖技术的不足 1. 目标 覆盖技术产生于上世纪80年代和90年代初的时候&#xff0c;在那时候操作系统能力是很弱的&#xff0c;所以说当初目标是要在能够比较小的可用内存中运行比较大的程序&#xff0c;这个比较小&#xff0c;比较大的相对…