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 