Javascript访问私有数组

Question

我需要做到这一点，因此每次您单击一包口香糖img时，总价格便会随所点击的口香糖img一起增加。 它还必须计算点击img的次数以显示购物车中的商品数量。 我必须有一个私人阵列。 但我似乎无法弄清楚如何调用它，这样我才能获得被点击的口香糖的价格。

var addPrice = function(gum) {

    total = 0;
    if (gum == extra) {
        total += brands.price[0];
    }
    if (gum == twoMint) {
        total += brands.price[1];
    }
    if (gum == trident) {
        total += brands.price[2];
    }
    if (gum == bubble) {
        total += brands.price[3];
    }
    document.getElementById("totalAmount").innerHTML = total;
};

var clear = function() {
};

var createArray = function() {

    var gumArray = function() {

        var brands = [{
            brand: "extra",
            price: 1.50
        }, {
            brand: "twoMint",
            price: 0.25
        }, {
            brand: "trident",
            price: 2.50
        }, {
            brand: "bubble",
            price: 0.10
        }]
    };
};

document.getElementById("extra").addEventListener("click", function() {
    addPrice("extra"); -
    console.log("gum clicked");
});

document.getElementById("twoMint").addEventListener("click", function() {
    addPrice("twoMint");
    console.log("gum clicked");
});

document.getElementById("trident").addEventListener("click", function() {
    addPrice("trident");
    console.log("gum clicked");
});

document.getElementById("bubble").addEventListener("click", function() {
    addPrice("bubble");
    console.log("gum clicked");
};

Answer 1

如果您打算为此代码创建模块，那么让我向您展示一个模块示例，很难说将代码变成模块的一件事。

您需要一个函数，该函数返回一个对象，该对象从创建的闭包中访问变量。 除非您将其作为模块的一部分公开，否则这些变量对外部不可见。

var cart = (function() {
  // These vars are private, not directly accessible from the outside
  var total = 0;
  // Map for faster access
  var brands = {extra: 1.50, twoMint: 0.25, trident: 2.50, bubble: 0.10};
  // Private function
  function updateUI() {
      document.getElementById("totalAmount").innerHTML = total;
  }

  // The exported module
  return {
      addPrice: function(gum) {
          total += brands[gum];
          updateUI();
      },
      // The outside can get the value of total, but they can't change it directly
      getTotal: function() {
          return total;
      },

      clear: function() {
          total = 0;
          updateUI();
      }

  };
})();

["extra", "twoMint", "trident", "bubble"].forEach(function(id){
  document.getElementById(id).addEventListener("click", function() {
   cart.addPrice(id);
  });
});

Answer 2

品牌数组是内部作用域内的局部变量。 无法从封闭的外部访问brand数组，至少您不会执行以下操作：

var createArray = function(){
  return function(){
    return [{brand: "extra", price: 1.50},
      {brand: "twoMint", price: 0.25},
      {brand: "trident", price: 2.50},
      {brand: "bubble", price: 0.10}]
  };
};

然后，当您需要从addPrice访问brands数组时，可以执行以下操作：

var brandsArray = createArray()();

但是，朝这个方向前进并不是一个好习惯。 有更好的方法来提供您想要的东西。 例如，使用类似Juan Mendes答案的模块模式。