ES6模块化学习

news2024/10/6 8:22:47

1. 回顾:node.js 中如何实现模块化

node.js 遵循了 CommonJS 的模块化规范。其中:
        导入其它模块使用 require() 方法
        模块对外共享成员使用 module.exports 对象

模块化的好处: 大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己。

2. 前端模块化规范的分类

在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。
但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
        AMD 和 CMD 适用于浏览器端的 Javascript 模块化
        CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!

3. 什么是 ES6 模块化规范

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。

ES6 模块化规范中定义:
        每个 js 文件都是一个独立的模块 
        导入其它模块成员使用 import 关键字  
        向外共享模块成员使用 export 关键字

4. 在 node.js 中体验 ES6 模块化

node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照如下两个步骤进行配置:
        ①确保安装了 v14.15.1 或更高版本的 node.js (node -v 查看node版本)
        ②在 package.json 的根节点中添加
"type": "module" 节点npm init -y 初始化包管理配置文件,注意:初始化包管理配置文件的时候,文件名不能是中文

5. ES6 模块化的基本语法

ES6 的模块化主要包含如下 3 种用法:
        ①默认导出与默认导入
        ②按需导出与按需导入
        ③直接导入并执行模块中的代码

5.1 默认导出与默认导入

①默认导出

        默认导出的语法: export default 默认导出的成员

 默认导出的注意事项每个模块中,只允许使用唯一的一次 export default,否则会报错!

②默认导入

        默认导入的语法: import 接收名称 from '模块标识符'

默认导入的注意事项:默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:


③按需导出

        按需导出的语法: export 按需导出的成员

④按需导入

        按需导入的语法: import { s1 } from '模块标识符'


按需导出与按需导入的注意事项:
        每个模块中可以使用多次按需导出 
        按需导入的成员名称必须和按需导出的名称保持一致 
        按需导入时,可以使用 as 关键字进行重命名 
        按需导入可以和默认导入一起使用

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

如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码,示例代码如下:

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

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

相关文章

免费的二级域名分发,您确定不要试试吗?

这是可爱的小盆友做的一个免费的二级域名&#xff0c;目前上线就送114514个积分&#xff0c;名额有限~ 首先进入>路明二级域名分发 - 免费稳定的二级域名分发服务 (kmyl.top)< 进来是这个样子&#xff08;如下图所示&#xff09; 话不多说&#xff0c;进入教程~ 第一章…

vue对axios进行请求响应封装

一、原因 像是在一些业务逻辑上&#xff0c;比如需要在请求之前展示loading效果&#xff0c;或者在登录的时候判断身份信息&#xff08;token&#xff09;等信息有没有过期&#xff0c;再者根据服务器响应回来的code码进行相应的提示信息。等等在请求之前&#xff0c;之后做的一…

跟着峰哥学java 微信小程序 第二天 封装ES7 + 后端工作

1.前端 1.1使用promise封装 使用promise封装以至于在图片路径 统一路径中修改 //封装统一请求域名 const baseUrl "http://localhost:8080"; //封装后需导出 export const getBaseUrl()>{return baseUrl; } 导入外来资源 初始化数据 设置数据 将处理后的数据…

高薪程序员必修课-JVM的内存区域以及对象创建过程

JVM内存区域 在Java虚拟机&#xff08;JVM&#xff09;中&#xff0c;内存区域&#xff08;Memory Areas&#xff09;是对内存空间的逻辑划分&#xff0c;用于存储不同类型的数据和执行不同的操作。理解JVM的内存区域有助于优化程序性能、调优内存使用和排查内存相关的问题。下…

Java后端每日面试题(day1)

目录 JavaWeb三大组件依赖注入的方式Autowire和Resurce有什么区别&#xff1f;Spring Boot的优点Spring IoC是什么&#xff1f;说说Spring Aop的优点Component和Bean的区别自定义注解时使用的RetentionPolicy枚举类有哪些值&#xff1f;如何理解Spring的SPI机制&#xff1f;Spr…

溶酶体靶向嵌合体制备方法和技术

网盘 https://pan.baidu.com/s/1dhCCryatp71j7yXTDdrrTw?pwdynr4 具有聚集诱导发光性质的比率型溶酶体pH探针及应用.pdf 内体-溶酶体转运靶向嵌合体降解剂及其制备方法与应用.pdf 可降解PDGFR-β的蛋白降解靶向嵌合体及其制备方法和应用.pdf 溶酶体膜包覆纳米颗粒的制备方法.…

19C 单机文件系统安装文档

准备工作 1)查看系统版本、内核参数 more /etc/redhat-release more /etc/redflag-releaseuname -a2)查看当前系统是否配置了HugePages。在下面的查询中&#xff0c;HugePages的几个相关值都为0&#xff0c;表明当前未配值HugePages&#xff0c;其次可以看到该版本的大页大小为…

科普文:微服务之服务网格Service Mesh

一、ServiceMesh概念 背景 随着业务的发展&#xff0c;传统单体应用的问题越来越严重&#xff1a; 单体应用代码库庞大&#xff0c;不易于理解和修改持续部署困难&#xff0c;由于单体应用各组件间依赖性强&#xff0c;只要其中任何一个组件发生更改&#xff0c;将重新部署整…

