Question

我正在构建一个使用两个滑块的计算器：

enter image description here

我有一系列CPU和RAM数据存储在这样的对象中：

var CloudPlans = {
   small: {

        id: 'small',

        from: {
            cpu: 1,
            ram: 1
        },

        to: {
            cpu: 2,
            ram: 2
        },

        price: {
            linux: 3490,
            windows: 4190
        }
    },

    medium:  {

        id: 'medium',

        from: {
            cpu: 2,
            ram: 2
        },

        to: {
            cpu: 4,
            ram: 4
        },

        price: {
            linux: 5600,
            windows: 6300
        }

    },

    large: {

        id: 'large',

        from: {
            cpu: 4,
            ram: 4
        },

        to: {
            cpu: 6,
            ram: 8
        },

        price: {
            linux: 9500,
            windows: 10200
        }

    },

           [...more configs here]

}

现在根据滑块的位置和值，我必须检查用户选择的计划，然后计算组件的价格。以下是检查价格范围的功能：

    checkPlaninRange: function(cpuVal, ramVal) {
        if(cpuVal >= CloudPlan.small.from.cpu && cpuVal <= CloudPlan.small.to.cpu ) {
            return "small";
        } else if (ramVal >= CloudPlan.small.from.cpu && ramVal <= CloudPlan.small.to.cpu) {
            return "small";
        }
    }

正如您所看到的，我将处理几乎无穷无尽的条件列表以返回所选计划。有没有办法根据条件或案例陈述以外的代码简化这些计划配置的存储或选择？

Answer 1

改为使用数组：

var CloudPlans = [
   {
        id: 'small',
        from: {
            cpu: 1,
            ram: 1
        },
        to: {
            cpu: 2,
            ram: 2
        },
        price: {
            linux: 3490,
            windows: 4190
        }
    },

    {
        id: 'medium',
        from: {
            cpu: 2,
            ram: 2
        },
        to: {
            cpu: 4,
            ram: 4
        },
        price: {
            linux: 5600,
            windows: 6300
        }
    },
    {
        id: 'large',
        from: {
            cpu: 4,
            ram: 4
        },
        to: {
            cpu: 6,
            ram: 8
        },
        price: {
            linux: 9500,
            windows: 10200
        }
    },
           //[...more configs here]
}

现在您可以简单地遍历CloudPlans：

for(int planIdx = 0; planIdx < CloudPlans.length; ++planIdx) {
    var plan = CloudPlan[planIdx];
    if(cpuVal >= plan.from.cpu && cpuVal <= plan.to.cpu  || 
       ramVal >= plan.from.ram && ramVal <= plan.to.ram) {
           return plan.id;
    }
}

Answer 2

好吧，回到这个问题，我以为我会投入两分钱......

我会使用数据压缩您的数据存储，因此不再需要min值。

var CloudPlans = [
   {    id: 'small',
        maxcpu: 2,
        maxram: 2,
        price: {
            linux: 3490,
            windows: 4190
        }
    }, {id: 'medium',
        maxcpu: 4,
        maxram: 4,
        price: {
            linux: 5600,
            windows: 6300
        }
    }, {id: 'large',
        maxcpu: 6,
        maxram: 8,
        price: {
            linux: 9500,
            windows: 10200
        }
    }, 
    // etc
].reverse(); // reverse it so the highest plan is first

注意.reverse()。我们将从最高点下来进行比较。

然后使用reduce函数：

checkPlaninRange: function(cpuVal, ramVal) {
    return CloudPlans.reduce(function(plan, compare) {
        return cpuVal <= compare.maxcpu && 
               ramVal <= compare.maxram    ? compare : plan;
    }).id; // remove .id to return the entire object
}

或者，如果您想要更高效的内容，请以相同的方式使用for循环：

checkPlaninRange: function(cpuVal, ramVal) {
    var plan = CloudPlans[0];
    for (var i = 1; i < CloudPlans.length; i++) {
        if (cpuVal <= CloudPlans[i].maxcpu && 
            ramVal <= CloudPlans[i].maxram    ) {
            plan = CloudPlans[i];
        } else break;
    }
    return plan.id; // remove .id to return the entire object
}

不太干净，但它可以让你早点打破循环。

通过其他类似的比较，这些很容易扩展。

Answer 3

您可以使用给定的val循环配置。像

这样的东西

var planFrom, planTo, cpuInRange, ramInRange;

for (var plan in CloudPlans) {
   planFrom = plan.from;
   planTo = plan.to;
   cpuInRange = cpuVal >= planFrom.cpu && cpuVal < planTo.cpu;  
   ramInRange = ramVal >= plamFrom.ram...; 
   if (cpuInRange || ramInRange) {
      return plan.id; 
   } 
}

Answer 4

您可以通过以下方式制作更一般的功能：

function check(plan, values) {
    for (var prop in values)
        if (plan.from[prop] <= values[prop] && plan.to[prop] >= values[prop])
             return true; // if only one property is met
    return false;
}
// yet I guess this is what you want:
function check(plan, values) {
    for (var prop in values)
        if (plan.from[prop] > values[prop] || plan.to[prop] < values[prop])
             return false; // if only one property is not met
    return true; // if all properties are met
}

现在，您的checkPlaninRange方法可能如此：

checkSmallRange: function(cpuVal, ramVal) {
    if ( check(CloudPlan.small, {cpu:cpuVal, ram:ramVal}) )
        return "small";
}

当然，您也可以使用以下方式循环您的云计划：

getPossiblePlans: function(cpuVal, ramVal) {
    var plans = []
    for (var id in CloudPlans)
        if ( check(CloudPlans[id], {cpu:cpuVal, ram:ramVal}) )
            plans.push(id);
    return plans;
}

正如@Tomasz Nurkiewicz所提到的，具有定义的循环顺序的数组在这里会更好。如果CloudPlans是一个对象，则枚举顺序是未定义的（依赖于实现），因此当它们的范围不明显时，它可能会返回任何计划。

Answer 5

您可以做的一件简单事情是（动态地，预先创建）创建数组，其值代表相应的范围：

var cpu = ["small", "small", "medium", "medium", "medium", "large"];
var ram = ["small", "medium", "medium", "medium", "large"];

您可以这样使用：

function checkPlaninRange(cpuVal, ramVal) {
    return cpu[Math.floor(cpuVal)] || "large";
}

checkPlaninRange(4.2); // "medium"

如何在我的应用程序中重构这些javascript if条件语句？

5 个答案: