export和import

  export和import是JavaScript中ES6(ECMAScript 2015)的模块系统的语法,用于实现模块的导出和导入,ES6 的模块系统是 JavaScript 官方标准中定义的模块化规范,现在的前端应用模块化已经很普及了。
  export和import的技术细节有很多,下面做一总结。
  一、实时监视JS文件的运行
  ⑴为了在VSCode中编辑js文件并实时监视该文件的运行,需要安装nodemon,下面是进行全局安装。

npm install -g nodemon

  ⑵新建一个目录,在该目录下运行:

npm init -y

  在该目录下生成一个新的 `package.json` 文件并使用默认值进行初始化,
  ⑶打开 `package.json` 文件,添加type字段并设置为"module",这样就可以在js文件中使用ES模块语法了。
  ⑷实时监视JS文件的运行

nodemon myfile.js

  ⑸中断运行
  按下Ctrl+C即可

  二、export和import技术细节
  一般情况下,先声明再导出。

//声明
const PI=3.1415926function add(a,b){return a + b
}function sub(a,b){return a - b
}function multi(a,b){return a * b
}
//导出
export {PI,add,sub,multi}

  也可以在声明时导出。

export const PI=3.1415926export const  add=(a,b)=>{return a + b;
}export const sub=function(a,b) {return a - b;
}export const  multi=(a,b)=>{return a *b
}

  ⑴命名(具名)导出与导入
  这是最为常见的用法,命名(具名)导出可以导出多个值、函数、对象,由于指定了名称,方便追踪与维护。

//命名(具名)导出
export const PI=3.1415926export const  add=(a,b)=>{return a + b;
}export const sub=function(a,b) {return a - b;
}export const  multi=(a,b)=>{return a *b
}
//命名(具名)导入
import { PI,add,sub,multi } from "./myexport.js";console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

  也可以选择性地导入:

import {PI} from "./myexport.js";
import {add} from "./myexport.js";
import {sub} from "./myexport.js";
import {multi} from "./myexport.js";

  ⑵默认导出与导入

  默认导出适合功能单一的模块,由于对导出与导入做了简化,代码比较简洁。

//声明时默认导出
export default function add(a,b){return a+b
}
//导入时最好与导出时的名称一致
import add from "./myexport.js";
console.log(add(1,2));

  默认导出时可以不使用函数名称。

export default function(a,b){return a + b
}

  ⑶既有默认导出又有具名导出时,可以使用大括号,也可以不使用大括号的方式来导入
  既有默认导出又有具名导出时,需要注意,假如导出文件内容:

export const PI=3.1415926
export const add=(a,b)=>a+b;
export const sub=(a,b)=>{return a - b
}
export default function multi(a,b){return a * b*10
}

  导入内容为:

import add from "./myexport.js";
console.log(add(1,2));

  显然结果时20,因为导入的add对应的是默认导出的函数multi。如果全部使用,正确的写法是:

import { PI,add,sub,default as multi } from "./myexport.js";console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

  或者,注意默认导出的导入一定要放在最前面:

import multi,{ PI,add,sub }   from "./myexport.js";

  上面时选择使用了{}方式,如果不使用{}方式,可以将所有导出内容作为一个对象导入,如下使用:

import * as myexport from "./myexport.js";console.log(myexport.PI);
console.log(myexport.add(1, 2));
console.log(myexport.sub(1, 2));
console.log(myexport.default(1, 2));

  可以选择性地导入:

import {PI} from "./myexport.js";
import {add} from "./myexport.js";
import {sub} from "./myexport.js";
import { default as  multi} from "./myexport.js";

  ⑷使用as关键字
  在上面的例子中,在导入时已经使用了as关键字,这是为了避免在使用时的上下文冲突,在导出时也可以使用as,但是这个并不推荐,因为这样不如直接修改源代码了。

  ⑸聚合后重新导出
  比如再建立一个聚合模块Aggregationmodule.js,内容如下:

import { PI,add,sub,default as multi } from "./myexport.js";export { PI,add,sub,multi }

  myimport.js直接导入这个聚合模块即可:

import { PI,add,sub,multi } from "./Aggregationmodule.js";console.log(PI);
console.log(add(1,2));
console.log(sub(1,2));
console.log(multi(1,2));

  这种方式适合在一个目录下有很多模块文件,可以将需要导出的函数或者变量集中在一个文件中比如index.js,这样在导入时只需要导入该目录下的index.js即可。
  ⑹动态导入

try {const myObj = await import("./Aggregationmodule.js");console.log("导入正常");console.log(myObj.PI);console.log(myObj.add(1, 2));console.log(myObj.sub(1, 2));console.log(myObj.multi(1, 2));
} catch (e) {console.log("导入时发生错误:" + e);
}

  或者:

try{const { PI,add,sub,multi } =await import( "./Aggregationmodule.js");console.log(PI);
} catch(e){console.log("导入时发生错误:"+e);
}

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

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

相关文章

<网络安全>《32 网络信息安全基础(3)网络攻防知识体系》

1 信息安全网络攻防知识 1.网络安全 包括防火墙、入侵检测/防御系统(IDS/IPS)、安全扫描工具、安全隔离系统等。 2.操作系统安全 包括安全操作系统设计、安全编程、安全测试等。 3.应用安全 包括Web应用安全、数据库应用安全、中间件安全等。 4.数据库安…

Python内置函数03——pow

文章目录 概要基本用法注意事项 概要 Python的内置函数pow(x, y, z)返回x的y次方,如果有第三个参数,则求完幂次后对第三个数取余。 基本用法 1.计算10的2次方 a pow(10, 2) # 10的2次幂 print(a) # 1002.计算5的三次方并取模3 b pow(5, 3, 3) p…

