[英]JavaScript - Prototype function vs. ViewModel function?
我想知道是否有理由更喜欢原型函数/ 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行的长度几乎完全相同,只是方法不同。 所以问题是,哪种方法更受欢迎?
鉴于centToEuro
与任意数字无关,但是与此处要处理的特定货币模型有关,并且不应该扩展内置原型对象,请使用viewmodel函数。
您的问题的意思不是,该函数放在哪里?
考虑将扩展程序用于货币格式化等任务,只需设置一次即可在任何地方使用。 只是一个例子:
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.