全局函数的方式

在html中要实现加减的运算

<body>
  <input type="text" id="txt_a">
  <select id="sel_op">
    <option value="+">+</option>
    <option value="-">-</option>
  </select>
  <input type="text" id="txt_b">
  <input type="button" id="btn" value=" = ">
  <input type="text" id="txt_res">
  <!-- 需要实现计算的功能，于是乎抽象了一个计算的模块 -->
</body>

在header中实现加减function，将重复使用的代码封装到函数中。

  <script>
    // 实现加减function
    function add(a, b) {
      return parseFloat(a) + parseFloat(b);
    }
    function subtract(a, b) {
      return parseFloat(a) - parseFloat(b);
    }
    // 早期的开发过程中就是将重复使用的代码封装到函数中
    // 再将一系列的函数放到一个文件中，称之为模块
    // 约定的形式定义的模块，存在命名冲突，可维护性也不高的问题
    // 仅仅从代码角度来说：没有任何模块的概念
    window.onload = function() {
      var ta = document.getElementById('txt_a');
      var tb = document.getElementById('txt_b');
      var tres = document.getElementById('txt_res');
      var btn = document.getElementById('btn');
      var op = document.getElementById('sel_op');
      btn.onclick = function() {
        switch (op.value) {
          case '+':
            tres.value = add(ta.value, tb.value);
            break;
          case '-':
            tres.value = subtract(ta.value, tb.value);
            break;
        }
      };
    };
  </script>

封装对象的方式

首先建立math对象，对于加减操作都放在calculator对象中，在calculator对象中添加具体方法，缺点是没有私有空间。

    var math = {};
    math.calculator = {};
    math.calculator.add = function(a, b) {
      return a + b;
    };

私有空间划分

建立自执行函数，返回相应的方法，函数有了私有空间可以定义私有变量及方法

<script>
    // 计算模块
    var calculator = (function() {
      // 这里形成一个单独的私有的空间var name = '';
      // convert函数为私有的转换逻辑
      function convert(input){
        return parseInt(input);
      }
      // 加减函数为暴露给外部的逻辑
      function add(a, b) {
        return convert(a) + convert(b);
      }
      function subtract(a, b) {
        return convert(a) - convert(b);
      }
      // 返回
      return {
        add: add,
        subtract: subtract,
      }
    })();

封装函数的方式

建立自执行函数，传入参数为window.calculator或空对象，首先实现add方法，新增需求时，传入calculator对象，会添加remain方法

    (function(calculator) {
      function convert(input) {
        return parseInt(input);
      }
      calculator.add = function(a, b) {
        return convert(a) + convert(b);
      }
      window.calculator = calculator;
    })(window.calculator || {});

    // 新增需求
    (function(calculator) {
      function convert(input) {
        return parseInt(input);
      }
      // calculator 如果存在的话，就是扩展，不存在就是新加
      calculator.remain = function(a, b) {
        return convert(a) % convert(b);
      }
      window.calculator = calculator;
    })(window.calculator || {});
    // 开闭原则，对新增开放，对修改关闭；

第三方依赖

对于第三方的依赖，作为参数传入，如下面第一种方式，需要引入jquery，第二中方式jquery直接作为参数传入

    (function(calculator) {
      // 对全局产生依赖，不能这样用
      //console.log($);
      function convert(input) {
        return parseInt(input);
      }
      calculator.add = function(a, b) {
        return convert(a) + convert(b);
      }

      window.calculator = calculator;

    })(window.calculator || {});

    // 新增需求
    // calc_v2016.js
    (function(calculator, $) {
      // 依赖函数的参数，是属于模块内部
      console.log($);
      function convert(input) {
        return parseInt(input);
      }
      // calculator 如果存在的话，我就是扩展，不存在我就是新加
      calculator.remain = function(a, b) {
        return convert(a) % convert(b);
      }
      window.calculator = calculator;
    })(window.calculator || {}, jQuery);