前端模块化解释（完整版）

模块化的话，不是一种新的技能而是一种高级思维（用于帮我们解决一些问题）

如果你是未使用模块话的毕业生的话，你在公司接收项目的时候可能会遇到的问题；

1，变量名的冲突，不同文件中的变量名如果重名的话，前面的会被后面的覆盖，造成程序的执行错误，

2，文件依赖顺序；多个文件之间如果存在依赖关系，需要保证加载顺序的准确，

什么是模块化

模块化本质：准确来说就是实现特定功能的js文件。

模块化开发：是一个管理方法，是一种生产方法，解决问题的方案，

模块化可以让我们更方便的使用已经写好的代码，想要实现什么功能，就加载什么模块，就好像积木，需要拼接什么形状,就使用相应的积木。

闭包和函数作用域

利用闭包和自执行函数。

var 模块名 = (function(){

  ....

  return {

    变量1，

    变量2

  }

})(引入其他的模块名...)

模块名.变量

这个方法是所有模块化的基础；

1，各种文件之间避免了变量名的冲突。

2，减少了全局变量

3，模块的外部无法修改闭包内部的变量，增加程序的稳定性

4，明确了依赖关系

2，es6模块化

在es6之间，是没有模块化的概念的，如果要使用的模块化的操作，一种是闭包+自执行函数，一种是引入第三方的类库。

es6第一次支持模块化，多了两个模块；

export导出

import导入

、————————————

 exprt   变量的声明赋值

这个是在一个文件导出

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

这个是在另一个模块导入（这个路径要是那个导出的模块的路径）

（注意）在引入模块文件时，需要在script标签中添加type属性，属性值为 module

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

如图我们想要抛出anum 和astr 但是我们又不想暴露变量名就可以用as来创建一个新的变量名，

接收的话就用那个我们用as创建的变量名就可以

默认导出

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

接下来话不多说看案例

我们接收的时候用了个ss接收了我们声明的默认的导出这个接收的变量名你想是啥就是啥

继续看案例接下来是导出对象

还有基础导出和默认导出话不多说看案例

好就这样