模块化及ES6模块化

前言

在了解什么叫模块化之前，我们先了解一下在没有模块化之前所遇到的问题。
遇到的问题：
1，变量名冲突。当我们在做项目时可能会出现同时引许多不同的js文件，那不可避免的就会出现变量名重复，前面的会被后面的覆盖，造成一系列错误。
2，js文件依赖顺序。多个文件之间存在着依赖关系，要保证程序不出错，就必须捋清加载顺序。

什么是模块化？

模块化的本质：一个实现特定功能的js文件
模块化开发：是一个管理方法，一种生产方式，解决上述问题的方案。更方便我们使用已写好的代码，想要实现什么功能，就加载什么模块，如积木，需要什么形状，就是用什么样的积木。

模块化的优点

1. 各个文件之间避免了变量名冲突
2. 减少了全局变量
3. 模块化的外部无法修改闭包内部变量，增加程序的稳定性
4. 明确依赖关系
   **

ES6模块化

ES6之前无模块化，ES6第一次支持了模块化。
ES6模块化有三种方式：

1，闭包+自执行函数；

  利用闭包和自执行函数

var 模块名 = (function(){
    return {
      变量1,
      变量2
    }
})
变量名.变量;

此方法是所有模块化的基础,

2，extport导出与import导入

基础导出

再引入模块js文件时，需要在script标签中加入type=“module”
export 变量的声明与赋值

export default {
  fn(){
    console.log("昨夜星辰昨夜风，画楼西畔桂堂东");
  },
  age:15
}

import {变量名} from “模块路径”

import ss from "./a.js";
ss.fn();
console.log(ss.age);

输出结果为

如果需要抛出多个变量名，则可以将这些变量包装成对象输出。
如过不想暴露模块中的变量可以用as来操作

var aNum = 10;
var aStr = "a";
export {
  aNum as num,
  aStr as str
}

import {num,str} from "./a.js";

console.log(num,str);

默认导出

一个模块只能有一个默认导出。对于默认导出，导入的名称可以不一样。

export default function(){
  console.log("此去泉台招旧部，旌旗十万斩阎罗");
}

import ss from "./a.js";
ss();

可以导出对象

export default {
  fn(){
    console.log("此去泉台招旧部，旌旗十万斩阎罗");
  },
  age:18
}

import ss from "./a.js";
ss.fn();
console.log(ss.age);

基础导出与默认导出（混合使用）

export default {
  fn(){
    console.log("此去泉台招旧部，旌旗十万斩阎罗");
  },
  age:18
}

export let userName = "zhangsan"

import ss,{userName} from "./a.js";
ss.fn();
console.log(ss.age);
console.log(userName);

3，引入第三方类库

如：sea.js 与 require.js