JavaScript-原型函數與ViewModel函數？

Question

我想知道是否有理由更喜歡原型函數/ viewModel函數。

假設您想將整數1234表示為貨幣值，例如12.34€

我所做的是在Number對象上創建原型函數：

Number.localeSeparator = 1.1.toLocaleString().substr(1, 1);

Number.prototype.centToEuro = function (separator_string) {
    if (!separator_string) {
        separator_string = Number.localeSeparator;
    }
    return (this / 100).toFixed(2).replace(".", separator_string) + "€";
}

var vm = {myMoney: ko.observable(1234)};
ko.applyBindings(vm);

這使得數據綁定相當容易，因為我在視圖中所需要做的就是：

<div data-bind="text: myMoney().centToEuro()"></div>

但是除了原型函數，我還可以使用幾乎相同的代碼創建一個viewModel函數，如下所示：

var vm = {
    myMoney: ko.observable(1234),
    localeSeparator: 1.1.toLocaleString().substr(1, 1),
    centToEuro: function (value_int, separator_string) {
        if (!separator_string) {
            separator_string = vm.localeSeparator;
        }
        return (value_int / 100).toFixed(2).replace(".", separator_string) + "€";
    }
}
ko.applyBindings(vm);

在視圖中使用，它將如下所示：

<div data-bind="text: centToEuro(myMoney())"></div>

如您所知，兩條HTML行的長度幾乎完全相同，只是方法不同。 所以問題是，哪種方法更受歡迎？

Answer 1

鑒於centToEuro與任意數字無關，但是與此處要處理的特定貨幣模型有關，並且不應該擴展內置原型對象，請使用viewmodel函數。

Answer 2

您的問題的意思不是，該函數放在哪里？

考慮將擴展程序用於貨幣格式化等任務，只需設置一次即可在任何地方使用。 只是一個例子：

ko.extenders.currency = function (target, option) {
    target.amount = function () {
        var amt = ko.unwrap(target);
        var localeSeparator = 1.1.toLocaleString().substr(1, 1);
        switch(option) {
            case "Eur":
                amt = (amt / 100).toFixed(2).replace(".", localeSeparator) + "€";
                break;
            default:;
            }
        return amt;
    };
    return target;
};

查看模型：

myMoney: ko.observable("1234").extend({currency: "Eur"})

標記：

<div data-bind="text: myMoney.amount()"></div>