模塊化開發的核心？
核心：導出和導入；
1、普通模塊化：
同級新建文件index.html,a.js.b.js三個文件；
index.html中引入a.js和b.js。（a.js在前）
<script src="a.js"></script>
<script src="b.js"></script>
a.js中導出：
var modules=(function(){
var name='jack';
var flag=true;
function num(a,b){
return a+b;
}
var obj={};
obj.flag=flag;
obj.num=num;
obj.name=name;
return obj;
})()
b.js中導入：
console.log(modules.name)//jack
console.log(modules.num(1,6))//7
console.log(modules.flag)//true
在b.js可以取出a.js中obj的值。
2、commonJs模塊化：export
a.js導出：
var name='jack';
var flag=true;
function num(a,b){
return a+b;
}
export.module({
name,
flag,
num
)}
b.js導入：
var {name,flag,num}=require('a.js的路徑');//name,flag,num可以直接用
var obj=require('a.js的路徑');//obj.name='jack',obj.flag=true,obj.num(1,6)=7
3、es6模塊化：export導出,import導入
export的基本使用：
a.js:
導出方式一：
export var name="jack";
export var height=1.88;
導出方式二：
var name="jack";
var height=1.88;
export {name,height};
b.js
import {name,height} from 'a.js';
console.log(name);//jack
console.log(height);//1.88
4、導出函數或類：
//直接導出
//export const num1=123;
//導出函數：
export function add(num1,num2){
return num1+num2
}
//導出類
export class Person{
run(){console.log('this.a')}
}
//導入函數和類
import {add,Person} from './export.js'
console.log(add(1,2));
const p=new Person();
p.run()
5、export default:導入者自己命名。(同一個模塊中只能有一個default)
//導出
export default function(){
console.log('this.default');
}
//導入
import de from './export.js';
de();
6、普通html中引入export的兩個js文件，需要給script的type設為module;
<script type="module" src="a.js"></script>
7、全部統一導出：*可以導入模塊中所有的export變量，
import * as all from './export.js';//all，為*的別名，方便后續使用。
console.log(all.num1,'aaa')
