ES6模块化(默认导入导出、按需导入导出、直接导入)

news2025/1/13 17:07:01

一、介绍ES6模块化

    ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。

 二、ES6 模块化规范中定义:

1.每个 js 文件都是一个独立的模块
2.导入其它模块成员使用 import 关键字
3.向外共享模块成员使用 export 关键字

三、默认导入导出

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

  

默认导入语法:import 接收名  from  ‘模块的路径’

注意:

每个模块中,只能有一次的 export default,不然就会报错。

导入的语法的接收名自己取合法合理就行。

四、按需导入导出 

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

按需导入语法:

基础语法:import   {按需导入的名称}  from ‘模块的路径’

导入多个:import   {按需导入的名称1,按需导入的名称2.....}  from  '模块路径'

起别名:import {按需导入的名称  as  自己起个别名}  from  ‘模块路径’

批量导入:import * as  起的别名  from ‘模块路径'

 

 

 

 

 注意: 

1.每个模块可以多次按需导出

2.按需导出没有default

3.按需导入的成员名必须与按需导出的名称保持一致

4.当不同的组件导出的模块名相同,我们想在同一个文件中导入可以给其中一个起别名来进行区分和避免冲突   使用 as 关键字进行起别名(import   导出的名  from  起的别名  ”路径“)

5.使用批量导出 一定要as起别名 否则没法用

 总结:

1.按需导入导出可以一起使用

2.当文件中只导出一个成员的时候 通常使用默认导出(不强迫)

3.当文件中只导出多个成员的时候 通常使用按需导出(不强迫)

五、直接导入

不需要谁去用,直接就像执行某模块中的代码可以直接导入

import ”路径“

注意:没有名字,没有form 导入直接调用了

 

 

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

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

相关文章

React组件——类组件

一、组件的概念 使用组件的方式进行编程,可以提高开发效率,提高组件的复用性、提高代码的可维护性和可扩展性 React定义组件的方式有两种 类组件:React16.8版本之前几乎React使用的都是类组件 函数组件:React16.8之后,函数式组件使用的越…

2023高频前端面试题(含答案)

