JS模块化 | 每天，遇到更好的你

模块化

在JavaScript发展初期就是为了实现简单的页面交互逻辑，寥寥数语即可
随着技术的发展，jquery等前端库层出不穷，前端代码日益膨胀

这时候JavaScript作为嵌入式的脚本语言的定位动摇了，JavaScript却没有为组织代码提供任何明显的帮助，
甚至没有类的概念,更不用说模块(module)了

JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码
JavaScript在设计时定位原因，没有提供类似的功能
开发者需要模拟出类似的功能，来隔离、组织复杂的JavaScript代码，我们称之为模块化

模块

一个模块就是实现特定功能的文件
有了模块，就可以更方便地使用别人的代码

想要什么功能，就加载什么模块

模块开发需要遵循一定的规范，各行其是就都乱套了
模块就是实现特定功能的一组方法

只要把不同的函数(以及记录状态的变量)简单地放在一起，就算是一个模块

function m1(){
    //...
}

function m2(){
    //...
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>模块化</title>
</head>
<body>
  <script>
      // JS是函数作用域
      function fn1(){
        var num1 = 10;
        console.log("输出num1："+num1)
      }

      function fn2(){
        var num2 = 20;
        console.log("输出num2："+num2)
      }

      fn1();
      fn2();
  </script>
</body>
</html>

Markdown

这种做法的缺点很明显：

污染了全局变量，无法保证不与其他模块发生变量冲突，而且模块成员之间看不出直接关系

极力避免使用闭包

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>模块化</title>
</head>
<body>
  <script>

      /**
      * 对象
      * 好处：不污染全局变量
      * 坏处：外部可以任意修改内部成员
      **/
      var myMoudle = {
        num:10,
        fn1:function(){
          console.log(this.num);
        },
        fn2:function(){
          console.log(this.num + 10);
        }
      };

      myMoudle.num = 20;
      myMoudle.fn2();

  </script>
</body>
</html>

Markdown