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