一、简单页面 1、CSS选择器样式优先级 2、CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动 第一个float:left,第二个float:right,第三个设置margin-left和margin-right (2&am…

什么是Mixin?带你了解Vue中的Mixin混入

什么是Mixin?本篇文章带大家了解一下Vue中的Mixin混入,介绍Mixin和Vuex的区别,Mixin的使用方法,希望对大家有所帮助! Vue框架现在基本上已经占据了前端的半壁江山,Vue的数据驱动和组件化的思想深入人心。Vu…

web前端-JavaScript中的数组详解

🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列总专栏:web前端基础教程 👑名言警句&#xff1a…

我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印,结果...

我用尽了洪荒之力,解开了ChatGPT 写前端代码的封印介绍ChapGPT 听起来好得令人难以置信,所以让我们让它为我们编写一些 JS 代码。我想看看它是否可以解决我作为前端开发人员每天所做的任务。是驴子是马拉出来溜溜,我们还是直接进入主题一探究…

Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案

Vite Vue3 Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案 文章目录Vite Vue3 Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案一.问题定位二.以下为完整解决…

React+Mobx|基本使用、模块化

欢迎来到我的博客 📔博主是一名大学在读本科生,主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥 R e a c t 框架 React框架 Reac

【小程序项目开发 -- 京东商城】uni-app 商品分类页面(上)

🤵‍♂️ 个人主页: 计算机魔术师 👨‍💻 作者简介:CSDN内容合伙人,全栈领域优质创作者。 🌐 推荐一款找工作神器网站: 点击跳转牛客网 |笔试题库|面试经验|实习招聘内推| 还没有账户的小伙伴 速速点击链接…

前端 --- HTML

文章目录1. HTML 结构1.1 HTML 文件基本结构1.2 VsCode 中 使用 HTML 的快捷键2. HTML 常见标签2.1 注释标签2.2 标题标签2.3 段落标签2.4 换行标签2.5 格式化标签2.6 图片标签2.7 超链接标签2.8 表格标签2.9 列表标签2.10 表单标签form 标签input 标签① 文本框② 密码框③ 单…

Vue中实现路由跳转的三种方式详细分解

vue中实现路由跳转的三种方式 目录 vue中实现路由跳转的三种方式 一、使用vue-router 1.下载vue-router模块到当前工程 2.在main.js中引入VueRouter函数 3.添加到Vue.use()身上 – 注册全局RouterLink和RouterView组件 4.创建路由规则数组 – 路径和组件名对应关系 5…

CSS flex布局最后一行左对齐的常用方法

一、justify-content 在CSS flex布局中,justify-content属性定义了浏览器之间,如何分配顺着弹性容器主轴 (或者网格行轴) 的元素之间及其周围的空间,可以控制列表的水平对齐方式, justify-content: center; /* 居中排列 */ …

Visual Studio 2022 给创建的类/接口加头注释

Visual Studio 2022 给类加注释 找到文件路径 一般在C盘: C:\Program Files\Microsoft Visual Studio\2022\Professional\Common7\IDE\ItemTemplates\CSharp\Code\2052\Class 如图: 修改这个.cs文件 using System; using System.Collections.Generic…

Linux驱动开发——串口设备驱动

Linux驱动开发——串口设备驱动 一、串口简介 串口全称叫做串行接口,通常也叫做 COM 接口,串行接口指的是数据一个一个的顺序传输,通信线路简单。使用两条线即可实现双向通信,一条用于发送,一条用于接收。串口通信距…

C++ Linux Web Server 面试基础篇-计网(一)

⭐️我叫忆_恒心,一名喜欢书写博客的在读研究生👨‍🎓。 如果觉得本文能帮到您,麻烦点个赞👍呗! 近期会不断在专栏里进行更新讲解博客~~~ 有什么问题的小伙伴 欢迎留言提问欧,喜欢的小伙伴给个三…

纯代码22步绘制唯美的日夜交替动画(原生HTML+CSS+JS实现,CV即可运行+保姆级步骤教程)

文章目录前言一、HTML(index.html)1. 加入元素二、CSS(style.css)2. 重置浏览器样式3.设置字体样式4.将我们的元素居中5.设置背景颜色6.设置动画显示的位置7.设置夜晚时的背景色8.将动画显示的区域设置为圆型9.绘制白天时天空的样子10.绘制夜晚时天空的样子11.创建昼夜交替动画…

vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)

vue3 项目搭建教程(基于create-vue,vite,Vite Vue) 目录 一、搭建vue3 项目前提条件 二、通过create-vue搭建vue3 项目 三、搭建一个 Vite 项目 四、构建一个 Vite Vue 项目 五、打开Vue 项目管理器 六、Vite Vue 项目目…

Vue.js笔记------事件

一、事件与事件流 1、事件与事件流 【事件】 JavaScript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性。常见的有加载事件、鼠标事件。 【事件流】 由于DOM是一个树结构,如果在父子节点绑定事件时候&am…

前端使用xlsx导出数据生成Excel文件

xlsx的使用安装 xlsx引入 xlsx需要导出的数据源将数据源转成需要的二维数组定义 Excel 表头将定义好的表头添加到 body 中1 创建虚拟的 workbook2 将二维数组转成 sheet!merges 设置单元格合并!cols 设置列宽!rows 设置行高3 向 workbook 中添加 sheet4 导出 workbook 完整示例…

JavaWeb 简单的图书管理系统(jsp+servlet)

关于与需要的文件下载字体颜色分类:黑色 表示正文蓝色 表示一个超链接,点击可以跳转页面橙色 表示一级标题或项目的包名绿色 表示子级内容中含有代码或解释的标题紫色 表示一个代码块的标题红色 表示()外的文件是()内文件的子类,实现类或依赖浅灰 表示解释或其类型高…

Vue封装Axios实现全局的loading自动显示效果

在 vue 项目中,我们通常会使用 Axios 库来与后台进行数据交互。而当我们发起 ajax 请求时,常常需要在页面上显示一个加载框(Loading 效果),然后等数据返回后自动将其隐藏。要实现这个功能,我们可以在每次请…