制作一个没有新关键字的javascript淘汰视图模型

Making a javascript knockout viewmodel without the new keyword

本文关键字：关键字 javascript 淘汰 模型 视图 一个      更新时间：2023-09-26

我正在浏览淘汰教程，所有示例都使用"new"关键字创建视图模型：

//from learn.knockoutjs.com
function AppViewModel() {
  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");
  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
  }, this);
}
ko.applyBindings(new AppViewModel());

我试图避免使用new关键字，它通常工作得很好，但我发现fullName计算属性很难工作。这就是我到目前为止所想到的。

function makeViewModel() {
  return {
  firstName: ko.observable("Bert"),
  lastName: ko.observable("Bertington"),
  fullName: ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
  }, this) };
}
ko.applyBindings(makeViewModel());

这显然失败了，因为"this"不再引用传递给computed的函数内部的本地对象。我可以通过创建一个变量并在附加计算函数并返回它之前存储视图模型来解决这个问题，但如果有一个更优雅、更紧凑的解决方案，不需要我确保以正确的顺序附加相互依赖的方法，我肯定会改用它。

有更好的解决方案吗？

您当然可以通过使函数自调用来避免使用新关键字，但我认为您最好解决"this"关键字的问题。我喜欢向人们展示3种创建视图模型的方法。

  1. 对象文字http://jsfiddle.net/johnpapa/u9S93/
  2. 作为一个函数http://jsfiddle.net/johnpapa/zBqxy/
  3. 显示模块模式http://jsfiddle.net/johnpapa/uRXPn/

当使用上面的选项2或3时，处理"this"关键字要容易得多。

在函数中创建它时，不需要返回新对象。相反，你会这样做：

var ViewModel = function() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    this.fullName = ko.computed(function() {
         this.firstName() + " " + this.lastName();
    }, this);
};

现在，您可以在计算的可观测值中访问适当的this。

如果你真的不想使用"new"（在这种情况下没有理由不使用），那么你可以做一些类似的事情：

var createViewModel = function() { 
    var result = {
        firstName: ko.observable("Bert"),
        lastName: ko.observable("Bertington")
    };
    result.fullName = ko.computed(function() {
        return result.firstName() + " " result.lastName();
    });
    return result;
};

您可以强制执行新的类似so（取自这个伟大的模式资源）

function Waffle() {
    if (!(this instanceof Waffle)) {
    return new Waffle();
    }
    this.tastes = "yummy";
}

然而，我不确定你所说的是什么意思

我尽量避免使用通常有效的新关键字完全可以，但我发现计算fullName时遇到困难工作的财产。这就是我到目前为止所想到的。

这应该很好，你能在jsfiddle中给我们展示一个不适合使用new的具体例子吗。

希望这能有所帮助。

相关文章：