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>

JavaScript - 原型函数与ViewModel函数？

2 个答案: