如何更改javascript计算器代码？

Question

我用基本的javascript知识制作了这个计算器： https : //jsfiddle.net/7vmtuzsL/4/

此结构中列出了特定食物的参数：

<option value="110,1.24,0,23.09">Chicken breast</option>
<option value="18,0.2,3.92,0.88">Tomato</option>
<option value="374,1.04,80.43,8.11">Rice</option>

我怎样才能改变这种风格以获得更有条理和透明的结构？

例如，110 是卡路里，0.2 是脂肪，3.92 是碳水化合物，0.88 是蛋白质。

我想为所有维生素和矿物质等食物添加 20 个参数。 我发现这些结构不好，因为你很容易出错，不知道哪个参数属于哪个类别。

任何想法如何在不重建整个代码的情况下命名每个值？

Answer 1

然后你可以有一个对象数组（食物数组）并且每个对象（食物）都有它的属性：

arrayOfFood = [
    apple: {
        cal: 20,
        fat: 0.2
    },
    pear: {
        cal: 25,
        fat: 0.3
    }
]

Answer 2

您可以使用如下所示的对象：

    nutritionValue = {
       cal: [110, 18, 374, ...],
       fats: [0.2, ....],
       carbs: [3.92, ....],
       proteins: [0.88, ....],
       vitamins: [....],
       minerals: [....]
    }

Answer 3

您可以使用数据属性，例如

<option data-calories="110" data-fats="0.2" data-carbs="3.92" data-proteints="0.88" value="chicken breast">Chicken breast</option>

要获取选定的选项数据，请使用以下命令：

console.log($('select > option:selected').data())

Answer 4

使用data 属性在 HTML 标签上插入逻辑数据。

我使用getAttribute处理它们的旧方法，但如果您知道您的用户平台是现代的，则可以使用数据集方法。

 var foodSelector = document.getElementById('food-selector'); function getFoodData(option) { var info = { calories: parseFloat(option.getAttribute('data-calories')), fats: parseFloat(option.getAttribute('data-fats')), carbs: parseFloat(option.getAttribute('data-carbs')), proteins: parseFloat(option.getAttribute('data-proteins')) }; return info; } foodSelector.addEventListener('change', function(evt) { var info = getFoodData(evt.target.options[evt.target.selectedIndex]); console.log(info) })

 <select id="food-selector"> <option data-calories="110" data-fats="1.24" data-carbs="0" data-proteins="23.09">Chicken breast</option> <option data-calories="18" data-fats="0.2" data-carbs="3.92" data-proteins="0.88">Tomato</option> <option data-calories="374" data-fats="1.04" data-carbs="80.43" data-proteins="8.11">Rice</option> </select>

回应评论：

关注点分离很有价值，但您并不总是对代码进行那种控制。 也许您需要 CSS 的属性，或者您可能从某个外部来源获得它。

无论如何，下面是一个片段，展示了如何将数据保存在 JavaScript 中，并且只在网站中包含最低要求的 HTML：

 //Find existing elements var foodSelector = document.getElementById("food-selector"); //Data var data = [{ calories: 110, fats: 1.24, carbs: 0, proteins: 23.09, name: "Chicken breast", node: document.createElement("option") }, { calories: 1120, fats: 124, carbs: 10, proteins: 2.19, name: "Tomato", node: document.createElement("option") }, { calories: 180, fats: 1.84, carbs: 19, proteins: 9.09, name: "Rice", node: document.createElement("option") }, ]; //Append nodes data.forEach(function(dataPoint) { dataPoint.node.textContent = dataPoint.name; foodSelector.appendChild(dataPoint.node); }); //Listen for event foodSelector.addEventListener("change", function(evt) { var dataPoint = data.find(function(d) { return d.node === foodSelector.options[foodSelector.selectedIndex]; }); console.log(dataPoint); });

 <select id="food-selector"></select>