位置: IT常识 - 正文

Javascript 模块导入导出(import export)(javascript导入包)

编辑:rootadmin
Javascript 模块导入导出(import export)

推荐整理分享Javascript 模块导入导出(import export)(javascript导入包),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript module,js模块的使用规则,javascript导入包,javascript module,javascript modules,js 模块 modules,js 模块 modules,js模块导入导出,内容如对您有帮助,希望把文章链接给更多的朋友!

笔者开始学习 Javascript 的时候,对模块不太懂,不知道怎么导入模块,导出模块,就胡乱一通试

比如 import xx from 'test.js' 不起作用,就加个括号 import {xx} from 'test.js'

反正总是靠蒙,总有一种写法是对的,其实还是没有理解,还是不懂

尤其是在当初写 www.helloworld.net 网站的时候,一遇到这种问题,就懵逼了,尤其是引入第三方库的时候

这种情况下更多,此篇文章也是为了怕以后忘记,自查用的,也希望能帮助更多的朋友,此篇文章只是针对 ES6 的模块相关知识

首先要知道 export,import 是什么

我们知道,JS 模块导入导出,使用 import , export 这两个关键字

export 用于对外输出本模块

import 用于导入模块

也就是说使用 export 导出一个模块之后,其它文件就可以使用 import 导入相应的模块了

下面我们具体看看, import 和 export 到底怎么用?怎么导出模块(比如变量,函数,类,对象等)

1 导出单个变量

//a.js 导出一个变量,语法如下export var site = "www.helloworld.net"//b.js 中使用import 导入上面的变量import { site } from "/.a.js" //路径根据你的实际情况填写console.log(site)//输出:www.helloworld.net

2 导出多个变量

上面的例子是导出单个变量,那么如何导出多个变量呢

//a.js 中定义两个变量,并导出 var siteUrl="www.helloworld.net" var siteName="helloworld开发者社区" //将上面的变量导出 export { siteUrl ,siteName } // b.js 中使用这两个变量 import { siteUrl , siteName } from "/.a.js" //路径根据你的实际情况填写 console.log(siteUrl)//输出:www.helloworld.net console.log(siteName)//输出:helloworld开发者社区

3 导出函数

导出函数和导出变量一样,需要添加 { }

//a.js 中定义并导出一个函数function sum(a, b) { return a + b}//将函数sum导出export { sum } //b.js 中导入函数并使用import { sum } from "/.a.js" //路径根据你的实际情况填写console.log( sum(4,6) ) //输出:10

4 导出对象

Javascript 模块导入导出(import export)(javascript导入包)

js 中一切皆对象,所以对象一定是可以导出的,并且有两种写法

4.1 第一种写法

使用 export default 关键字导出,如下

//a.js 中,定义对象并导出, 注意,使用export default 这两个关键字导出一个对象export default { siteUrl:'www.helloworld.net', siteName:'helloworld开发者社区'}//b.js 中导入并使用import obj from './a.js' //路径根据你的实际情况填写console.log(obj.siteUrl)//输出:www.helloworld.netconsole.log(obj.siteName)//输出:helloworld开发者社区

4.2 第二种写法

同样是使用 export default 关键字,如下

//a.js 中定义对象,并在最后导出var obj = { siteUrl:'www.helloworld.net', siteName:'helloworld开发者社区'}export default obj//导出对象obj//b.js 中导入并使用import obj from './a.js' //路径根据你的实际情况填写console.log(obj.siteUrl)//输出:www.helloworld.netconsole.log(obj.siteName)//输出:helloworld开发者社区

5 导出类

导出类与上面的导出对象类似,同样是用 export default 关键字,同样有两种写法

5.1 第一种写法

//a.js 中定义一个类并直接导出export default class Person { //类的属性 site = "www.helloworld.net" //类的方法 show(){ console.log(this.site) }}//b.js 中导入并使用//导入类import Person from './a.js'//创建类的一个对象personlet person = new Person()//调用类的方法person.show() //输出:www.helloworld.net

5.2 第二种写法

//a.js 中定义一个类,最后导出class Person { //类的属性    site = "www.helloworld.net" //类的方法 show(){ console.log(this.site) }}//导出这个类export default Person //b.js 中导入并使用//导入类import Person from './a.js'//创建类的一个对象personlet person = new Person()//调用类的方法person.show() //输出:www.helloworld.net

