-3

在过去的几天里，我试图了解 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>
4

1 回答 1

1

The number one thing I would do is change the JS approach.

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");
    };
};

Now in order to use the above.

var shoppingCart = new project.ShoppingCart();

Look at Object Oriented Javascript, how to properly use that, stop poluting the global namespace and randomly writing functions, comment your code and validate things properly.

于 2013-03-04T12:10:48.127 回答