用模块化编程

最近想边学边整一下模块化编程，那么先从为何要使用模块化编程说起吧，可能你刚听说模块化编程，也没有关系，本篇讲的是很基础的东西。

　　一开始写代码的时候，我们可能只需要一个js文件，去实现一个很小的功能，比如下面这样：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> javascript模块化 </title>
    <style type="text/css">
    </style>
  </head>
  <body>
    <script>
      function add(a, b) {
        return a + b;
      }

      var ans = [];
      for(var i = 0; i < 5; i++) {
        var a = Math.random();
        var b = Math.random();
        var c = add(a, b);
        console.log(c);
        ans.push(c);
      }
    </script>
  </body>
</html>

　　这段代码初始化了5个-2~2之间的数据，并存放在ans数组里。随着代码量的增加，你会渐渐发现把代码写在一个js文件中会很繁琐，于是我们写了好几个js文件，如上代码把函数写在一个script标签内，同时把初始化写在另一个script标签内，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> javascript模块化 </title>
    <style type="text/css">
    </style>
  </head>
  <body>
    <script>
      function add(a, b) {
        return a + b;
      }
    </script>
    <script>
      var ans = [];
      for(var i = 0; i < 5; i++) {
        var a = Math.random();
        var b = Math.random();
        var c = add(a, b);
        console.log(c);
        ans.push(c);
      }
    </script>
  </body>
</html>

　　我们把两个js片段写在了一个html文件中，但是通常我们不会这么做，我们会把它们写在两个js文件中然后在html中引用，这里就不提了。

　　如上代码有什么问题吗？通常情况下，代码中的全局变量对我们来说是越少越好，但是如上代码暴露了a、b、c以及i四个我们不需要的全局变量，我们需要的只是一个初始化成功的ans数组以供后面的代码使用，也就是说第二个script的片段我们只需要一个ans变量的值，如何？一个很简单的方法便是写一个自动执行函数，因为只有函数里的变量才是局部变量：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> javascript模块化 </title>
    <style type="text/css">
    </style>
  </head>
  <body>
    <script>
      function add(a, b) {
        return a + b;
      }
    </script>
    <script>
      (function() {
        window.ans = [];
        for(var i = 0; i < 5; i++) {
          var a = Math.random();
          var b = Math.random();
          var c = add(a, b);
          ans.push(c);
        }
      }());
    </script>
    <script>
      console.log(a); // 报错
      console.log(b); // 报错
      console.log(c); // 报错
      console.log(i); // undefined
      for(var i = 0; i < 5; i++)
        console.log(ans[i])
    </script>
  </body>
</html>

　　第二个script标签内的代码便是一种简单的模块化机制，不同的是实际生产中通常将所需要的值直接返回或是暴露在接口下，而非采用全局变量的方式。我们看到用了模块化的写法，世界仿佛干净了许多，我们只需提供需要的变量，而不用去管其他的东西。

　　简单了解了为何要使用模块化的原因，那么第二篇接着会来学习下模块化的几种经典写法~