乐趣区

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

jiezi

前言

在我的项目开发的过程中，一些共用的数据、办法、类等能够封装成模块进行输入，咱们在须要的中央加载该模块，就省去了大量的重复性代码。
如何模块化开发就用到了 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() 通常用于按需加载、条件加载、动静的模块门路。
退出移动版