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 attribute在HTML标签上插入逻辑数据。

我使用通过getAttribute处理它们的旧方法，但是如果您知道自己的用户平台是现代的，则可以使用dataset approach。

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>

如何更改JavaScript计算器代码？

4 个答案: