模块化的核心

模块化核心：导出和导入；

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')