Question

我写的Javascript代码是针对小型网站的购物车。我知道这段代码非常难看，我试图用函数中的参数切换来总结它，但我没有得出结论。缩短此代码的最佳方法是什么？

非常感谢！

使用Javascript：

var pack = '#writePackSummary';
var netPriceOutput = '.writeNetPriceSummary';
var taxPriceOutput = '#writeTaxPriceSummary';
var grossPriceOutput = '#writeGrossPriceSummary'
var netPrice1 = 25;
var netPrice3 = 45.55;
var netPrice6 = 89.10;
var tax = 0.19;

if ($(pack).text() == '1') {
    $(netPriceOutput).text(netPrice1.toFixed(2).toString().replace(/\./g, ','));
    $(taxPriceOutput).text((netPrice1*tax).toFixed(2).toString().replace(/\./g, ','));
    $(grossPriceOutput).text(((netPrice1*tax)+netPrice1).toFixed(2).toString().replace(/\./g, ','));
} else if ($(pack).text() == '3') {
    $(netPriceOutput).text(netPrice3.toFixed(2).toString().replace(/\./g, ','));
    $(taxPriceOutput).text((netPrice3*tax).toFixed(2).toString().replace(/\./g, ','));
    $(grossPriceOutput).text(((netPrice3*tax)+netPrice3).toFixed(2).toString().replace(/\./g, ','));
} else if ($(pack).text() == '6') {
    $(netPriceOutput).text(netPrice6.toFixed(2).toString().replace(/\./g, ','));
    $(taxPriceOutput).text((netPrice6*tax).toFixed(2).toString().replace(/\./g, ','));
    $(grossPriceOutput).text(((netPrice6*tax)+netPrice6).toFixed(2).toString().replace(/\./g, ','));
};

Answer 1

对于初学者，您可以使用单个函数替换所有.toFixed(2).toString().replace(/\./g, ',')：

function stringNum(num) {return num.toFixed(2).replace(/\./g, ',')}

if ($(pack).text() == '1') {
    $(netPriceOutput).text(stringNum(netPrice1));
    $(taxPriceOutput).text(stringNum(netPrice1*tax));
    $(grossPriceOutput).text(stringNum((netPrice1*tax)+netPrice1));
} etc...

也许考虑使用switch结构而不是多个if-elses？这也更快，因为它不会每次都重新创建jQuery对象。

Answer 2

首先尝试统一逻辑。查找可能包含在函数中的部分或使用该线性代码并根据选择读取不同的数据。

例如：

var pack = '#writePackSummary';
var netPriceOutput = '.writeNetPriceSummary';
var taxPriceOutput = '#writeTaxPriceSummary';
var grossPriceOutput = '#writeGrossPriceSummary'

/* declare the prices as array */
var netPrice = {
    1: 25,
    2: 45.55,
    6: 89.10,
};

var tax = 0.19;

/* read the input only once from the element */
var packNr = parseInt( $( pack ).text() );

/* test if a value dataset exists */
if( netPrice[packNr] ) {

    $( netPriceOutput ).text( netPrice[packNr].toFixed(2).toString().replace( /\./g, ',' ) );
    $( taxPriceOutput ).text( (netPrice[packNr]*tax).toFixed(2).toString().replace( /\./g, ',' ) );
    $( grossPriceOutput ).text( ((netPrice[packNr]*tax)+netPrice[packNr]).toFixed(2).toString().replace( /\./g, ',' ) );
}

这将只用一个if条件取代，并允许快速添加其他价格。

进一步确定代码中彼此重复的更多部分，并将逻辑组合在可重用部分（即函数/方法）中。例如，Scimonster的答案可能是下一步。

以正确的方式总结if-loop

2 个答案: