当前位置: 首页 > 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程序开发节省时间和精…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类,这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前,需要明确协议的具体格式。例如,一个简单的…...