Question

我有一个jQuery函数，我已根据用户输入进行实时计算。它运作良好，但我想知道是否有更可扩展的解决方案。每次我有一个新的等式运行需要相同的功能（实时更新），我最终复制脚本，更改方程变量。显然方程是相同的，然后我将使用相同的函数请求。

让我知道是否有更好的方式，或者我是否正确接近它。

http://jsfiddle.net/darcyvoutt/zhow0uky/

var formCalc = function (input, multiplier, output) {
  var reloadCalc = function () {
  var formula = parseFloat($(input).val()) * parseFloat($(multiplier).val());
  $(output).val(formula.toFixed(0));    
  };
  $(document).ready(function () {
    $(input).on("keyup", function () {
       reloadCalc();
    });
    $(input).trigger("keyup");     
  });
};

formCalc('.input', '.multiplier', '.output');

代码的不可扩展部分

变量

(input, multiplier, output)

小数位

.toFixed(0)

式

var formula = parseFloat($(input).val()) * parseFloat($(multiplier).val());

Answer 1

添加参数reloadCalc：

var formCalc = function (input, output, reloadCalc) {
  input.on("keyup", function() {
    output.val(reloadCalc(input.val()));
  }).trigger("keyup");
};

$(document).ready(function() {
  formCalc($('.input'), $('.output'), function(input) {
    return (parseFloat(input) * parseFloat($('.multiplier').val()).toFixed(0);
  });
  //...other formCalc calls
});

现在，假设你有一个输入元素$('#in')，输出元素$('#out')和函数f(input)，你可以这样做：

formCalc($('#in'), $('#out'), f);

Answer 2

使公式成为传递给formCalc的函数。然后可以使用.apply（）将输入传递给公式，这允许您具有任意数量的输入。在这个例子中，我们可以将前两个输入乘以变量precision：

var formCalc = function (formula, inputSelector, output) {
    //Cache the set of input elements,
    //which will be in document order
    var inputs = $(inputSelector);

    var reloadCalc = function () {
        //Parse every input to a float
        var values = $.map(inputs, function(el) {
           return parseFloat($(el).val());
        });
        //Then pass the resulting array to the formula
        var result = formula.apply(this, values);
        $(output).val(result);
    };

    $(document).ready(function () {
        inputs.on("keyup", function () {
            reloadCalc();
        });
        reloadCalc();
    });
};

//The formula can tak an arbitrary array of arguments,
//which you can do anything with
var multiplyWithPrecision = function(a, b, precision) {
    return (a * b).toFixed(precision);
}

formCalc(multiplyWithPrecision, '.input','.output');

请参阅：http://jsfiddle.net/f9s02zgo/1/

如何使此事件处理程序更灵活

代码的不可扩展部分

2 个答案: