如何使此事件處理程序更靈活

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（）將輸入傳遞到公式中，從而使您可以具有任意數量的輸入。 在此示例中，我們可以將前兩個輸入乘以可變的精度：

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/