一、模块化的概念：
在进行项目分析或者编码时，先把项目进行拆分，拆分成很多的类，对象，很多的函数等等。能够提高代码的复用性。这些被拆分出来的类型，对象，函数就是模块。就像一辆汽车是由很多的零部件组成，每个零部件就是一个小模块，而由很多零件组成的发动机之于一辆汽车可以认为是一个大模块；或者说，一台计算机，由主板，cpu，内存，硬盘，显示器，键盘等大模块组成。而一个内存或者cpu又分别由很多的小模块组成。以模块为单位管理代码，会更加独立，调试方便，维护也很方便。
二、模块化经历的阶段：
1. 函数封装
这种做法的缺点很明显：污染了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间没什么关系。不同js文件里有相同的全局变量，如果被引入到同一个html文件中，全局变量就会互相影响。
2. 对象
这样避免了变量污染，只要保证模块名唯一即可，同时同一模块内的成员也有了关系，看似不错的解决方案，但是也有缺陷，外部（对象之外）可以随意修改内部成员(属性)
对象的属性就是对象中每个方法的全局变量。
var p = {
id:"007",
name :"芙蓉",
age:25,
eat:function(str){
alert(this.name+"在吃"+str);
},
work:function(str){
alert(this.name+“在干"+str);
}
}
3. 立即执行函数
可以通过立即执行函数，来达到隐藏细节的目的
var p = (function (){
var name="芙蓉";
var age=25;
function eat(str){
alert(this.name+"在吃"+str);
}
function setAge(age){
if(age<0 || age>150){
alert("亲，年龄超出有效值（0-150）的范围");
return;
}
age = age;
}
function getAge(){
return age;
}
return {
eat:eat,
setAge:setAge,
getAge:getAge
}
})();
var p = (function (){
var name="芙蓉";
var age=25;
function eat(str){
alert(this.name+"在吃"+str);
}
function setAge(age){
if(age<0 || age>150){
alert("年龄超出有效值（0-150）的范围");
return;
}
age = age;
}
function getAge(){
return age;
}
return {
eat:eat,
setAge:setAge,
getAge:getAge
}
})();
4. 模块化的解决方案。
以上模块化存在的问题：
不管是以上哪种方式（函数，对象，立即执行函数），都存在同样的问题：
1)、html不但要引入自己需要的js文件，还需要引入js文件需要的js文件。如：a.html需要使用 b.js的代码，而由于b.js中使用了c.js里的代码。所以，在a.html中必须引入b.js和c.js。这是JavaScript语言先天性的缺陷----js文件没法引入js文件。其它编程语言（java，c#，c/c++）就不存在这个问题。
2)、引入js文件的顺序问题以及异步加载问题。
为此出现了一些解决方案：
1)、前端模块化：在前端里出现了第三方的解决方案 AMD和CMD
2)、后端模块化：在后端里（nodeJS）出现了commonJS规范。
三、ES6的模块化：
1、原生支持模块化了
ES6中新增的模块化，即从ES6开始，原生js支持模块化了，现在很多浏览器也支持模块化了。
2、模块化的两个概念
1）、导出（export关键字）：导出就是对外开放的，可以导出变量，常量，函数，对象等等。使用export关键字。放在export关键字后面的（即对外导出的）变量，常量，函数和对象，在其它js文件中可以使用，否则，其它js文件中是不能使用的。即只能内部使用的。
在用export导出时，可以导出多个
2）、导入（import）：导入就是把其它js文件引入到当前js文件里。使用关键字import。
3）、在html文件中引入index.js（注意： type="module"）注意：js中使用了模块化的关键字import，在引入时，script标签的type属性的值必须写成module。
即：<script type="module" src="js/index.js"></script>
4）export default和export 有什么区别：
- export与export default均可用于导出常量、函数、文件、模块等
- 在一个文件或模块中，export可以有多个，export default仅有一个，而且export default在导出是不需要变量名，相当于匿名的。
- 通过export方式导出，在导入时要加{ }，export default则不需要。