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

ES6模块化规范

在没有ES6模块化规范前,有像AMD、CMD这样的浏览器模块化规范,还有像CommonJS这样的服务端模块化规范。
2015年,JS终于推出了官方的模块化规范,为了统一各种规范,我们简称ES6 模块化。
ES6目前作为JS的内置模块化系统,并且在Node.js中也同样支持ES6标准的模块化,但是Node.js 默认的模块化规范就是CommonJS。
其实模块化,就两件事,模块的导出和导入
ES6模块化规范是服务端和浏览端通用的模块化规范

ES6规范化中规定了:

  • 每个JS文件都是一个独立的模块
  • 导入其他模块成员使用import关键字
  • 向外共享模块成员使用export关键字

ES6模块化规范的基本使用

  • 如果要导入自定义模块,需要给出模块的路径名称,.js后缀不可以省略
  • 如果导入内置模块或第三方模块,直接给出模块名称就好
  • 在导入时,会执行模块中的代码

默认导出和默认导入

默认导出语法:使用export和default关键字

默认导入:使用import和from关键字,使用一个对象来接收导入的对象
注意:自定义模块必须加上.js后缀

注意

  • 每个模块中,只允许使用一次默认导出export default

按需导出和按需导入

按需导出的语法:
export后面直接给出要导出的对象

按需导入的语法:

import {s1} from './module/student.js'


对导入的变量进行重命名

导入所有的按需导出的对象,使用通配符并结合as关键字来重命名,所有的对象就都挂载到了这个接收的对象中了,这种写法很少使用

注意:

  • 每个模块可以使用多次按需导出
  • 按需导入的成员名称必须和按需导出的名称保持一致
  • 按需导入时,可以使用as关键字来进行重命名,比如说变量命名冲突
  • 按需导入可以和默认导入一起使用

直接导入并执行模块中的代码

有时只想只想模块中的代码,并不需要其中共享的成员

import './module/student.js'

在浏览器中使用ES6模块化

需要引入一个使用了ES6规范的js文件,同时指定type=“module”

<body><script src="./js/index.js" type="module"></script>
</body>

注意:浏览器支持ES6模块化需要在严格模式下,所以当导入了模块化js文件后,会自动开启严格模式

在Node.js中使用ES6模块化规范

Node.js默认使用的是CommonJS规范,但是也是支持ES6模块化规范的。

在Node.js中使用ES6模块化规范的前提是
确保自己的Node.js的版本是大于v14.15.1
在命令行执行node -v来查看自己的node版本

其次就是在项目的package.json的根节点中添加"type":“module”

相关文章:

ES6模块化规范

在没有ES6模块化规范前&#xff0c;有像AMD、CMD这样的浏览器模块化规范&#xff0c;还有像CommonJS这样的服务端模块化规范。 2015年&#xff0c;JS终于推出了官方的模块化规范&#xff0c;为了统一各种规范&#xff0c;我们简称ES6 模块化。 ES6目前作为JS的内置模块化系统&a…...

红黑树下岗,内核新数据结构上场:maple tree!

在外界看来&#xff0c;Linux 内核的内部似乎变化很少&#xff0c;尤其是像内存管理子系统&#xff08;memory-management subsystem&#xff09;这样的子系统。然而&#xff0c;开发人员时常需要更换内部接口来解决某些长期存在的问题。比如&#xff0c;其中一个问题就是用来保…...

Angular开发之——Angular打包部署项目(04)

一 概述 ng build 构建应用lite-server介绍及安装lite-server部署应用IIS管理器部署应用 二 ng build 构建应用 2.1 执行如下指令构建应用 ng build2.2 构建完成后&#xff0c;会创建一个 dist 文件夹 2.3 直接打开index.html会出错(需要借助于服务器部署) 三 lite-server介…...

深度优先搜索算法思想,题型总结与题目清单(不断更新)

深度优先搜索 深度优先搜索&#xff08;Depth-First Search&#xff0c;简称DFS&#xff09;是一种用于遍历或搜索树或图的算法。这个名称直接来自于这个算法的操作方式&#xff1a;它沿着某一路径深入遍历直到无法继续&#xff0c;然后再回溯进行下一条路径的遍历。 DFS的主要…...

网页三剑客之 CSS

css 在这里不会介绍太多&#xff0c;我们主要重点介绍两个&#xff1a;选择器和盒子模型就够用了。这里看个乐就好了&#xff0c;没有那么多重点&#xff0c;只是简单的认识一下下CSS。 CSS 是什么 CSS 是层叠样式表 (Cascading Style Sheets)的缩写它存在的意义就是&#xf…...

Maven(1)--- Maven入门指南

当然&#xff0c;我可以为你提供Maven的详细介绍&#xff0c;并按照6篇文章的方式进行详细展开。下面是第一篇的内容&#xff0c;采用Markdown格式输出&#xff1a; Maven入门指南 什么是Maven&#xff1f; Maven是一个强大的项目管理工具&#xff0c;被广泛应用于Java项目开…...

C# 实现 Websocket通讯聊天 (管用、超好使,点个赞)

1、背景 WebSocket出现之前&#xff0c;Web端为了实现即时通讯&#xff0c;所用的技术都是Ajax轮询(polling)。轮询是在特定的的时间间隔&#xff08;如每1秒&#xff09;&#xff0c;由浏览器对服务器发出HTTP request&#xff0c;然后由服务器返回最新的数据给客服端的浏览器…...

知识点回顾(一)

1.final,finally ,finalize final?修饰符&#xff08;关键字&#xff09;如果一个类被声明为final&#xff0c;意味着它不能再派生出新的子类&#xff0c;不能作为父类被继承。因此一个类不能既被声明为 abstract的&#xff0c;又被声明为final的。将变量或方法声明为final&…...

