JavaScript ES6中export、import与export default的用法和区别
前言
相信很多人都使用过export、export default、import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法。
ES6 import和export的用法
ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。
ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS和AMD规范,成为浏览器和服务器通用的模块解决方案。
ES6模块主要有两个功能:export和import
- export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
- import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。如下(假设a和b文件在同一目录下)
1
2
3
4
5
6
7
8
9
|
// a.js var sex= "boy" ; var echo= function (value){ console.log(value) } export {sex,echo} //通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到 //不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。 |
1
2
3
4
5
|
// b.js 通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。 import {sex,echo} from "./a.js" console.log(sex) // boy echo(sex) // boy |
a.js文件也可以按如下export语法写,但不如上边直观,不太推荐。
1
2
3
4
5
6
7
8
9
10
|
// a.js export var sex= "boy" ; export var echo= function (value){ console.log(value) } //因为function echo(){}等价于 var echo=function(){}所以也可以写成 export function echo(value){ console.log(value) } |
以上是export与module的基本用法,再进行拓展学习
前面的例子可以看出,b.js使用import命令的时候,用户需要知道a.js所暴露出的变量标识符,否则无法加载。可以使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
1
2
3
4
5
|
//a.js var sex= "boy" ; export default sex(sex不能加大括号) //原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。 其实此处相当于为sex变量值 "boy" 起了一个系统默认的变量名 default ,自然 default 只能有一个值,所以一个文件内不能有多个export default 。 |
1
2
3
4
5
|
// b.js 本质上,a.js文件的export default 输出一个叫做 default 的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含 import any from "./a.js" import any12 from "./a.js" console.log(any,any12) // boy,boy |
ES6中export、import与export default区别
在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等,你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用,但在一个文件或模块中,export、import可以有多个,export default仅有一个。
具体使用:
1、
1
2
3
4
5
6
|
//demo1.js export const str = 'hello world' export function f(a){ return a+1 } |
对应的导入方式:
1
2
|
//demo2.js import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号 |
2、
1
2
|
//demo1.js export default const str = 'hello world' |
对应的导入方式:
1
2
|
//demo2.js import str from 'demo1' //导入的时候没有花括号 |
总结
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持
JavaScript ES6中export、import与export default的用法和区别的更多相关文章
- 彻底理解JavaScript ES6中的import和export
0.前言 前端工程,在最早的时候是没有模块的概念的.随着前端工程的发展,前端开发也越来越规范化,更像是软件工程了.那么随之而来的,为了解决工程化的问题,就引入了模块的概念.但是在早期,因为ecmasc ...
- ES6中的import与export对class操作相关用法举例
两种用法: 一.指定输出类名 // export 输出 export class App extends React.Componet { // ..code } // import 引入 impor ...
- JavaScript ES6中export及export default的区别以及import的用法
本文原创地址链接:http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632,未经博主允许不得转载. 相信很多人都使用过export.e ...
- JavaScript ES6中export及export default的区别
相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在JavaScript ES6中,export与export default均可用于导出常量.函 ...
- JavaScript ES6中,export与export default
自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...
- ES6 模块导入import 导出export 和module.export
ES6中新增了模块的导入和导出功能 在实际过程中可以使用 import 和 export 对模块进行导入和导出操作,具体如下 1. 名字导入/导出 (导入名字必须与导出的一致,导入时需要用花括号) ...
- JavaScript ES6中export、export default、import用法和区别
相信熟悉JS ES6的同学都知道export.export default是导出,import是导入的意思. 那么问题就来了, 1.import 导入要怎么用? 2.export.export def ...
- ES5和ES6中关于import & export的书写方式的区别
ES6中输出变量的写法 情景1:单个变量 输出 export const less = 'less' 引用 import {less} from '../index.js' 情景2:多个变量 输出: ...
- ES6标准中的import和export
在ES6前, 前端使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具 ...
随机推荐
- connect to SQL Server in python on centos
在centos 6.5 下python使用pyodbc连接sql server 报错: [unixODBC][Driver Manager]Can't open lib 'SQL Server'... ...
- vue-cli项目中引入全局scss
加载一个全局设置文件 在每个组件里加载一个设置文件,而无需每次都将其显式导入,是一个常见的需求.比如为所有组件全局使用 scss 变量.为了达成此目的: npm install sass-resour ...
- sql视频学习关键笔记(自用记单词与学习用)
sql字段类型 numeric(18,3)-18位整数加3位小数点(货币计量最好选这类型) sql关键字 insert. update. delete alter grant 授权. revoke 回 ...
- Spring Boot关于layui的通用返回类
1.关于layui的通用返回类 code.count.data.msg public class Msg { private long code = 0; private long count = 0 ...
- pyqt5-橡皮筋控件QRubberBand
提供一个矩形或线来指示选择或边界 一般结合鼠标事件一同协作 继承于 QWidget import sys from PyQt5.QtWidgets import QApplication, QWidg ...
- 利用雅虎ycsb对cassandra做性能测试
准备: 环境: 两台虚拟机:ip:192.168.138.128/129;配置:2核4G: 版本:apache-cassandra-3.10 ycsb-cassandra-binding-0.1 ...
- vue-cli3.0配置
仅在项目根目录中新建vue.config.js文件即可,部分配置如下 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'di ...
- 【leetcode】1170. Compare Strings by Frequency of the Smallest Character
题目如下: Let's define a function f(s) over a non-empty string s, which calculates the frequency of the ...
- 完美解决linux不能编辑sshd_cofig和实现xshell远程连接的问题
第一步:我们使用命令行vim /etc/ssh/sshd_config 执行修改,强制保持 :wq! 系统不让我们修改这个文件 "/etc/ssh/sshd_config" ...
- 判断img的src为空/点击时候两张图片来回替换
if($('.icon-right img').src==null){ $('.span-gray').addClass('c8'); } <img> ///////////// < ...