当前位置: 首页 > news >正文

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模块之间导入依赖。
选择使用哪种方式取决于你的项目需求、目标浏览器以及是否使用了构建工具或模块加载器。

相关文章:

ES6 模块化语法

目录 ES6 模块化语法 分别暴露 统一暴露 ​编辑 默认暴露 ES6 模块化引入方式 ES6 模块化语法 模块功能主要由两个命令构成&#xff1a;export 和 import。 ⚫ export 命令用于规定模块的对外接口&#xff08;哪些数据需要暴露&#xff0c;就在数据前面加上关键字即可…...

Gradio学习笔记记录

安装指令&#xff1a;pip install gradio方法介绍 Interface》用于构建一些简单的页面&#xff0c;可以直接用这个指令搞定 形式》接收三个参数分别为处理函数、输入、输出三部分&#xff0c;呈现一般左/上为输入&#xff0c;右或下为输出 fn&#xff1a;将用户界面 &#xff0…...

Node.js的下载与安装(支持各种新旧版本)

目录 1、node官网 2、node软件下载 3、软件安装&#xff08;完整版&#xff09; 1、node官网 Node.js — Download Node.jshttps://nodejs.org/en/download/package-manager 2、node软件下载 按照下图进行选择node版本&#xff08;真心推荐16/18&#xff0c;而是尽量是LTS…...

数据库和缓存的数据一致性 -20241124

问题描述 一致性 缓存中有数据&#xff0c;缓存的数据值数据库中的值缓存中本没有数据&#xff0c;数据库中的值最新值&#xff08;有请求查询数据库时&#xff0c;会将数据写入缓存&#xff0c;则变为上面的“一致”状态&#xff09; “数据不一致”&#xff1a; 缓存的数据值…...

【计算机网络】多路转接之select

系统提供select()来实现多路转接 IO 等 拷贝 -> select()只负责等待&#xff0c;可以一次等待多个fd select()本身没有数据拷贝的能力&#xff0c;拷贝要read()/write()来完成 一、select的使用 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exc…...

Linux命令思维导图

看到一个很不错的Linux命令思维导图&#xff0c;用机器翻译了一下&#xff0c;建议收藏备用。 附上英文版&#xff1a;...

自然语言处理(词嵌入和词向量的使用)

一、实验目的 1.了解词嵌入和词向量的基本概念及其在自然语言处理中的应用。 2.掌握使用One-Hot编码和Word2Vec模型构建词向量的方法。 3.掌握Doc2Vec模型构建文档向量的方法以及如何计算文档向量之间的相似度。 二、实验内容 &#xff08;1&#xff09;使用One-Hot编码构…...

量子感知机

神经网络类似于人类大脑&#xff0c;是模拟生物神经网络进行信息处理的一种数学模型。它能解决分类、回归等问题&#xff0c;是机器学习的重要组成部分。量子神经网络是将量子理论与神经网络相结合而产生的一种新型计算模式。1995年美国路易斯安那州立大学KAK教授首次提出了量子…...

[HarmonyOS] 解决HMRouter路由地址无法抽取的问题

解决HMRouter路由地址无法抽取的问题 背景 最近开始学习HarmonyOS开发&#xff0c;搭建项目的时候采用了 HMRouter 路由框架&#xff0c;在项目里使用到路由跳转&#xff0c;官方链接在这&#xff1a; https://gitee.com/hadss/hmrouter/blob/master/HMRouterLibrary/README…...

七天掌握SQL--->第四天:事务处理与并发控制

# 7天掌握SQL - 第四天&#xff1a;事务处理与并发控制 ## 目标 - 学习事务处理的基本概念&#xff0c;如ACID特性。 - 掌握并发控制的方法&#xff0c;如锁机制、事务隔离级别等。 - 通过实际案例练习事务处理和并发控制。 ## 1. 事务处理的基本概念 事务处理是数据库管理系…...

Docker学习笔记整理

这周不知道写点啥内容做个分享&#xff0c;但还是秉持学会分享的精神&#xff0c;粗略放一些Docker相关的问题和解答吧&#xff0c;后面有机会再补补再深挖深挖o(>﹏<)o 1. 容器VS虚拟机 虚拟机是一种带环境安装的解决方案&#xff08;资源完全隔离&#xff09;,有以下缺…...

PIMPL模式和D指针

一、PIMPL模式概念&#xff1a; Pimpl&#xff08;pointer to implementation, 指向实现的指针&#xff09;是一种用来对“类的接口与实现”进行解耦合的方法。就是将真正的实现细节的Implementor从类定义的头文件中分离出去&#xff0c;公有类通过一个私有指针指向隐藏的实现类…...

Linux入门系列--文件与目录

一、介绍 在Linux中&#xff0c;有着一句话&#xff0c;叫做&#xff1a;一切皆文件。也就是任何东西都是以文件的形式存储的。 目录结构 bin&#xff1a;全程binary&#xff0c;含义是二进制。该目录中存储的都是一些二进制文件。我们学过C/C&#xff0c;其实也都知道机器能…...

论文阅读——Intrusion detection systems using longshort‑term memory (LSTM)

一.基本信息 论文名称&#xff1a;Intrusion detection systems using longshort‑term memory (LSTM) 中文翻译&#xff1a;基于长短期记忆(LSTM)的入侵检测系统 DOI&#xff1a;10.1186/s40537-021-00448-4 作者&#xff1a;FatimaEzzahra Laghrissi1* , Samira Douzi2*, Kha…...

平面点排序(结构体专题)

(1) 题目描述 平面上有n个点&#xff0c;坐标均为整数。请按与坐标原点&#xff08;0,0&#xff09;距离的远近将所有点排序输出。可以自己写排序函数&#xff0c;也可以用qsort库函数排序。 输入描述 输入有两行&#xff0c;第一行是整数n&#xff08;1<n<10)&#xff…...

QT 实现仿制 网络调试器(未实现连接唯一性) QT5.12.3环境 C++实现

网络调试助手&#xff1a; 提前准备&#xff1a;在编写代码前&#xff0c;要在.pro工程文件中&#xff0c;添加network模块。 服务端&#xff1a; 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QtWidgets> #inclu…...

搜索引擎中广泛使用的文档排序算法——BM25(Best Matching 25)

在搜索场景中&#xff0c;BM25能计算每个文档与查询的匹配度&#xff0c;从中找出最相关的文档&#xff0c;并按相关性高低排序展示。 要理解BM25&#xff0c;需要掌握以下几个关键概念&#xff1a; 1. 词频&#xff08;Term Frequency, TF&#xff09;&#xff1a;某关键词在文…...

文件上传需要考虑的安全性问题及解决方案

恶意文件上传&#xff1a;攻击者可能上传包含恶意代码的文件&#xff0c;如病毒、木马等&#xff0c;这些文件被服务器执行后&#xff0c;可能完全控制服务器或破坏服务器安全。为避免这种情况&#xff0c;应实施严格的文件验证策略&#xff0c;只允许特定的安全文件类型上传&a…...

论文笔记:Retrieval-Augmented Generation for Knowledge-Intensive NLP Tasks

1. 挑战/问题&#xff08;Challenges/Issues&#xff09;&#xff1a; 这篇论文探讨了大型预训练语言模型在处理知识密集型自然语言处理&#xff08;NLP&#xff09;任务时面临的挑战。尽管这些模型在参数中存储了大量事实知识&#xff0c;并在微调后能够在下游NLP任务中取得很…...

Web 网络安全

一. 浏览器系统安全方面&#xff0c;使用多进程方案&#xff0c;而js主线程运行在渲染进程中&#xff0c;渲染进程时运行在沙箱中的&#xff0c;没有对本地OS文件的直接读写权限&#xff0c;所以需要通过IPC与浏览器主线程通信&#xff0c;才可以获取cookie等信息&#xff0c;这…...

Android Gradle 插件和 Android Studio 兼容性

Android Gradle 插件和 Android Studio 兼容性 Android Studio 版本所需的 AGP 版本Ladybug 2024.2.13.2-8.7Ladybug 2024.2.13.2-8.7Koala 2024.1.12024.2.1Jellyfish 2023.3.12024.2.1Iguana 2023.2.13.2-8.3Hedgehog 2023.1.13.2-8.2Giraffe 2022.3.13.2-8.1Flamingo 2022.…...

C++设计模式-策略模式-StrategyMethod

动机&#xff08;Motivation&#xff09; 在软件构建过程中&#xff0c;某些对象使用的算法可能多种多样&#xff0c;经常改变&#xff0c;如果将这些算法都编码到对象中&#xff0c;将会使对象变得异常复杂&#xff1b;而且有时候支持不使用的算法也是一个性能负担。 如何在运…...

【H2O2|全栈】JS案例章节(四)——使用原型的JS工厂模式

目录 前言 开篇语 准备工作 需求 工厂模式 概念 优点 添加元素的新方法 分析案例 HTML代码 JS实现 结束语 前言 开篇语 本系列为短章节&#xff0c;单独讲述部分特殊重点案例&#xff0c;本期讲述使用原型来实现JS的工厂模式。 与HTML和CSS相比&#xff0c;JS加…...

.NET9 - 新功能体验(三)

书接上回&#xff0c;我们继续来聊聊.NET9和C#13带来的新变化。 01、Linq新方法 CountBy 和 AggregateBy 引入了新的方法 CountBy 和 AggregateBy后&#xff0c;可以在不经过GroupBy 分配中间分组的情况下快速完成复杂的聚合操作&#xff0c;同时方法命名也非常直观&#xff0…...

论文概览 |《Journal of Urban Technology》2024 Vol.31 Issue.2

本次给大家整理的是《Journal of Urban Technology》杂志2024年第31卷第2期的论文的题目和摘要&#xff0c;一共包括6篇SCI论文&#xff01; 论文1 Aerial Video Surveillance in a Megacity: A Case Study in Santiago, Chile 大城市中的空中视频监控&#xff1a;智利圣地亚哥…...

Makefile 之 自动化变量

作用范围只在这条规则以及连带规则中&#xff0c;所以其值也只在作用范围内有效。而不会影响规则链以外的全局变量的值。 "$" 表示目标的集合&#xff0c;就像一个数组&#xff0c;"$"依次取出目标&#xff0c;并执于命令。 "$<"和"$&qu…...

【C语言】const修饰符在指针变量中的作用详解

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C语言 文章目录 &#x1f4af;前言&#x1f4af;指针与解引用&#xff1a;基础概念1. 指针变量2. 解引用操作 &#x1f4af;const 修饰指针变量的三种主要情况1. 情况一&#xff1a;int * const p &#xff08;指针本…...

阿里云ECS服务器监控报警配置

背景&#xff1a;服务器偶尔会异常&#xff0c;比如CPU过载&#xff0c;磁盘满&#xff0c;影响使用&#xff0c;人工盯服务器不现实 采用方法&#xff1a;阿里云监控告警功能 步骤&#xff1a; 第一步&#xff1a;登录阿里云服务器 https://account.aliyun.com/login/logi…...

高性能linux服务器运维实战小结 性能调优工具

性能指标 进程指标 进程关系 父进程创子进程时&#xff0c;调fork系统调用。调用时&#xff0c;父给子获取一个进程描述符&#xff0c;并设置新的pid&#xff0c;同事复制父进程的进程描述符给子进程&#xff0c;此时不会复制父进程地址空间&#xff0c;而是父子用相同地址空…...

初识Linux—— 基本指令(下)

前言&#xff1a; 本篇继续来学习Linux的基础指令&#xff0c;继续加油&#xff01;&#xff01;&#xff01; 本篇文章对于图片即内容详解&#xff0c;已同步到本人gitee&#xff1a;Linux学习: Linux学习与知识讲解 Linux指令 1、查看文件内容的指令 cat ​ cat 查看文件…...

【Linux】线程的互斥和同步

【Linux】线程的互斥和同步 线程间的互斥 临界资源&#xff1a;多线程执行共享的资源就叫做临界资源临界区&#xff1a;每个线程内部&#xff0c;访问临界资源的代码&#xff0c;就叫做临界区互斥&#xff1a;任何时刻&#xff0c;互斥保证有且只有一个执行流进入临界区&#…...

详解Oracle表的类型(二)

1.引言&#xff1a; Oracle数据库提供了多种表类型&#xff0c;以满足不同的数据存储和管理需求。本博文将对Oracle分区表及使用场景进行详细介绍。 2. 分区表 分区表是Oracle数据库中一种重要的表类型&#xff0c;它通过将表数据分割成多个逻辑部分来提高查询性能、管理灵活…...

VSCode 下载 安装

VSCode【下载】【安装】【汉化】【配置C环境&#xff08;超快&#xff09;】&#xff08;Windows环境&#xff09;-CSDN博客 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/Downloadhttps://code.visualstudio.com/Download 注意&#xff0…...

java中的最小堆

概述 最小堆minHeap指的级别n的每个节点存储的值小于或等于级别n1的子节点的值。因此&#xff0c;根就存储了其中最小的值。 注意节点的值与其他兄弟节点的值之间没有必然关系。 java中最小堆的表示 利用数组 常用的是利用数组minHeap[]表示&#xff0c;将最小堆的节点或值…...

ES实用面试题

一、es是什么&#xff0c;为什么要用它&#xff1f; ES通常是Elasticsearch的简称&#xff0c;它是一个基于Lucene构建的开源搜索引擎。Elasticsearch以其分布式、高扩展性和实时数据分析能力而闻名&#xff0c;广泛用于全文搜索、日志分析、实时监控等多种场景。 基本特点&am…...

数据结构 (7)线性表的链式存储

前言 线性表是一种基本的数据结构&#xff0c;用于存储线性序列的元素。线性表的存储方式主要有两种&#xff1a;顺序存储和链式存储。链式存储&#xff0c;即链表&#xff0c;是一种非常灵活和高效的存储方式&#xff0c;特别适用于需要频繁插入和删除操作的场景。 链表的基本…...

数据结构:链表进阶

链表进阶 1. ArrayList的缺陷2. 链表2.1 链表的概念及结构2.2 链表的实现 3.链表面试题4.LinkedList的使用5.1 什么是LinkedList4.2 LinkedList的使用 5. ArrayList和LinkedList的区别 1. ArrayList的缺陷 通过源码知道&#xff0c;ArrayList底层使用数组来存储元素&#xff1…...

Can UDS 学习记录

目录 Can UDS 学习记录10 03 响应否定响应22和24 的说明27服务肯定响应抑制位 Can UDS 学习记录 10 03 响应 否定响应22和24 的说明 0x22条件不正确&#xff0c;就是不满足服务端的运行条件0x24请求顺序错误&#xff1b;停止例程的请求必须在开始例程后面才可以&#xff0c;请…...

C 语言实现的优先级队列

C 语言实现的优先级队列 priorityqueue.h /******************************************************************************* * Copyright © 2024-2025 Light Zhang <mapawarehotmail.com>, MapAware, Inc. * * ALL RIGHTS RESERVED. …...

卷积神经网络(CNN)中的批量归一化层(Batch Normalization Layer)

批量归一化层&#xff08;BatchNorm层&#xff09;&#xff0c;或简称为批量归一化&#xff08;Batch Normalization&#xff09;&#xff0c;是深度学习中常用的一种技术&#xff0c;旨在加速神经网络的训练并提高收敛速度。 一、基本思想 为了让数据在训练过程中保持同一分布…...

HDR视频技术之四:HDR 主要标准

HDR 是 UHD 技术中最重要维度之一&#xff0c;带来新的视觉呈现体验。 HDR 技术涉及到采集、加工、传输、呈现等视频流程上的多个环节&#xff0c;需要定义出互联互通的产业标准&#xff0c;以支持规模化应用和部署。本文整理当前 HDR 应用中的一些代表性的国际标准。 1 HDR 发…...

下一个阶段的生产工具更换:

开源竞争&#xff1a; 当你无法彻底掌握技术的时候&#xff0c;就开源这个技术&#xff0c;让更多的人了解这个技术&#xff0c;形成更多的技术依赖&#xff0c;你会说&#xff0c;这不就是在砸罐子吗&#xff1f;一个行业里面总会有人砸罐子的&#xff0c;你不如先砸罐子&…...

性能优化--CPU微架构

一 指令集架构 Intel X86, ARM v8, RISC-V 是当今广泛使用的指令架构的实例。 大多数现代架构可以归类为基于通用寄存器的加载和存储型架构&#xff0c;在这种架构下&#xff0c;操作数倍明确指定&#xff0c;只能使用夹在和存储指令访问内存。除提供基本的功能之外&#xff0c…...

3.3_1 差错控制(检错编码)

目录 1、差错来源 全局性 局部性 2、数据链路的差错控制 ​编辑奇偶校验码 CRC循环冗余码 接收端检错过程 1、差错来源 概括来说&#xff0c;传输中的差错都是由于噪声引起的。 全局性 由于线路本身电气特性所产生的随机噪声(热噪声)&#xff0c;是信道固有的&#xf…...

2024年wordpress、d-link等相关的多个cve漏洞poc

⚠️ 漏洞 ✅ CVE-2024-10914 在D-Link DNS-320、DNS-320LW、DNS-325和DNS-340L中发现的漏洞&#xff0c;版本直到20241028 GET /cgi-bin/account_mgr.cgi?cmdcgi_user_add&name%27;id;%27 HTTP/1.1✅ CVE-2024-11305 在Altenergy Power Control Software中发现的关键…...

影视后期学习Ⅰ~

1.DV是光盘 磁带 2.序列就是我们要制作的一个视频。 打开界面显示&#xff1a; 一号面板放的是素材&#xff0c;二号面板叫源监视器面板&#xff08;它的名字需要记住&#xff09;在一号面板点击文件之后&#xff0c;进入二号面板&#xff0c;在二号面板预览没问题后&#xf…...

如何安全删除 Linux 用户帐户和主目录 ?

Linux 以其健壮性和灵活性而闻名&#xff0c;是全球服务器和桌面的首选。管理用户帐户是系统管理的一个基本方面&#xff0c;包括创建、修改和删除用户帐户及其相关数据。本指南全面概述了如何在 Linux 中安全地删除用户帐户及其主目录&#xff0c;以确保系统的安全性和完整性。…...

【软件测试】设计测试用例的万能公式

文章目录 概念设计测试用例的万能公式常规思考逆向思维发散性思维万能公式水杯测试弱网测试如何进行弱网测试 安装卸载测试 概念 什么是测试用例&#xff1f; 测试⽤例&#xff08;Test Case&#xff09;是为了实施测试⽽向被测试的系统提供的⼀组集合&#xff0c;这组集合包…...

【MySQL】字符集与排序规则

1. 字符集 1.1 一些重要的字符集 1.1.1 ASCII 共收录128个字符&#xff0c;包括空格、标点符号、数字、大小写字母和一些不可见字符。由于总共才128个字符&#xff0c;所以可以使用1个字节来进行编码 1.1.2 ISO-8859-1 共收录 256 个字符&#xff0c;是在 ASCII 字符集的基…...

局域网与广域网:探索网络的规模与奥秘(3/10)

一、局域网的特点 局域网覆盖有限的地理范围&#xff0c;通常在几公里以内&#xff0c;具有实现资源共享、服务共享、维护简单、组网开销低等特点&#xff0c;主要传输介质为双绞线&#xff0c;并使用少量的光纤。 局域网一般是方圆几千米以内的区域网络&#xff0c;其特点丰富…...