如何改进我的Javascript购物车代码？请原谅原始代码
在过去的几天里，我一直试图了解Javascript。这是我第一次使用正确的Javascript，我想知道是否有人能看出我可以改进我的代码并最终提高我的Javascript知识。我很感激我的代码到目前为止可能看起来有点粗糙 有一件事我很困惑，那就是如何完成我的'calcUnitPriceF'函数，这样我就不会在每个产品案例中创建一个数组。这些价格很快将来自数据库 我希望下面的代码非常清楚它的作用如何改进我的Javascript购物车代码？请原谅原始代码,javascript,performance,shopping-cart,Javascript,Performance,Shopping Cart,在过去的几天里，我一直试图了解Javascript。这是我第一次使用正确的Javascript，我想知道是否有人能看出我可以改进我的代码并最终提高我的Javascript知识。我很感激我的代码到目前为止可能看起来有点粗糙 有一件事我很困惑，那就是如何完成我的'calcUnitPriceF'函数，这样我就不会在每个产品案例中创建一个数组。这些价格很快将来自数据库 我希望下面的代码非常清楚它的作用 <script type="text/javascript"> function upda
<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>
我要做的第一件事就是改变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，如何正确使用它，停止争论全局名称空间和随机编写函数，对代码进行注释并正确验证。如果我的购物车中只有一个产品线一块HTML，这是行不通的。定义改进。您可以通过几种方式改进代码，例如，您可以改进代码以提高可读性或性能。改进定义：查看可以在哪些方面改进我的Javascript技能。就像我说的，这是我第一次尝试使用Javascript，我想改进。@alex23:我将在PHP中进行适当的检查。这只是为了“前端展示”。@alex23当我只有一行产品的HTML时，你知道这个代码不起作用吗？谢谢你给我指明了这个方向。我现在就走这条路。这不是过分吗？我所要做的就是我所取得的成就：更新产品和熟食的价格。谢谢。老实说，我还没有找到一个好的JS资源。我已经求助于看一些视频谁做了雅虎的家伙。但我发现阅读和学习比观看和学习容易得多。我倾向于跳转到学校，但这是非常基本的。我现在有第六版的奥利利书，我会仔细阅读的。