JS模块化

通常初学者开始写代码的时候所有的代码都放在一起，所以在看自己代码的时候会有一种特别乱，看不懂的感觉，这使得接下来的代码实现和优化变得很困难，因为你差不多忘了之前写得代码是什么功能（尽管你写了注释来提醒自己），只能明白这是一坨功能代码，这时你并没有模块化的概念。

那么为什么会有模块化的概念？在企业级的开发过程中，代码是需要多人协同编写的，如果你把代码写成一坨别人看不懂的东西，后果会很严重。所以在理想的情况下，开发者只需要实现核心的业务逻辑，其他的都可以加载别人写好的模块，也就是代码复用的思想，这样就能大大提高开发效率，但是在es6之前js并不“模块化”，所以javascript社区做出了一些努力，尝试在现有的运行环境中实现“模块”的效果。

原始写法：
模块就是实现一组特定功能的代码，可以简单理解为就是一些变量和函数组合的代码块

let value = 0
function fn1(){
  //......
}
function fn2(){
  //......
}

你当然可以把这块代码单独放入一个js文件中，并在需要它的地方引入，但这样就造成了“污染”全局变量的问题。

对象写法：
为了解决“污染”全局变量的问题，可以把模块写成一个对象，把所有的东西都放到这个对象里面

let module = {
  value: 0,
  fn1: function(){
    //...
  },
  fn2: function(){
    //...
  }
}

我们把所有的功能都封装在了module对象里，使用的时候可以直接调用对象的属性

module.fn1()

但是这样的方法会暴露所有成员，使得内部状态可以被随意篡改

module.value = 1

立即执行函数写法：
使用立即执行函数可以使得外部环境无法改写内部数据

(function (){
  value: 0,
  fn1: function(){
    //...
  },
  fn2: function(){
    //...
  }
}())

使用上面的写法，外部代码无法读取到内部变量

console.log(value)//undefined 

这就是javascript模块的基本写法

当我们引入了模块化编程思想之后，把每个功能细分成一个个js文件然后按需求引入，这时你会发现代码看起来很清爽，就算忘了某个功能模块的实现细节，再看一遍也花不了多长时间，因为需要你一次阅读的代码量已经很少了。但仅仅是这样还不够，所以在es6的module实现之前，社区诞生了CommonJS 、 AMD等等模块化规范，这将在另一篇文章中详细介绍。