首页登陆欢迎您!
首页登陆 > 运维知识 > JavaScript ES6中export、import与export default的用法和区别_javascript技巧_脚本之家

JavaScript ES6中export、import与export default的用法和区别_javascript技巧_脚本之家

时间:2019-12-15

总结

ES6模块化的import和export用法方法总括,es6export

ES6以前早已面世了js模块加载的方案,最根本的是CommonJS和英特尔规范。commonjs重要行使于服务器,达成同步加载,如nodejs。英特尔标准行使于浏览器,如requirejs,为异步加载。同期还会有CMD标准,为一齐加载方案如seaJS。

ES6在言语规格的范围上,完毕了模块功效,并且贯彻得一定轻松,完全能够代替现存的CommonJS和英特尔标准,成为浏览器和服务器通用的模块应用方案。

ES6模块主要有七个作用:export和import

export用于对外输出本模块(叁个文书能够清楚为二个模块)变量的接口

import用于在二个模块中加载另五个含有export接口的模块。

也便是说使用export命令定义了模块的对外接口以往,其他JS文件就足以经过import命令加载这一个模块(文件)。如下图(假诺a和b文件在同等目录下卡塔尔(英语:State of Qatar)

// 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的值,因为没有对外输出变量接口,只是输出的字符串。

// b.js
通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js" 
console.log(sex)  // boy
echo(sex) // boy

a.js文件也能够按如下export语法写,但与其说上边直观,不太推荐。

// 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命令,为模块钦点暗许输出,那样就无需领悟所要加载模块的变量名。

//a.js
var sex="boy";
export default sex(sex不能加大括号)
//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。

// 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在此之前曾经面世了js模块加载的方案,最根本的是CommonJS和AMD标准。commonjs主要使用于服务器,...

ES6模块首要有三个职能:export和import

//demo1.jsexport const str = 'hello world'export function f{ return a+1}

//demo2.jsimport { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号

//demo1.jsexport default const str = 'hello world'

//demo2.jsimport str from 'demo1' //导入的时候没有花括号
// a.jsvar sex="boy";var echo=function{ console.log}export {sex,echo} //通过向大括号中添加sex,echo变量并且export输出,就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到//不能写成export sex这样的方式,如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值,因为没有对外输出变量接口,只是输出的字符串。

// b.js通过import获取a.js文件的内部变量,{}括号内的变量来自于a.js文件export出的变量标识符。import {sex,echo} from "./a.js" console.log // boy

前言

ES6中export、import与export default区别

ES6在言语规格的规模上,实现了模块功用,何况落实得一定轻易,完全能够替代现成的CommonJS和英特尔标准,成为浏览器和服务器通用的模块解决方案。

//a.jsvar sex="boy";export default sex//原本直接export sex外部是无法识别的,加上default就可以了.但是一个文件内最多只能有一个export default。其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default,自然default只能有一个值,所以一个文件内不能有多个export default。

// b.js本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名,且不需要用大括号包含import any from "./a.js"import any12 from "./a.js" console.log // boy,boy

ES6 import和export的用法

好了,以上就是那篇作品的全体内容了,希望本文的原委对我们的求学或然干活能推动一定的赞助,即使有问号我们能够留言沟通,多谢我们对剧本之家的帮忙。

上一篇:vue2.0+vue-router构建一个简单的列表页的示例代码_vue.js_脚本之家 下一篇:没有了