ES6模块化规范

news2024/11/26 17:26:41

在没有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”

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Spring的创建和使用,存储和读取Bean总结

目录 Spring项目创建和使用流程 1.创建一个 Spring 项目 2.存储 Bean 3.读取 Bean ApplicationContext和BeanFactory的区别 通过注解存储 Bean对象 五大类注解的关系 Java程序标准分层 方法注解Bean 注入Bean对象的三种方式 1.属性注入 2.Setter注入 3.构造方法注入…

【Java数据结构】Map和Set

Map和Set 搜索树概念操作 - 查找操作 - 插入操作 - 删除cur没有左树&#xff08;cur.left null&#xff09;cur没有右树&#xff08;cur.right null&#xff09;cur既有左树也有右树&#xff08;最困难的情况&#xff09;替罪羊删除法 操作代码性能分析和 java 类集的关系 搜…

程序员困局:去大城市进大厂却买不了房,回老家又没有高薪工作…

对于在外打拼的程序员来说&#xff0c;难的是进大厂&#xff0c;而不是买不起房。 进大厂的程序员&#xff0c;能不能买得起房&#xff1f; 进大厂的程序员的薪资&#xff0c;还是相当可观的。以阿里P6为例&#xff0c;年薪50万&#xff0c;到手40万左右&#xff0c;刨去10万…

【C++学习】C++11——新特性 | 右值引用 | 完美转发

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; C11——新特性 | 右值引用 | 完美转发 &#x1f440;列表初始化&#x1f9b4; std::initializer_list…

收藏!网络行业主流的六大技术认证全科普

大家好&#xff0c;我是老杨。你的年终总结做完了没&#xff1f;还没做完&#xff0c;点击“年终总结”&#xff0c;拿个模板&#xff0c;快速完成。 很多人在年末都会有列一个新年愿望清单&#xff0c;写写来年想要完成的事情。 不少网工在这两年的就业环境之下&#xff0c;…

Nginx-部署2个vue项目(多个项目)-二级域名设置代理

前言 最近在实际开发过程中&#xff0c;需要在服务器部署2个项目。需要nginx二级域名。 开始时候在网上查了一圈&#xff0c;各有说法&#xff0c;不是很全&#xff0c;很头大。这里把自己成功的二级域名代理记录一下。 网上有很多文章说要该router.js文件&#xff0c;要该vu…

自动备份交换机的配置到远程服务器

环境 交换机配置修改后及时备份相关配置&#xff0c;每次配置变化后需要在1分钟后自动进行保存&#xff0c;并且将配置上传至FTP服务器&#xff1b;每隔30分钟&#xff0c;交换机自动把配置上传到FTP服务器 配置命令&#xff1a; [huawei]set save-configuration delay 1 //…

单片机外围电路:电阻之上下拉电阻

1.基础概念 上拉就是将不确定的信号通过一个电阻钳位在高电平&#xff0c;电阻同时起限流作用。下拉同理&#xff0c;也是将不确定的信号通过一个电阻钳位在低电平。 2.基础应用 上下拉电阻在数字电路中使用&#xff0c;为了好理解一点&#xff0c;可把上下拉电阻大致分为两种…

货币简史:从物物交换到数字货币

货币简史 1. 物物交换阶段2. 一般等价物阶段3. 信用货币阶段4. 电子货币阶段5. 数字货币阶段 金钱是什么时候产生的呢&#xff0c;这取决于你如何定义金钱。 费利克斯马丁&#xff08;FelixMartin&#xff09;名为《金钱:未授权的传记》(Money:An Unauthorized Biography)书中…

19c rac环境修改pubic, vip,scan ip步骤

19c rac环境第一次修改public、vip和scan ip&#xff0c;和11g还是稍有不同。首先说明下环境 具体步骤如下 1、修改public地址&#xff0c;关闭实例后使用root用户操作 [rootdb1 ~]# ./oifcfg getif bond0 172.20.30.0 global public bond2 100.100.100.0 global clust…

