JavaScript模块化——ES6模块化规范

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境:vscode Chrome浏览器

1.ES6

1.1ES6介绍

ES6的全称是ECMAScript 6,也称为ES2015,是JavaScript的一个重要版本,它引入了许多新特性和改进,极大地增强了语言的表达能力和开发者的生产力。ES6是ECMAScript 标准的一个重大更新,旨在解决早期版本中存在的许多问题,并为开发者提供更现代化的语言特性。

1.2ES6学习前置准备

1.2.1准备school.js

school.js需要准备以下代码:

const name = 'PleaSure乐事'
const slogan = '唱跳RAP'function getTel (){return '114514'
}function getCities(){return ['北京','上海','深圳','杭州','济南','坤']
}

1.2.2准备student.js

student.js需要准备以下代码:

const name = '张三'
const motto = '相信明天会更好!'function getTel (){return '0987654321'
}function getHobby(){return ['铁山靠','乌鸦坐飞机','背带裤']
}

1.2.3准备index.html

此外,为了能顺利使用上述两个js文件,我们要新建一个html文件并引入他们。

需要注意的是,这里因为es6为模块化内容,因此需要将script的type改为moudle,否则会产生报错:

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>index</title></head><body><script type="module" src="./index.js"></script></body>
</html>

1.3运行ES6模块

1.3.1在网页中导入

如果我们想要进行导入,我们可以使用如下方法:

import * as school from './student.js'

进行打印输出后,会得到一个对象:

1.3.2使用nodejs导入

使用nodejs有两种方法进行导入。

方法一是将js文件的后缀改为mjs后即可运行,例如:

方法二则是配置如下json文件,随机即可完成配置,也无需改变js文件的后缀名即可完成使用:

{"type":"module"
}

1.4ES6导出数据

需要说明的是,ES6当中的导出方式可以混用

1.4.1分别导出

分别导出最简单,添加export关键词即可,如下:

export const slogan = '唱跳RAP'

1.4.2统一导出

统一导出的格式类似于对象,但是需要注意,它仅限于格式类似,但不是对象,需要对象的可以去Java当中new一个,具体格式如下:

export {name,motto,getTel}

1.4.3默认导出

默认导出导出的是对象,格式如下:

export default {name,motto,getTel}

1.5ES6导入数据

1.5.1导入全部

导入全部是将所有导出的内容整合到一个对象当中:

import * as school from './student.js'

1.5.2命名导入

命名导入对应分别导出和统一导出,在导入时可以进行命名:

import {name,motto,getTel} from './student.js'

1.5.3默认导入

默认导入对应默认导出,在导入时可以任意起名:

import xyz from './school.js

很神奇的地方在于命名导入和默认导入可以混用,代码如下:

import {name,motto,getTel} from './student.js'

1.5.4动态导入

动态导入允许在某个时刻进行导入,比如按下按钮,延时3秒后导入等等。

因此我们可以写下一个按钮,并绑定导入事件,来进行导入,这就是动态导入:

const btn = document.getElementById('btn')
btn.onclick = async()=>{const result = await import('./student.js')console.log(result)
}

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

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

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

相关文章

Linux搭建邮箱服务器(简易版)

本章是上一文档的简易版本搭建方式更为快速简洁&#xff08;只需要两条命令即可搭建&#xff09;&#xff0c;如果想了解更详细一些可以看我上一文档 Linux接发邮件mailx_linux mailx o365-CSDN博客文章浏览阅读857次&#xff0c;点赞25次&#xff0c;收藏19次。本文详细描述了…

独立站内容营销SOP 1.0 丨出海笔记

提到内容营销&#xff0c;可能很多朋友都听过但没深入做&#xff0c;国内跨境独立站通过内容营销做的大流量的目前不多&#xff0c;哪怕大如 Shein, Anker&#xff0c;大部分时候还是在买量获客的阶段。 但大家只要明白一点即可&#xff1a;内容做得好不好&#xff0c;直接影响…

文档智能:OCR+Rocketqa+layoutxlm

此次先记录LayoutLMv2&#xff0c;梳理相关论文&#xff0c;记录如下&#xff1a; 首先认识一下 visually-rich document understanding tasks → \to → VrDU 其次&#xff0c;the text fields of interest&#xff0c;与图像识别的感兴趣区域 region of Interest 类似&…

【脑机接口】脑机接口性能的电压波形的尖峰分类和阈值比较

Comparison of spike sorting and thresholding of voltage waveforms for intracortical brain–machine interface performance 脑机接口性能的电压波形的尖峰分类和阈值比较论文下载&#xff1a;摘要1 介绍2 方法2.1数据获取2.2spike sorting 技术2.3神经数据分析 3结果3.1神…

社交媒体的未来:Facebook如何通过AI技术引领潮流

在数字化时代的浪潮中&#xff0c;社交媒体平台不断演变&#xff0c;以适应用户需求和技术发展的变化。作为全球领先的社交媒体平台&#xff0c;Facebook在这一进程中扮演了重要角色。尤其是人工智能&#xff08;AI&#xff09;技术的应用&#xff0c;正在深刻地改变Facebook的…

搜索树和Map

一.搜索树 1.概念 二叉搜索树又叫二叉排序树&#xff0c;它可以是一颗空树也可以是具有以下性质的二叉树 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于根节点的值若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于根节点的值它的左子树也分别为二…

NR intra-freq和inter-freq测量

intra-freq 测量和inter-freq测量可以分为以下几类&#xff1a; 1 SSB based intra-freq 测量&#xff1a;serving cell SSB的center freq与邻区 SSB的center freq 相同并且两个SSB 的SCS也相同。 2 SSB based inter-freq 测量&#xff1a;serving cell SSB的center freq与邻…

