关于es6:ES6之export和import的用法

前言

在我的项目开发的过程中，一些共用的数据、办法、类等能够封装成模块进行输入，咱们在须要的中央加载该模块，就省去了大量的重复性代码。
如何模块化开发就用到了ES6的常识：export和import。

export

相对输入

就是肯定要有变量名或者办法名，能力进行输入。

export function test () {} //正确的
export function () {} //谬误的

能够间接在变量、办法前进行export

export var test = "123"
export var test = function () {} 
export var test = function test1 () {} //输入test变量
export function test () {}

在任意地位进行export输入变量

必须给输入的变量名或者办法名加括号{}

var test = "123"
export {test}
var test1 = function () {} 
export {test1}

应用规定

一个文件中能够屡次应用export并且export也能够一次输入多个变量

var test = "123"
export {test}
var test1 = function () {} 
export {test1}
export {test,test1}

export default

默认输入

就是不搞绝对化了，我默认输入一个变量或者办法（匿名办法也能够），你援用的时候能够用任意变量名进行援用。
从实质上来说 export default就是输入一个定义为default的变量或办法，所以它前面不能跟变量申明语句

export default function () {} //也是正确的
export default var test = function () {} //谬误的

能够间接在变量、办法前进行export default

export default function () {} 
export default function test () {} 

在任意地位进行export default输入变量

不须要给输入的变量名或者办法名加{}

var test = "123"
export default test
///////
var test1 = function () {} 
export default test1

应用规定

一个文件中只能应用一次export default并且export default一次只能输入一个变量

import

应用export命令定义了模块的对外接口当前，其余 JS 文件就能够通过import命令加载这个模块。

加载export输入的模块

加载的模块的变量名、函数名必须与export输入的变量名统一且须要加括号{}

//index.js文件
var test = function () {}
export {test}
//同文件夹下test.js文件
import {test} from './index.js' //正确的
import test from './index.js' //谬误的
import {test1} from './index.js' //谬误的

加载export default输入的模块

加载的模块的变量名、函数名能够是任意的且不须要加括号{}

//index.js文件
var test = function () {}
export default test
//同文件夹下test.js文件
import test from './index.js' //正确的
import test1 from './index.js' //正确的

import()

应用import()函数，能够实现动静加载。

import('./index.js')
.then((res) => {
  // ...
});

• import()返回一个Promise对象，import()加载模块胜利当前，这个模块会作为一个对象，当作then办法的参数。
• import()是异步加载。
• import()通常用于按需加载、条件加载、动静的模块门路。