前端模块化-为什么

​ 随着前端项目越来越大，团队人数越来越多，多人协调开发一个项目成为常态。例如现在小明和小张共同开发一个项目，小明定义一个aaa.js，小张定义了一个bbb.js。

> aaa.js

```javascript

//小明开发

var name = '小明'

var age = 22

function sum(num1, num2) {

  return num1 + num2

}

var flag = true

if (flag) {

  console.log(sum(10, 20));

}

```

此时小明的`sum`是没有问题的。

> bbb.js

```javascript

//小红

var name = "小红"

var flag = false

```

此时小明和小红各自用各自的`flag`你变量没问题。

> 但是此时小明又创建了一个mmm.js

```javascript

//小明

if(flag){

  console.log("flag是true")

}

```

在index.html页面导入这些js文件

```php+HTML

  <script src="aaa.js" ></script>

  <script src="bbb.js" ></script>

  <script src="ccc.js" ></script>

```

此时小明知道自己在aaa.js中定义的`flag`是`true`，认为打印没有问题，但是不知道小红的bbb.js中也定义了`flag`为`true`，所以mmm.js文件并没有打印出“flag是true”。

> 这就是全局变量同名问题。

## 使用导出全局变量模块解决全局变量同名问题

> aaa.js

```javascript

//模块对象

var moduleA = (function (param) {

  //导出对象

  var obj = {}

  var name = '小明'

  var age = 22

  function sum(num1, num2) {

    return num1 + num2

  }

  var flag = true

  if (flag) {

    console.log(sum(10, 20))

  }

  obj.flag=false

  return obj

})()

```

> mmm.js

```javascript

//小明

//使用全局变量moduleA

if(moduleA.flag){

  console.log("flag是true")

}

```

这样直接使用aaa.js导出的moduleA变量获取小明自己定义的`flag`。