【ES6】模块化

2024-02-12 22:12
文章标签 es6 模块化 frontend

本文主要是介绍【ES6】模块化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

nodejs遵循了CommonJs的模块化规范

导入 require()

导出 module.exports

模块化的好处:

  • 模块化可以避免命名冲突的问题
  • 大家都遵循同样的模块化写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用
  • 需要啥模块,调用就行

在es6模块化诞生之前, JavaScript社区就有了AMD、CMD、CommonJS(民间)

AMD、CMD适用于浏览器端的JavaScript模块化

CommonJS适用于服务器端的JavaScript模块化

太多的模块化规范给开发者增加了学习难度与开发的成本,因此官方的es6模块化规范诞生了。

为什么要学习es6模块化规范

官方提供

es6模块化浏览器端服务器都可以适用

es6模块化

导入 import

导出 export

使用步骤
  1. 确保安装了v13.0.0或更高版本的node.js
  2. 在package.json的根节点中添加"type": "module"节点

默认导入导出

默认导入 import 变量 from ‘文件路径’

默认导出 export default 内容

一个文件只能有一个默认导出

按需导入导出

按需导入 import {age} from ‘文件路径’;
还可起别名 import {age as age1} from ‘文件路径’;

按需导出 export let age = 18;

直接导入无导出

import ‘文件路径’;

这篇关于【ES6】模块化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/703733

相关文章

Vue开发实例(六)实现左侧菜单导航

左侧菜单导航 一、一级菜单二、二级菜单三、三级菜单1、加入相关事件 四、菜单点击跳转1. 创建新页面2. 配置路由3. 菜单中加入路由配置4、处理默认的Main窗口为空的情况 五、动态左侧菜单导航1、动态实现一级菜单2、动态实现二级菜单 一、一级菜单 在之前的Aside.vue中去实现代码,一级菜单其实非常的简单,直接用el-menu 和el-menu-item 就行,Asid

SLAM基础知识:前端和后端

在基于滤波的SLAM算法中,使用迭代卡尔曼滤波(Iterative Kalman Filtering)来求解当前帧状态量的步骤通常属于SLAM系统的前端部分。 前端负责处理传感器数据,进行状态估计和地图构建的初步步骤。迭代卡尔曼滤波作为一种滤波器,用于递归地估计当前帧的状态量,即机器人或传感器的位置和姿态,以及地图的特征或结构。在每个时间步,前端通过传感器数据和先前的估计来更新状态,并提供实时的

java基于Springboot+vue项目心理健康教育管理系统

随着社会经济的发展,医疗卫生事业取得了巨大进步,在心理健康教育占据越来越重要的地位,什么是心理健康:心理健康,从广义上讲,是指一种高效而满意的、持续的心理状态。从狭义上讲,心理健康是指人的基本心理活动的过程内容完整、协调一致,即认识、情感、意志、行为、人格完整和协调,能适应社会,与社会保持同步。 全国有20.23%的大学生存在不同程度的心理障碍甚至心理疾患,25%的大学生需要精神卫生服务,10%有

双周回顾#007 - 前端与后端

前端的问题不是难,而是它面对最终用户。只要用户的喜好和口味发生变化,前端就必须跟上。 这导致前端不得不快速变化,因为用户的口味正在越来越快地改变。 后端不需要面对最终用户,需要解决的都是一些经典的计算机科学问题,比如算法和数据结构。这些问题很少变化,可以利用以前的研究成果,所以变化速度慢得多。 价值 AIGC 元宵节当天与朋友畅聊,他建议公司要引入 AIGC,用它做什么不重要,重要的

Node.js_基础知识(CommonJS模块化)

CommonJS模块化规范 加载时机: 服务器端: 模块的加载是运行时同步加载的,node.js实现了模块化规范浏览器端: 模块需要提前编译打包处理,需使用Browserify编译打包,推荐使用ESM 暴露模块:module.exports、exports导入模块:require 模块导出 module.exports = 任意数据 (字符串、整数、布尔值、对象)exports.模块名 =

【new IntersectionObserver】vue3 数据懒加载

new IntersectionObserver js方法描述步骤 实现逻辑:通过监视底部节点可视情况,获取新数据进行渲染,如果获取不到最新数据则显示暂无其他数据 new IntersectionObserver 是用于监视元素可见度,所以我们只需要监视数据下方的dom是否可见 import { type Ref, watchEffect, ref } from "vue"//我用的ts,不需

基于JAVA,SpringBoot,Vue,UniAPP智能停车场小程序管理系统设计

摘要 本设计旨在开发一款基于Java, SpringBoot, Vue和UniApp的智能停车场小程序,以实现现代化、智能化的停车管理解决方案。通过整合后端Java SpringBoot框架和前端Vue与UniApp技术,该小程序能够为用户提供一个简洁、高效且用户友好的交互界面,同时确保系统的可扩展性和维护性。 在后端架构中,SpringBoot负责提供稳定可靠的服务端环境,处理业务逻辑,并维

汇编语言的模块化程序设计(1004)

本文为《汇编语言程序设计》1004小节例程。点击链接…进课程主页。 模块化程序结构 assume cs:codecode segmentmain: ...call sub1 ;调用子程序sub1...mov ax, 4c00hint 21hsub1: ... ;子程序sub1开始call sub2 ;调用子程序sub1...ret ;

Vue开发实例(四)Element-UI部分组件使用方法

Element-UI的使用 一、Icon图标的使用1、用 i 标签使用图标 二、用 el-button 使用图标1、使用type定义样式2、使用plain定义样式3、使用round定义样式4、使用circle定义样式5、带图标和文字的按钮6、按钮禁用7、文字按钮8、按钮组9、加载中 三、Link 文字链接1、基础用法2、禁用3、下划线4、图标 一、Icon图标的使用 Elem

Vue(黑马学习笔记)

Vue概述 通过我们学习的html+css+js已经能够开发美观的页面了,但是开发的效率还有待提高,那么如何提高呢?我们先来分析下页面的组成。一个完整的html页面包括了视图和数据,数据是通过请求从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上,很明显,这就需要我们使用DOM操作。正是因为这种开发流程,座椅我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开