计算器

<div id="calculator">
  <p>
    <input type="text" class="formerInput" value="1" />
    <span class="sign">+</span>
    <input type="text" class="laterInput" value="1" />
    <span>=</span>
    <span class="resultOutput">2</span>
  </p>
  <input type="button" value="+" class="btn" title="add" />
  <input type="button" value="-" class="btn" title="subtract" />
  <input type="button" value="×" class="btn" title="multiply" />
  <input type="button" value="÷" class="btn" title="divide" />
  <input type="button" value="%" class="btn" title="mod" />
  <input type="button" value="^" class="btn" title="power" />
  <input type="button" value="1/x" class="btn" title="invert" />
</div>

(function () {
  // 获取元素
  var wrapElem = document.querySelector('#calculator'); // 获取第一个选中的元素
  var calculatorElem = { // 将变量封装在对象中
    formerInput: wrapElem.querySelector('.formerInput'),
    laterInput: wrapElem.querySelector('.laterInput'),
    sign: wrapElem.querySelector('.sign'),
    resultOutput: wrapElem.querySelector('.resultOutput'),
    btns: wrapElem.querySelectorAll('.btn')
  };

  // 绑定事件
  each(calculatorElem.btns, function (index, elem) { // 遍历所有事件
    elem.onclick = function () {
      updateSign(this.value); // 更新符号
      outputResult(operate(this.title, calculatorElem.formerInput.value, calculatorElem.laterInput.value)); // 输出结果
    };
  });

  // 遍历
  function each(array, fn) { // 传入函数
    for (var i = 0; i < array.length; i++) {
      fn(i, array[i]);
    }
  }

  // 更新符号
  function updateSign(symbol) {
    calculatorElem.sign.innerHTML = symbol;
  }

  // 运算
  var operate = (function () {
    var operation = {
      add: function (num1, num2) {
        return +num1 + +num2; // +可以将string转成int
      },
      subtract: function (num1, num2) {
        return num1 - num2;
      },
      multiply: function (num1, num2) {
        return num1 * num2;
      },
      divide: function (num1, num2) {
        return num1 / num2;
      },
      addOperation: function (name, fn) {
        if (!operation[name]) { // 判断对象中是否有这个方法
          operation[name] = fn;
        }
        return operation; // 传出去可以进行链式调用
      }
    };

    function operate(name) {
      if (!operation[name]) throw new Error('不存在名为' + name + '的运算方法！');
      return operation[name].apply(operation, [].slice.call(arguments, 1, arguments.length)); // 用apply和call接管原来的方法，可以传入多个参数
    }
    operate.addOperation = operation.addOperation; // 暴露出去

    return operate;
  })();

  operate.addOperation('mod', function (num1, num2) {
    return num1 % num2;
  }).addOperation('power', function (base, power) {
    return Math.pow(base, power);
  }).addOperation('invert', function (num) {
    return 1 / num;
  });

  // 输出结果
  function outputResult(result) {
    calculatorElem.resultOutput.innerHTML = result;
  }
})();