ECMAScript6--19.Module模块化

1.模块化

基本概念
ES6的模块化语法
- 模块的引入import；
- 模块的导出export；

2.基本用法
需求：
1.有一个变量需要导出去，对外提供一个变量；
2.有一个函数需要其他模块可以拿到（需要暴露出去的）；
3.一个类需要暴露出去的；

a.js

//导出用export；导出了3个需要对外暴露的变量、函数、类；
export let A =123;
exprot function test(0){
    console.log('test'):
}
export class Hello{
    test(){
        console.log('class');
    }
}

怎样在其他模块中引入这些模块呢？
index.js

import {A,test,Hello} from a.js(路径)
console.log(A,test,Hello);
//输出：123 
//function test(){console.log('test');}  
//function Hello(){ _classCallCheck(this,Hello);}

3. import * as 存放方法的对象 from 路径
1.如果模块非常复杂，导出的东西特别多，要在导出的文件中一一导出来吗？
2.这个模块虽然导出来很多，但只关心其中的几个；

index.js

//解决第一个问题；
//只需要拿到A这个变量，后两项就可以了不要了,花括号{}中需要哪项就拿哪项
import {A} from a.js(路径)
console.log(A); //123

当内容很多的时候，我们需要再花括号中对应原来的文档一个一个找导出的名称，不现实；

index.js

//*代表导入的所有的东西；
//as 起一个别名；
//as a 那些方法都存放到a这个对象下面，不管有多少个，* as a都可以将它全部导出
import * as a  from a(路径)
console.log(a.A,a.test); 
//123 functon test(){console.log('test');}

4.推荐这种方式
好处：
1.不会因为一些误操作不小心把一些变量导出了；
2.通过export default可以由第三方引用的时候，不需要回看起的什么名称和那个文件一一对应；

a.js

let A = 123;
let test = function(){
    console.log('test');
};
class Hello{
    test(){
        console.log('class');
    }
}

//default 给导出的对象不起名字，随便起都行，把这个权利交给引入方；
export default{
    A,
    test,
    Hello
}

index.js

import aaa from a.js路径;
console.log(aaa.A); //123

ECMAScript6--19.Module模块化

推荐阅读更多精彩内容