用Qt 对接‌百度语音识别接口

一 、前期准备工作 1&#xff0c;搭建好开发环境&#xff1b; 2&#xff0c;注册百度云平台&#xff0c;获取语音相关东西&#xff0c; 短语音识别标准版_短语音识别-百度AI开放平台 (baidu.com) 3&#xff0c;涉及到的Qt 类有 QAudioFormat&#xff0c;QAudioDeviceInfo&a…

【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置

文章目录 【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设置RelativeContainer 和 AlignRules 的关系AlignRules 语法详解 【HarmonyOS NEXT开发】如何设置水平/垂直方向的左/居中/右对齐——RelativeContainer的AlignRules设…

Cesium 展示——Cesium 初始化视角在中国并加载数据(china.json)

文章目录 需求一:初始化视角在中国分析需求二:加载中国数据(china.json)需求一:初始化视角在中国 在初始化 Cesium 的 Viewer 后,视角是在美国,如何让其视角指向中国 分析 viewer.value = new Cesium.Viewer(cesiumContainer.value, {homeButton

Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管道 | 、指令的本质 等的介绍

文章目录 前言一、Linux通配符*二、man 指令三、 cp 指令四、mv指令五、 echo 指令六、cat 指令七、more 指令八、 less 指令九、 head 指令十、 tail指令十一、 管道 |十二、指令的本质总结 前言 Linux通配符*、man 、cp、mv、echo、cat、more、less、head、tail、等指令、管…

如何使用 ONNX 结合 GPU 加速推理(CUDA 与 cuDNN 简明指南)

前言 在深度学习模型推理中,使用 GPU 进行加速是提升模型推理速度的关键方式之一。 本文将带大家一步步了解如何使用 ONNX Runtime 结合 NVIDIA 的 CUDA 和 cuDNN 进行 GPU 加速。 一、查找ONNX、CUDA与cuDNN之间的对应版本 首先,我们需要确保 ONNX Runtime 与 CUDA 和 cu…

分类预测|基于差分优化DE-支持向量机数据分类预测完整Matlab程序 DE-SVM

分类预测|基于差分优化DE-支持向量机数据分类预测完整Matlab程序 DE-SVM 文章目录 一、基本原理DE-SVM 分类预测原理和流程总结 二、实验结果三、核心代码四、代码获取五、总结 一、基本原理 DE-SVM 分类预测原理和流程 1. 差分进化优化算法&#xff08;DE&#xff09; 原理…

用于安全研究的 Elastic Container Project

作者&#xff1a;来自 Elastic Andrew Pease•Colson Wilhoit•Derek Ditch 使用 Docker 启动 Elastic Stack 序言 Elastic Stack 是一个模块化数据分析生态系统。虽然这允许工程灵活性&#xff0c;但建立开发实例进行测试可能很麻烦。建立 Elastic Stack 的最简单方法是使用…

【LLM text2sql】浅看大模型用于text2sql的综述

前言 之前笔者分享了text2sql & LLM & KG的有机结合实现KBQA的问答&#xff0c; 《【LLM & RAG & text2sql】大模型在知识图谱问答上的核心算法详细思路及实践》、 《【开源分享】KBQA核心技术及结合大模型SPARQL查询生成问答实践》。 我们再来看看大模型在te…

Axure RP实战:打造高效图形旋转验证码

Axure RP实战&#xff1a;打造高效图形旋转验证码 在数字产品设计的海洋中&#xff0c;验证码环节往往是用户交互体验的细微之处&#xff0c;却承载着验证用户身份的重要任务。 传统的文本验证码虽然简单直接&#xff0c;但随着用户需求的提高和设计趋势的发展&#xff0c;它…

【人工智能】OpenAI最新发布的GPT-o1模型,和GPT-4o到底哪个更强?最新分析结果就在这里!

在人工智能的快速发展中&#xff0c;OpenAI的每一次新模型发布都引发了广泛的关注与讨论。2023年9月13日&#xff0c;OpenAI正式推出了名为o1的新模型&#xff0c;这一模型不仅是其系列“推理”模型中的首个代表&#xff0c;更是朝着类人人工智能迈进的重要一步。本文将综合分析…

详细分析linux中的MySql跳过密码验证以及Bug(图文)

目录 1.问题所示2. 基本知识3. 解决方法3.1 跳过验证Bug3.2 设定初始密码 1.问题所示 发现密码验证错误&#xff0c;遗失密码 2. 基本知识 停止MySQL服务&#xff1a;sudo systemctl stop mysql 以跳过权限表模式启动MySQL&#xff1a;sudo mysqld_safe --skip-grant-tables …

vulnhub靶机:Holynix: v1

下载 下载地址&#xff1a;https://www.vulnhub.com/entry/holynix-v1,20/ 打开虚拟机 选择下载解压之后的文件打开 新添加一张 NAT 网卡&#xff0c;mac 地址修改如下 00:0c:29:bc:05:de 给原来的桥接网卡&#xff0c;随机生成一个 mac 地址 然后重启虚拟机 信息收集 主…

【C++二分查找 容斥原理】1201. 丑数 III

本文涉及的基础知识点 C二分查找 容斥原理&#xff1a;组合数学汇总 LeetCode1201. 丑数 III 丑数是可以被 a 或 b 或 c 整除的 正整数 。 给你四个整数&#xff1a;n 、a 、b 、c &#xff0c;请你设计一个算法来找出第 n 个丑数。 示例 1&#xff1a; 输入&#xff1a;n …