如何改进我的 Javascript 购物车代码？请原谅原始代码[关闭]答案

【问题标题】：How can my Javascript shopping cart code be improved? Please forgive the raw code [closed]如何改进我的 Javascript 购物车代码？请原谅原始代码[关闭]
【发布时间】：2013-03-04 11:56:28
【问题描述】：

在过去的几天里，我试图了解 Javascript。这是我的第一个正确的 Javascript，我想知道是否有人可以看到我可以改进我的代码并最终改进我的 Javascript 知识。我很欣赏我的代码到目前为止可能看起来有点原始。

我对如何完成我的“calcUnitPriceF”函数感到困惑，这样我就不会在每个产品案例中创建一个数组。这些价格很快就会来自数据库。

我希望下面的代码很清楚它的作用。

<script type="text/javascript">
function update(){

var total = 0.00;
var calcUnitPrice, quantity;

var myForm = document["getElementById"]("totalform");
var justQuantity = myForm["quantity[]"];
var justPrice = myForm["productPrice[]"];
var unitPrice = myForm["unitPrice[]"];
var linePrice = myForm["linePrice[]"];

for(var i =0; i < justQuantity.length; i++)
{
 justQuantity[i].value = Math.floor(justQuantity[i].value);
 quantity = justQuantity[i].value;
 calcUnitPrice = 0;

 if(isNaN(quantity) || quantity < 0) {
   justQuantity[i].value ="0";
 }
 else
 {
  calcUnitPrice = calcUnitPriceF(justPrice[i].value,quantity);

  document.getElementById('unitPrice[' + i + ']').innerHTML = '£' + calcUnitPrice.toFixed(2);
  document.getElementById('linePrice[' + i + ']').innerHTML = '£' + (calcUnitPrice * justQuantity[i].value).toFixed(2); 
  total = (total + (quantity* calcUnitPrice));
 }
}

document.getElementById("delivery").innerHTML = "Your Order Delivery is: £2.50";
document.getElementById("Totprice2").innerHTML = "Your Order Total is: £" + total.toFixed(2);

}

function calcUnitPriceF(product,quantity)
{
 switch(product)
  {
   case '0':
    return 0;
   case '1':
    var values = [5, 4 , 15.30 , 10 , 12 ]; // Structure(Exceeding Quantity Price,Quantity Under, Price)

    for(var i = 1; i< values.length; i=i+2)
     if(quantity < values[i])
      return values[i+1];
    return values[0];
   case '2':
    return 75;
   }
}
</script>

<body>

<form id="totalform">
<select id ="productPrice[]" onchange="update()">
  <option value="0">Please Select One</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
</select>
QUANTITY <input type = "text" id = "quantity[]" onChange="update()" >
UNIT PRICE <p id="unitPrice[0]" style="display:inline;">£0.00</p>
LINE PRICE <p id="linePrice[0]" style="display:inline;">£0.00</p><br />

<select id="productPrice[]" onchange="update()">
  <option value="0">Please Select One</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
</select>
QUANTITY <input type = "text" id = "quantity[]" onChange="update()" >
UNIT PRICE <p id="unitPrice[1]" style="display:inline;">£0.00</p>
LINE PRICE <p id="linePrice[1]" style="display:inline;">£0.00</p><br />

<span id ="delivery">Your Order Delivery is: £0.00</span><br />
<span id ="Totprice2">Your Order Total is: £0.00</span>
</form>

【问题讨论】：

如果我的购物车中只有 1 个产品线（一个 HTML 块），这不起作用。
定义改进。您可以通过多种方式改进您的代码，例如您可以改进它以提高人类可读性或性能。
改进定义：看看我可以在哪里改进我的 Javascript 技能。就像我说的，这是我第一次尝试 Javascript，我想改进。
@alex23：我将正确检查我的 PHP。这只是为了“前端秀”。
@alex23 知道当我只有一行 HTML 用于该代码不起作用的产品时？

标签： javascript performance shopping-cart

【解决方案1】：

我要做的第一件事就是改变 JS 方法。

var project = {};
project.ShoppingCart = function() {
    this.total = 0;
    this.justQuantity = ...;
    this.currentQuantity = 0;
};
/**
 * Updates the current quantity in the shopping cart.
 * @param {!number} quantity The quantity to update with.
 * @return {void} nothing.
 */
project.ShoppingCart.prototype.updateQuantity = function(quantity) {
    // this is how to check for a number properly.
    if (!isNaN(quantity) && parseFloat(quantity) && isFinite(quantity)) {
        this.currentQuantity = quantity;
    } else {
        console.log("Invalid quantity");
    };
};

现在为了使用上面的。

var shoppingCart = new project.ShoppingCart();

查看面向对象的 Javascript，如何正确使用它，停止污染全局命名空间和随机编写函数，注释您的代码并正确验证。

【讨论】：

感谢您为我指明了这个方向。我现在要走这条路。这不是矫枉过正吗？我想做的就是我已经取得的成就：更新产品价格和交货/总计。
谢谢。老实说，我还没有找到好的 JS 资源。我已经求助于观看制作雅虎的人的一些视频。但我发现阅读和学习比观看和学习要容易得多。我倾向于浏览 w3schools，但这是非常基本的。我现在有第六版 Orielly 书，我会仔细阅读。