前言

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