javascript - 使用基本 JS、HTML、CSS 制作简单产品配置器的技术

Question

关于构建我的 JavaScript 代码的最佳技术或方法有什么小提示/技巧吗？如何以正确的方式组合数组、值、函数。我需要为冰沙店老板制作一个工具，客户可以在其中选择所需的成分，但我们需要计算糖和维生素的总量，例如。我不知道如何将所有这些参数组合到 Javascript 中。

EarlyBirdSmootie: Apple: Vitamin A = UI200 Vitamin C = UI300 Sugar = 200mg

Pear: Orange C = UI 3000 Vitamin A = UI1000 Sugar = 250mg

Orange: Vitamin C = UI3000 Sugar = 250mg

Each fruit has a special mix of Vitamin and Sugar eg. Orange= C Vitamin 3000UI + 250mg sugar

产品构建器概述因此，当员工点一杯苹果、梨和橙子的冰沙时，我们需要知道 VitaminsUI 和 SugarMG 的总量以及每种成分的单独维生素和糖的 View 。

已创建产品的编辑选项最好我们需要能够创建一个畅销汤列表，我们可以重复使用+添加或删除汤中的成分。

为此使用的最佳技术是什么以及我应该如何执行此操作？

我听说我粗略地估计了我将如何做到这一点，以便我可以继续:

这是到目前为止我的模型: http://madsschou.com//YuppieSmootieTest/index.html

如您所见，我必须能够添加成分、数量，将其放入购物车，同时仍然显示所有糖和维生素水平。

// Custom function
function calculateTip() {

// Store the data of inputs
var vitaminTypes = document.getElementById("vitaminTypes").value;
var vitaminAmount = document.getElementById("vitaminAmount").value;
var sugarAmount = document.getElementById("sugarAmount").value;
var ingredientTypes = document.getElementById("ingredientTypes").value;
    
// Quick validation
if(fruitAmount === "" || serviceQuality == 0) {
window.alert("Please enter some values to get this up and running!");
return; // this will prevent the function from continuing
}
    
// Check to see if this input is empty or less than or equal to 1
if(numFruits === "" || numFruits <= 1) {
numPeople = 1;
        
document.getElementById("each").style.display = "none";        
} else {
        
document.getElementById("each").style.display = "block";        
}
    
// Do some math!
var total = (vitaminType * vitaminAmount) ;
total = Math.round(total * 100);
total = total.toFixed(2);
    
    
// Display the content!
document.getElementById("totalAmount").style.display = "block";
document.getElementById("amount").innerHTML = total;
}

// Hide the content info amount on load
document.getElementById("totalAmount").style.display = "none";
document.getElementById("each").style.display = "none";

// Clicking the button calls our custom function
document.getElementById("calculate").onclick = function() { calculateAmount(); }

Answer 1

老实说我并不完全理解你的代码，但这里有一些我的建议:

• 替换==与 === ，就像这个:serviceQuality == 0 ，因为 javascript 在执行 == 时会强制执行比较:'' == 0 // true
• 看来变量numPeople未在您的函数中初始化。这使得函数不纯粹，当您的代码库增长时可能会导致错误。尝试将其用作参数
• 看来你在 js 代码中处理了大量的样式，这也可以(也许更好)通过 CSS 和伪类来完成，如 :valid 。使用 CSS 不仅会让你的代码更简单，而且更健壮。您进行此类样式操作将导致大量重绘。如果你打算改用CSS，我也推荐reading这个!
• 这一点我不太确定，但我认为最好使用 addEventListener('click', ... )而不是直接附加onclick方法
• 或者您可以尝试一些框架，例如 React、Angular2、Ember，这可能会使任务更容易完成

希望这些可以有所帮助!\[.__.]/