2024年7月5日 (周五) 叶子游戏新闻

老板键工具来唤去: 它可以为常用程序自定义快捷键&#xff0c;实现一键唤起、一键隐藏的 Windows 工具&#xff0c;并且支持窗口动态绑定快捷键&#xff08;无需设置自动实现&#xff09;。 卸载工具 HiBitUninstaller: Windows上的软件卸载工具 《乐高地平线大冒险》为何不登陆…

能否免费使用Adobe XD?

Adobe XD不是免费的。Adobe 目前XD采用订阅模式&#xff0c;提供订阅模式 7 每天试用期结束后需要付费购买&#xff0c;具体价格根据不同的订阅计划确定&#xff0c;包括每月购买&#xff0c;包括 9.99 美元或每月 99.99 美元&#xff0c;或者选择购买Adobe CreativeCloud整体订…

文件打开的系统错误分析流程

当用户出现“Open file failed”错误时&#xff0c;手动产生dump文件。 &#xff08;1&#xff09;打开资源管理器&#xff0c;选择AppNameXXX.exe进程&#xff0c;右击鼠标选择“创建转储文件” (2) 生成转储文件 3.获取用户转储文件 4.用Visual studio2015打开dump文件分析…

Qt使用sqlite数据库及项目实战

一.sqlite使用介绍 在Qt中使用SQLite数据库非常简单&#xff0c;SQLite是一个轻量级的嵌入式数据库&#xff0c;不需要单独的数据库服务器&#xff0c;完全使用本地文件来存储数据。 当在Qt中使用SQLite数据库时&#xff0c;需要涉及到一些SQL语句以及Qt中的相关函数&#xf…

linux主机(A)通过私钥登录linux主机(B)

1.登录B主机&#xff0c;先在B主机执行 ssh-keygen 2.设置id_rsa的权限 chmod 600 id_rsa 3.将生成的id_rsa.pub导入到authorized_keys ssh-copy-id -i ./id_rsa.pub root127.0.0.1 4.将id_rsa复制到A主机 scp id_rsa_123 root1.1.1.A:/home/ 5.登录到A主机使用私钥登录 因…

华为云生态和快速入门

华为云生态 新技术催生新物种&#xff0c;新物种推动新生态 数字技术催生各类运营商去重塑并颠覆各行业的商业模式 从业务层面看&#xff0c;企业始终如一的目标是业务增长和持续盈利&#xff0c;围绕这些目标衍生出提质、增效、降本、安全、创新和合规的业务诉求&#xff0c…

【C语言题目】34.猜凶手

文章目录 作业标题作业内容2.解题思路3.具体代码 作业标题 猜凶手 作业内容 日本某地发生了一件谋杀案&#xff0c;警察通过排查确定杀人凶手必为4个嫌疑犯的一个。 以下为4个嫌疑犯的供词: A说&#xff1a;不是我。 B说&#xff1a;是C。 C说&#xff1a;是D。 D说&#xff…

科研绘图系列:R语言STAMP图(STAMP Plot)

介绍 STAMP图(STAMP plot)并非一个广泛认知的、具有特定名称的图表类型,而是可能指在STAMP(Statistical Analysis of Metagenomic Profiles:“STAMP: statistical analysis of taxonomic and functional profiles”)软件使用过程中生成的各种统计和可视化图表的总称。ST…

window.ai 开启你的内置AI之旅

❝ 成功是得你所想&#xff0c;幸福是享你所得 大家好&#xff0c;我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder ❝ 此篇文章所涉及到的技术有 AI( Gemini Nano) Chrome Ollama 因为&#xff0c;行文字数所限&#xff0c;有些概念可能会一带而过亦或者提供…

昇腾910B部署Qwen2-7B-Instruct进行流式输出【pytorch框架】NPU推理

目录 前情提要torch_npu框架mindsport框架mindnlp框架 下载模型国外国内 环境设置代码适配&#xff08;非流式&#xff09;MainBranch结果展示 代码适配&#xff08;流式&#xff09; 前情提要 torch_npu框架 官方未适配 mindsport框架 官方未适配 mindnlp框架 官方适配…

第十六章 Qt的文件处理操作详解

目录 一、基本文件操作 二、二进制文件读写 三、文本文件读写 四、操作例子 1、QTextStream的流操作符 一、基本文件操作 文件操作是应用程序必不可少的部分。Qt 作为一个通用开发库,提供了跨平台的文件操作能力。在所有的 I/O 设备中,文件 I/O 是最重要的部分之…

生成式人工智能如何改变软件开发:助手还是取代者?

生成式人工智能如何改变软件开发&#xff1a;助手还是取代者&#xff1f; 生成式人工智能&#xff08;AIGC&#xff09;正在引领软件开发领域的技术变革。从代码生成、错误检测到自动化测试&#xff0c;AI工具在提高开发效率的同时&#xff0c;也引发了对开发者职业前景的讨论…