verflow属性的常用值详解

什么是overflow 在CSS中&#xff0c;overflow是“溢出”的意思&#xff0c;该属性规定当内容溢出元素框时发生的事情&#xff0c;设置内容是否会被修剪&#xff0c;溢出部分是否会被隐藏&#xff1b;例如当属性值设置为“visible”则内容不会被修剪&#xff0c;为“hidden”则内…...

算法怎么算:贪心算法

总有人在小白面前说&#xff1a;我是搞算法的&#xff0c;不是码农。又或者在想要进阶的时候&#xff0c;有人问你&#xff1a;你懂算法吗&#xff1f; 所有&#xff0c;算法到底是什么&#xff1f; 从目的性来说&#xff1a;它是计算方法&#xff0c;用来达到自己目的的方式…...

【UDS】ISO15765-2之网络时间参数

文章目录 简介分类1. N_As2. N_Ar3. N_Bs4. N_Br5. N_Cs5. N_Cr 总结 ->返回总目录<- 简介 网络层定时参数定义了N_As、N_Ar、N_Bs、N_Br、N_Cs、N_Cr六个参数。 这些时间参数在多帧传输中可以定义在下图的过程中 分类 1. N_As 方向&#xff1a; 发送方->接收方 …...

Mybatis 动态SQL

注解作用SelectProvider动态查询SQLInsertProvider动态新增SQLUpdateProvider动态更新SQLDeleteProvider动态删除SQL Select 与 SelectProvider 只是在定义注解的方式上有所不同, 一个是静态SQL, 一个是动态SQL 。 SelectProvider 是 MyBatis 中的一个注解&#xff0c;用于指定…...

普通二本院校计算机专业应届生,我来分享java后端开发的自学java经历

当我找到实习的时候&#xff0c;就决定要把自己的经验分享给大家。我会分享一下自己的真实经验。当然了&#xff0c;以下内容仅代表我的个人看法&#xff0c;如有不完善的地方还请见谅。接下来我就以下几个方面进行讲解。下面是兴哥的一位粉丝朋友的经历。 1.自我介绍 首先呢…...

windows系统常见的操作命令及用法

来源&#xff1a;用ChatGPT搜索出来的 目录操作命令&#xff1a; dir&#xff1a;查看当前目录下的文件列表。 用法&#xff1a;dir [路径] [/w] [/p] [/a] [/o] cd&#xff1a;切换当前目录到指定路径。 用法&#xff1a;cd [路径] md/mkdir&#xff1a;创建新的目录。 用法…...

【计算机网络】网络命令的使用

文章目录 一、实验目的二、实验工具三、实验要求四、实验过程01 ping 命令的使用应用1&#xff1a;验证本地计算机上是否正确安装了 TCP/IP 协议应用2&#xff1a;测试某个目的主机可达性应用3&#xff1a;键入 ping&#xff0c;查看 ping 的其他参数含义 02 netstat 命令的典型…...

​当互联网与产业的融合成为一种必然,​平台化和商业化不再是必然

当互联网与产业的融合成为一种必然&#xff0c;我们在互联网时代司空见惯的平台化、中心化的发展模式便开始被瓦解。更为确切地说&#xff0c;经典意义上的平台化和中心化的商业模式不再有存在的必要。因为供求两端的对接不再是依靠平台和中心的撮合和中介来实现的&#xff0c;…...

【linux】冯诺依曼体系+操作系统

我们使用的计算机都是由一个个硬件所组成的&#xff0c;那么如何有条不紊的运行呢&#xff1f;那是因为有冯诺依曼体系约束着硬件&#xff0c;而操作系统来管理着他们&#xff0c;从而使得计算机的硬件和软件完美结合。 一、冯诺依曼体系 首先我们得了解什么是冯诺依曼体系结构…...

从0开始 莫比乌斯函数和反演 学习笔记

莫比乌斯 0 前言 建议先看这篇比较简略的文章&#xff08;有大概了解&#xff09; 莫比乌斯函数_为最后的荣光的博客-CSDN博客 再根据个人情况食用本篇博客 1 莫比乌斯函数 1 1 定义 首先对 n n n 唯一分解&#xff1a; 唯一分解&#xff1a; 唯一分解定理一篇就够了_求…...

IntersectionObserver“替代”滚动条监听

概要 IntersectionObserver 接口提供了一种异步观察目标元素与其祖先元素或顶级文档视口&#xff08;viewport&#xff09;交叉状态的方法。其祖先元素或视口被称为根&#xff08;root&#xff09;。 当一个 IntersectionObserver 对象被创建时&#xff0c;其被配置为监听根中…...

Maven下载安装及IDEA配置Maven的超详细教程

Maven下载安装及IDEA配置Maven的超详细教程 1、IntelliJ IDEA 下载、安装及配置过程2、maven下载、安装、配置过程2.1 mavan下载2.2 安装2.3 配置 3、在IDEA中配置Maven3.1 进入设置界面3.2 maven配置 4、IDEAmaven创建工程示例 Maven是一个能使我们的java程序开发节省时间和精…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

uniapp 开发ios, xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

QT开发技术【ffmpeg + QAudioOutput】音乐播放器

一、 介绍 使用ffmpeg 4.2.2 在数字化浪潮席卷全球的当下&#xff0c;音视频内容犹如璀璨繁星&#xff0c;点亮了人们的生活与工作。从短视频平台上令人捧腹的搞笑视频&#xff0c;到在线课堂中知识渊博的专家授课&#xff0c;再到影视平台上扣人心弦的高清大片&#xff0c;音…...