组织 Knockout.JS 视图模型属性的最佳实践 - 对象文字或稍后添加？答案

【问题标题】：Best practices in organizing Knockout.JS viewmodel properties - object literal or added later?组织 Knockout.JS 视图模型属性的最佳实践 - 对象文字或稍后添加？
【发布时间】：2016-10-26 12:50:00
【问题描述】：

我正在使用 Knockout.JS 进行代码挑战。到目前为止它非常整洁。

如果有人可以帮助我，我有几个关于最佳实践的简单问题。我试图想象大规模使用这个库会是什么样子，但这很困难。

在声明视图模型时，通常最好只在模型中声明可观察对象，然后再添加实用程序函数？还是应该同时声明视图模型不可或缺的函数？

所以：

var viewModel = {
    newItemName: ko.observable(),
    newItemPrice: ko.observable(0),
    newItemQuantity: ko.observable(1)
};

viewModel.incrementUp = function() {
    var value = this.quantity() + 1;
    this.quantity(value);
};
// more functions here

ko.applyBindings(viewModel);

相反。这个：

var viewModel = {
    newItemName: ko.observable(),
    newItemPrice: ko.observable(0),
    newItemQuantity: ko.observable(1),

    addNewItem: function () {
        var newItem = {
            name: capitalizeFirst(this.newItemName()),
            price: this.newItemPrice(),
            quantity: ko.observable(this.newItemQuantity())
            };
        }
    };

viewModel.something = ko.computed(function() {
     return 'do stuff'
});

ko.applyBindings(viewModel);

或者人们通常只是在之后添加计算值？我不知道人们是否会喜欢单一的 viewModel 文字，或者是否有一个标准来解决这个问题。我已经习惯了 Angular 拥有“Angular 方式”来做所有事情，哈哈。

很抱歉这么迂腐。正如我所说，这是一个代码挑战，我想给人留下深刻印象……另外，我发现很难找到 Knockout 应用程序的示例。

谢谢！

【问题讨论】：

你看过这部分文档吗？：knockoutjs.com/documentation/…
如果你想给人留下深刻印象，请使用 ES2015，例如现代 Javascript。 Babel 将为您完成转译。你可以摆脱 self = this。
顺便说一句，我的答案的“PS”仍然适用，我认为您根本无法使用选项二（“对”选项）。 IE。选项 2 不是一个选项。（如果你可以让它工作，请修改你的问题并联系我，以便我可以相应地调整我的答案。）

标签： javascript mvvm knockout.js

【解决方案1】：

不使用任何选项，除了小测试和重现之类的事情。有更好的选择。

附言。请注意，您的第二个示例甚至错误，addNewItem 中的this 关键字将不引用视图模型！

根本问题的完整答案对于 Stack Overflow 来说过于宽泛。潜在的问题是这样的：

如何在 Javascript 中通过适当的封装创建可重用的代码/视图模型？

意识到您问的是一个相当广泛的问题，并接受这样一个事实，即您需要阅读/学习相当多的知识才能知道答案。我建议首先阅读 Javascript 中的原型（也称为“原型”）和经典继承，以及现代 ECMA 脚本、Typescript 等更现代的 class 功能。

为了给您提供更轻松地创建具有计算的视图模型的具体提示，这里有一个使用“构造函数”的示例，它可以在所有现代（和一些稍旧的）浏览器中工作，而无需额外的库或转换步骤：

function ViewModel() {
  // Keep a reference to the instance of the view
  // model, becauese "this" itself might behave in
  // unexpected ways within functions inside this
  // view model constructor function.
  var self = this;

  self.firstName = ko.observable("john");
  self.surname = ko.observable("doe");

  self.fullname = ko.computed(function() {
     return self.firstName() + " " + self.surname();
  });
}

// Use it like this:
var johndoe = new ViewModel();

它利用the self=this idiom 以及构造函数（也是side-note recommendation in the KO docs）。

【讨论】：

感谢您的回答。澄清一下，我对 Javascript 并不陌生，而且我已经在 Angular 中开发了一段时间，所以我对 this 的恶作剧并不陌生。我刚刚从对象字面量之外的现有代码中复制/粘贴了addNewItem，并没有注意到this。我的问题更多的是关于视图模型是否更常见地声明为构造函数或对象字面量，以及对象字面量是否应该只在字面量中声明可观察对象。
啊，那我的回答语气不对，抱歉。不过，对于其他有类似问题但 JS 背景较少的人，我将保持这种状态。基本建议仍然是：使用构造函数、视图模型工厂函数或现代 ES 类特性来创建视图模型；不是对象文字。

【解决方案2】：

视情况而定。

对我来说，我喜欢在模型中保留与视图模型严格相关的任何内容，然后如果我需要为视图模型的特定用途添加特定功能，我可以稍后添加。

这意味着我可以创建一个可重复使用的模型/视图模型，并在需要时根据我的特定需求进行定制。

【讨论】：