【JVM】JVM堆内存(heap)详解

文章目录 前言一、堆内存划分二、为什么移除永久代&#xff1f;三、分代概念四、为什么分代&#xff1f;五、为什么survivor分为两块相等大小的幸存空间&#xff1f;六、JVM堆内存常用参数七、垃圾回收算法&#xff08;GC&#xff0c;Garbage Collection&#xff09;八、垃圾收…

java 反射及代理模式初步学习

java 反射及代理模式初步学习 0. 什么是反射&#xff1f; Java的反射&#xff08;reflection&#xff09;机制是指在程序的运行状态中&#xff0c;可以构造任意一个类的对象&#xff0c;可以了解任意一个对象所属的类&#xff0c;可以了解任意一个类的成员变量和方法&#xf…

小程序组件

swiper swiper 和 swiper-item 结合使用&#xff0c;&#xff0c; swiper有默认高度 300rpx 属性&#xff1a; autoplay &#xff1a; 自动播放circular &#xff1a; 循环播放indicator-dots &#xff1a; 显示指示点indicator-active-color &#xff1a; 轮播选中的颜色 &…

SpringBoot整合钉钉消息推送(四十四)

从头开始&#xff0c;并不意味着失败&#xff0c;相反&#xff0c;正是拥抱成功的第一步&#xff0c;即使还会继续失败 上一章简单介绍了 SpringBoot 发送邮件(四十三), 如果没有看过,请观看上一章 钉钉消息推送&#xff0c; 官方文档: https://open.dingtalk.com/document/gr…

3.结构化的数学思想

前言 今天在复习概率论的公理化过程中&#xff0c;我发现它的公理其实也是人为定义的&#xff0c;为什么我会这么想呢&#xff1f;这是因为我曾听过严伯均在为什么诺贝尔奖没有数学讲曾说过数学是一门无法证伪的学科&#xff0c;甚至不能算是科学&#xff0c;而诺贝尔设置这个…

超详细的Linux环境下使用git上传代码教程(gitee版)

git是一个版本控制器&#xff0c;我们使用它上传我们以前写过的代码给他进行托管&#xff0c;更为方便以后找到&#xff0c;同时也方便我们找到我们每次更改了什么。 创建仓库 创建完成后界面&#xff1a; 接下来复制我们创建的仓库的地址&#xff1a; 使用 git 命令行 安装…

BGP路由策略,IPV6

下一跳不变 从EBGP来的路由,传给|BGP S居时,下一跳不变 解决方案: 水平分割 ∷:AS内防环 从|BGP来的路由,不会传给IBGP邻居 1全互联 2路由反射器 3联盟 BGP选路原则: 当BGP 由表存在多条相同路由,会产生多个转发路径,BGP 会根据这些路由的属性,选择一条最优…

使用 C 语言验证非均匀概率的离散事件在样本数量足够大时,符合正态分布曲线(通过生成一个PPM格式的图像)

我想写本文的原因是看到著名数学科普账号 3Blue1Brown 发布的【官方双语】但是什么是中心极限定理&#xff1f;中提到&#xff1a;不论这个离散型事件的各种情况概率是不是平均的&#xff0c;当数量一定大时&#xff0c;还是会符合正态分布曲线。我就想自己试试看是不是这种情况…

深入篇【C++】类与对象:const成员与Static成员

深入篇【C】类与对象&#xff1a;const成员与Static成员 ⏰<const成员>&#x1f553;1.权限&#x1f550;2.规则&#x1f552;3.思考&#xff1a; ⏰<Static成员>&#x1f551;1.概念&#x1f557;2.特性&#x1f555;3.思考&#xff1a; ⏰<const成员> &am…

从零开始 Spring Boot 29:类型转换

从零开始 Spring Boot 29&#xff1a;类型转换 图源&#xff1a;简书 (jianshu.com) PropertyEditor Spring使用PropertyEditor进行String和具体类型之间的转换&#xff1a; public interface PropertyEditor {void setValue(Object value);Object getValue();String getAsT…