单例模式的应用 - 创建类模式 - [: '编程的套路 - JavaScript设计模式' |cut:tmp.cut_limit :]

示例参考 - ES5

<div>
    <div>采购余额：<span id="balance">100</span>元</div>
    <div class="page a">
        部门A：
        <input type="number">
        <button class="add">+</button>
        <button class="sub">-</button>
    </div>
    <div class="page b">
        部门B：
        <input type="number">
        <button class="add">+</button>
        <button class="sub">-</button>
    </div>
    <div class="page c">
        部门C：
        <input type="number">
        <button class="add">+</button>
        <button class="sub">-</button>
    </div>
</div>

<script>
  // 显示余额的元素
  var elBalance = document.getElementById('balance');

  init();

  /**
   * 初始化
   */
  function init() {
    var a = new Division('.page.a');
    var b = new Division('.page.b');
    var c = new Division('.page.c');
  }

  /**
   * 刷新余额
   */
  function renderBalance() {
    var resource = new Resource();

    elBalance.innerText = resource.balance;
  }

  /**
   * 部门构造器
   * @param {string} selector 部门对应的选择器
   * @constructor
   */
  function Division(selector) {
    var resource = new Resource();

    // 选中必要的元素
    this.el = document.querySelector(selector);
    this.elAdd = this.el.querySelector('.add');
    this.elSub = this.el.querySelector('.sub');
    this.elInput = this.el.querySelector('input');

    // 缓存外部的this，用于稍后的事件回调函数内
    var me = this;

    // 监听点击事件
    this.elAdd.addEventListener('click', function () {
      // 缓存input，方便后面调用
      var i = me.elInput;

      // 执行充值
      resource.add(i.value);

      // 情况input
      i.value = '';

      // 刷新余额
      renderBalance();
    });

    this.elSub.addEventListener('click', function () {
      var i = me.elInput;
      resource.sub(i.value);
      i.value = '';

      renderBalance();
    });
  }

  /**
   * 总务处资源（其中包括预算余额）
   * @return {*}
   * @constructor
   */
  function Resource() {
    // 如果不是第一次new（instance肯定是存在的）
    if (Resource.instance)
      return Resource.instance;
    else { // 否则（instance不存在）
      // 组装新对象
      this.balance = 100;

      // 将其存到Resource机器上
      Resource.instance = this;
    }
  }

  /**
   * 充值
   * @param num
   */
  Resource.prototype.add = function (num) {
    this.change(num);
  }

  /**
   * 消费
   * @param num
   */
  Resource.prototype.sub = function (num) {
    this.change(-num);
  }

  /**
   * 修改余额（通过加减数字）
   * @param {number} num
   */
  Resource.prototype.change = function (num) {
    if (!num)
      return;

    this.balance += parseFloat(num);
  }
</script>