小结

下面我们简单总结一下

export 与 export default 的区别

export 与 export default 均可用于导出常量、函数、文件、模块等

可以在其它文件或模块中通过 import+(常量 | 函数 | 文件 | 模块) 名的方式,将其导入,以便能够对其进行使用

export default 后面不能跟 const 或 let 的关键词

export、import 可以有多个,export default 仅有一个。

通过 export 方式导出,在导入时要加 { },export default 则不需要

export 具名导出 xxx ,export default 匿名。区别在于导入的时候,export 需要一样的名称才能匹配,后者无论取什么名都可以。

模块化管理中一个文件就是一个模块,export 可以导出多个方法和变量,export default 只能导出当前模块,一个 js 文件中只支持出现一个

对于import ,export , export default ,他们的用法上面的例子已经很详细的列出了,忘记的时候,可以当作参考看看

最重要的还是要明白为什么要这么写,实在不明白记住就行了。

本文链接地址:https://www.jiuchutong.com/zhishi/297695.html 转载请保留说明!

上一篇:vue项目 移动端适配——rem(vue项目移动端怎么做适配)

下一篇:Vue3中watch监听对象的属性值,监听源必须是一个getter函数(vue watch监听localstorage变化)

  • 剪映怎么修改已有文字(剪映怎么修改已有的文字)

    剪映怎么修改已有文字(剪映怎么修改已有的文字)

  • apple pencil支持mini4吗(Apple Pencil支持机型)

    apple pencil支持mini4吗(Apple Pencil支持机型)

  • ps背景填充快捷键哪两个键(ps的背景填充快捷键)

    ps背景填充快捷键哪两个键(ps的背景填充快捷键)

  • 华为freebuds3防水等级(华为freebuds3防水标在哪里)

    华为freebuds3防水等级(华为freebuds3防水标在哪里)

  • syswow64可以删除吗

    syswow64可以删除吗

  • b站听音乐从哪里进(b站app音乐在哪)

    b站听音乐从哪里进(b站app音乐在哪)

  • 苹果快充18w充电有电流声(苹果18w快充充电速度)

    苹果快充18w充电有电流声(苹果18w快充充电速度)

  • 抖音注销是七天内不要登录吗(抖音注销是七天内能撤回吗)

    抖音注销是七天内不要登录吗(抖音注销是七天内能撤回吗)

  • 超广角摄像头有什么用(超广角摄像头有什么作用)

    超广角摄像头有什么用(超广角摄像头有什么作用)

  • m1903f11a是小米什么型号(m1903f2a是小米的哪个型号)

    m1903f11a是小米什么型号(m1903f2a是小米的哪个型号)

  • 京东过年期间发快递吗(京东过年期间发货吗)

    京东过年期间发快递吗(京东过年期间发货吗)

  • 抖音作品删除会不会影响播放量(抖音作品删除会影响账号吗)

    抖音作品删除会不会影响播放量(抖音作品删除会影响账号吗)

  • 支付宝无收款权限怎么解决(支付宝无收款权限要多久恢复?)

    支付宝无收款权限怎么解决(支付宝无收款权限要多久恢复?)

  • 苹果5s为啥不能用4g(苹果5s为啥不能玩金铲铲)

    苹果5s为啥不能用4g(苹果5s为啥不能玩金铲铲)

  • 微机总线包括(微机总线包括哪两部分)

    微机总线包括(微机总线包括哪两部分)

  • 华为曲屏手机容易摔碎吗(华为曲屏的屏幕容不容易碎)

    华为曲屏手机容易摔碎吗(华为曲屏的屏幕容不容易碎)

  • 微信查驾驶证分数怎么查询(微信怎么查驾驶证分)

    微信查驾驶证分数怎么查询(微信怎么查驾驶证分)

  • 华为p30有什么功能(华为p30有什么功能介绍一下)

    华为p30有什么功能(华为p30有什么功能介绍一下)

  • 华为p30pro超级夜景在哪里(华为p30pro夜景如何使用)

    华为p30pro超级夜景在哪里(华为p30pro夜景如何使用)

  • 1mpa等于多少pa(1pa等于多少N/m2)

    1mpa等于多少pa(1pa等于多少N/m2)

  • 荣耀v20的指纹解锁在哪里(荣耀v20指纹解锁设置不见了)

    荣耀v20的指纹解锁在哪里(荣耀v20指纹解锁设置不见了)

  • 手机打不开视频怎么回事(苹果手机打不开视频)

    手机打不开视频怎么回事(苹果手机打不开视频)

  • 小米8通话对方听不到(小米8通话对方有回应)

    小米8通话对方听不到(小米8通话对方有回应)

  • 系统总线中控制线的功能是(系统总线控制板的作用)

    系统总线中控制线的功能是(系统总线控制板的作用)

  • 在outlook中保留更多历史邮件(outlook永久保留邮件)

    在outlook中保留更多历史邮件(outlook永久保留邮件)

  • 关于内容模型字段里的“自动表单”和“固化字段”(模型的内容)

    关于内容模型字段里的“自动表单”和“固化字段”(模型的内容)

  • 增值税发票综合服务平台密码
  • 应交税费的借贷方向
  • 中国电信的通信网络
  • 个人所得税中社保填写在哪昆山
  • 什么公司可以核算成本
  • 其他收益里的政府补助免税吗
  • 产业增加值就是增长率吗
  • 代收款需要开票吗
  • 季度申报残保金怎么填写
  • 旅游业全额开票可以差额征税吗
  • 注销地税需要缴纳什么税费
  • 营改增结束了吗
  • 重复缴税怎么做账
  • 购买未完工的厂房会计分录
  • 凭证可以部分冲销吗
  • 房地产未确认收入情况说明
  • 不得税前扣除的税金
  • 出差补贴是否缴纳个人所得税 北京
  • 普票3点怎么算
  • 小型微利企业所得税优惠政策
  • 开票含税和不含税怎么切换视频讲解
  • 销售库存商品会引起收入增加吗
  • 坏账收回的账务处理方法
  • 材料票可以直接在税务局开吗
  • 产权交易费用
  • 即征即退收入是否计入三免三减半所得
  • 个人所得税应纳税额计算表图片
  • 外购固定资产入账
  • 增加间接费用科目的方法
  • 航天信息服务费是什么费用
  • win11如何将开始菜单里的软件移到桌面
  • 公司支付员工工伤医疗费怎么入账
  • 企业重组税收政策汇编
  • 动态定位
  • 小规模纳税人按季度申报
  • 固定资产折旧怎么做账务处理
  • 房地产企业如何计算土地使用税
  • 企业在境外发生业务国外缴税后国内怎么做
  • 长期应收款属于流动资产吗
  • 铡刀演示
  • 【Pytorch深度学习50篇】·······第六篇:【常见损失函数篇】-----BCELoss及其变种
  • 资产负债表其他应收款计算公式
  • 跨平台 gui
  • 机动车发票冲红太多会怎么样
  • 物业收取停车费需要业主同意吗
  • 私人帐户可以转账给对公账户吗
  • 补记以前年度固定资产怎么记账
  • 企业所得税季度预缴怎么计算
  • 内账中采购另付的税点算成本还是费用
  • 劳动报酬所得收入额大于4000
  • 哪些合同必须签订书面合同
  • 应收业务处理流程
  • 什么叫增值入股
  • 企业做税务局迁移应该做哪些事情
  • 会计分录结转进项怎么算
  • 公司土地被征收怎么办
  • 从工程款中扣除质保金
  • 关联企业费用分摊账务
  • 营业利润为负数表示什么
  • 自产委托加工的货物用于非增值税应税项目
  • 业务招待费包含样品费吗
  • 企业给职工提供的免费住房是不是合法住宅?
  • 残联对残疾人的补助资金是多少
  • u8委外怎么核销
  • 坏账准备转回是什么意思
  • sqlserver临时表 效率
  • upskill
  • xpkw
  • centos7配置vncserver
  • win8.1快捷键
  • linux的samba是什么
  • pm2使用手册
  • android4.4w
  • 分析师:董明珠让格力为豪赌买单
  • python twinter
  • unity loom插件
  • js验证码代码怎么写
  • 出口退税退运需要什么
  • 新疆维吾尔自治区民族团结进步工作条例
  • 经济适用房土地使用年限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设