位置: 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变化)

  • 应交税费负数调整到其他非流动资产
  • 农产品加工会计分录
  • 小微企业应纳税所得额超过300万怎么办
  • 认缴出资怎么填财务报表
  • 新会计准则固定资产报废账务处理
  • 购销合同没有约定期限
  • 开了零税率的发票怎么办
  • 未收到发票可以计提成本吗
  • 维修费增值税怎么开
  • 借款给其他公司的会计分录怎么写
  • 成本费用分配的原则方法
  • 差旅费中的车票可以抵扣进项税吗
  • 公共租赁住房的供应对象不包括
  • 职工赔偿金的账务处理
  • win10系统更新出现错误代码
  • 收到的销项负数要认证吗
  • macbookprofacetime
  • win10excel闪退是什么原因
  • 电路改造计入什么科目
  • php如何实现伪静态
  • vue 使用高德地图
  • 前端框架react
  • 会计核算中 制度有哪些
  • 结转损益类收入的分录
  • 威尔士黄水仙
  • es6 promise await
  • jqueryfor
  • php技术
  • php对象是值传递还是引用传递
  • 去年计提的费用所得税汇算清缴之前冲销就不调整吗
  • 茶叶一般开多少度保存
  • 结转生产成品
  • 同业代付业务会计核算
  • 公司食堂开支如何记账
  • 销售产品用什么词形容
  • react高阶组件
  • 帝国cms调用api接口
  • 网上0申报怎么操作步骤
  • 基础电信服务和增值电信服务税率
  • 销售折扣购物卡对公司财务的好处
  • 销售货物的收入计入什么科目
  • 公司注销清算时个人股东如何计算个人所得税
  • 出口不退税进项税是否可以抵扣
  • 在非企业合并形成的长期股权投资中
  • 六税一费减免
  • 跨年发票应该如何处理
  • 季节性停工固定资产折旧计入什么科目
  • 固定资产的改良支出有哪些
  • 账本还用贴印花税票吗
  • 留抵税额和待抵扣进项税额区别
  • 其他应付款社保借方余额怎么处理
  • 冲红的发票抵扣联要放在凭证里吗
  • 在建工程领用工程物资
  • 固定资产的建造成本怎么计算
  • 税务会计应该设什么岗位
  • 使用命令行 -devmode
  • wsinspector.exe是什么进程
  • linux抓包语句
  • win7如何整理磁盘
  • win10打不开应用市场
  • linux系统有哪几个
  • jQuery实现checkbox的简单操作
  • Bullet(Cocos2dx)之凸多面体形状和组合形状
  • opengl绘制一个矩形
  • ubuntu sudo apt-get install
  • 网页制作css怎么用
  • 动态规划之矩阵连乘
  • jquery监听页面刷新
  • jquery 表格 排序
  • awk范围筛选
  • linux的syslog配置
  • 编写shell脚本,批量建立用户
  • Python循环遍历的题
  • mixed模型
  • 合作社的税率是多少
  • 税务干部转正工作总结
  • 土地增值税清算时间要求
  • 四川办税大厅
  • 个人所得税app可以更改电话号码吗
  • 电子缴款凭证可以用于报销吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设