es6模块化的导入与导出

简介:

模块:可以理解为一个个独立的文件;

es6模块化:一个个独立文件里面定义的变量及方法外部无法获取,我们希望外部可以读取模块内部的变量及方法.

用法:

其一,es6模块化之默认导出与导入
一: 1,有一个文件名为m1.js

  2,该文件定义了如下私有变量

let a =10;

let b =20;

let c =30;

function show(){}

3,将本文件模块的私有成员暴露出去

export default {

    a,

    b,

    show

}   

二:在其他js文件中引入使用m1.js暴露的成员

1,导入模块成员,M为自定义名称

import M from './m1.js'

2,打印M

console.log(M)

打印结果为一个对象包含属性方法,c因为没有暴露,所以得不到

{a:10,b:20,show:[function:show]}

其二,es6模块化之按需导出与导入
一:1,有一个文件名为m1.js

 2,该文件按需导出了如下私有变量

  export let a=10;

export let b=20;

export function say=function(){};

二:在其他js文件中使用m1.js暴露的成员,a,b,c变量需要和暴露出的变量名相同,可以用as取别名

import {a,b as b2,say} from './m1.js';

2,打印

 console.log(a);//10

console.log(b);//20

 console.log(say);//[function:say]

其三,es6模块化之直接导出与导入
一:1,有一个文件名为m1.js

 2,该文件定义没有暴露私有成员,单纯的定义了一个for循环

 for(let i = 0;i<3;i++){

     console.log(i)

 }

   二:在其他js文件中直接引入

   import './m1.js'

小结
在一个模块中只能用一次默认导出,但是可以用多次按需导出;
在按需导出与导入中,导入时的变量名需要和暴露出的变量名相同,但是导入时我们可以用as取别名;

结语:遇见即缘分,错误之处,还望指出