SpringBoot3 + Vue3 由浅入深的交互 基础交互教学

说明:这篇文章是适用于已经学过SpringBoot3和Vue3理论知识,但不会具体如何实操的过程的朋友,那么我将手把手从教大家从后端与前端交互的过程教学。 目录 一、创建一个SpringBoot3项目的和Vue3项目并进行配置 1.1后端配置: 1.1.1applicatio…

【FFmpeg学习】视频变慢处理

视频慢动作处理是个比较常用的操作,可以在播放的时候处理,这里我们考虑把视频修改为慢动作,使用ffmpeg命令,可以这样 ffmpeg -i test.mp4 -vf "setpts5*PTS" -an test_slow3.mp4 这里把视频放慢了5倍,生成…

解锁未来:探秘Zxing二维码技术的神奇世界

解锁未来:探秘Zxing二维码技术的神奇世界 1. 引言 在当今数字化和智能化的社会中,二维码技术已经成为人们生活中不可或缺的一部分。从商品购物、支付结算到健康码、门票核销,二维码无处不在,极大地方便了人们的生活和工作。而Zx…

Python-2

21. 请解释Python中的深拷贝(Deep Copy)和浅拷贝(Shallow Copy)以及它们的应用场景。 在Python中,拷贝对象时会涉及到深拷贝(Deep Copy)和浅拷贝(Shallow Copy)两个概念…

单源最短路总结+练习题

单源最短路总结 文章目录 单源最短路总结建图方式普通无向图邻接表建图新建源点建图正反建图spfa 单源最短路综合运用dijkstradfsdijkstra二分答案 未完待续....... 建图方式 普通无向图邻接表建图 板子题 1129. 热浪 - AcWing题库 找最短路里的最长路 1128. 信使 - AcWin…

每日五道java面试题之java基础篇(九)

目录: 第一题 你们项⽬如何排查JVM问题第二题 ⼀个对象从加载到JVM,再到被GC清除,都经历了什么过程?第三题 怎么确定⼀个对象到底是不是垃圾?第四题 JVM有哪些垃圾回收算法?第五题 什么是STW? 第…

MySQL 基础知识(六)之数据查询(二)

目录 6 数值型函数 7 字符串函数 8 流程控制函数 9 聚合函数 10 分组查询 (group by) 11 分组过滤 (having) 12 限定查询 (limit) 13 多表查询 13.1 连接条件关键词 (on、using) 13.2 连接算法 13.3 交叉连接 (cross join) 13.4 内连接 (inner join) 13.5 外连接 …

力扣hot3--并查集+哈希

第一想法是排个序然后遍历一遍,but时间复杂度就超啦 并查集居然与哈希结合了() 已经好久没用过并查集了,,,我们用哈希表f_node中来记录原结点的父节点,其中key是原结点,value是父节点…

Cannot resolve symbol ‘@+id/modifyAvatar‘

问题 Cannot resolve symbol id/modifyAvatar详细问题 笔者进行Android开发,创建组件id,报红。 鼠标放置报红处,提示 Cannot resolve symbol id/modifyAvatar解决方案 顶部菜单栏 → \rightarrow →Build → \rightarrow →Rebuild proje…

推荐《架构探险:从零开始写Java Web框架》

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 春节读了《架构探险:从零开始写Java Web框架》,一本大概10年前的好书。 本书的作者是阿里巴巴架构师黄勇。黄勇对分布式服务架构与大数据技术有深入…

QT 菜单栏

添加/删除菜单栏 默认情况下QMainWindow项目一创建就自带了菜单栏,可以在对象树窗口中,右键菜单栏对象,移除菜单栏: 删除后也可以创建菜单栏,此时在对象树中右键MainWindow对象,菜单里边会多了创建菜单栏的…

Repo命令使用实例(三十八)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

相机图像质量研究(18)常见问题总结:CMOS期间对成像的影响--CFA

系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…

c++STL系列——(九)迭代器

在C的标准模板库(STL)中,迭代器(iterator)是一种提供对容器中元素访问的抽象概念,它为STL提供了统一的访问接口,使得算法可以独立于具体容器类型进行操作。迭代器类似于指针,允许我们…

js中函数缓存详解(如何实现和应用场景)

文章目录 一、是什么二、如何实现闭包柯里化高阶函数 三、应用场景参考文献 一、是什么 函数缓存,就是将函数运算过的结果进行缓存 本质上就是用空间(缓存存储)换时间(计算过程) 常用于缓存数据计算结果和缓存对象 …

Vue2学习第二天

Vue2 学习第二天 1. 数据绑定 Vue 中有 2 种数据绑定的方式: 单向绑定(v-bind):数据只能从 data 流向页面。双向绑定(v-model):数据不仅能从 data 流向页面,还可以从页面流向 data。 备注: 双向绑定一般都应用在表单…

Kotlin:单例模式(项目使用实例)

摘要 单例模式主要的五种如下: 饿汉式懒汉式线程安全的懒汉式双重校验锁式(Double Check)静态内部类式 一、项目使用单例模式实例场景 app在运行时缓存部分数据,作为全局缓存数据,以便其他页面及时更新页面对应状态的数据&…

[爬虫] 爬取B站的弹幕,通过bvid或者a_id、c_id

起因: 我需要爬取B站的动漫信息,包括弹幕 可能用到的API: 获取动漫的每集信息(包含a_id和c_id) https://api.bilibili.com/pgc/web/season/section?season_id34404 获取弹幕(需要a_id和c_id&#xff09…