## 淘汰视图模型：对象文字与函数 - 哪个更好？

声明 Knockout 视图模型的对象与函数

在 Knockout JS 中，视图模型可以声明为对象文字或函数。考虑以下示例：

// Object literal
var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

// Function
var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());

虽然两种方法都实现相同的目标，但将视图模型定义为函数具有多个优点：

直接访问“this”

在函数中，“this”指的是正在创建的实例。这允许轻松访问视图模型的可观察量和计算属性：

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

相反，当使用对象文字时，计算可观察量内需要显式上下文绑定：

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

封装和变量隐私

函数为视图模型提供了更自然的封装，因为它们可以定义不暴露于全局范围的私有变量。这有助于防止意外覆盖或冲突。

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

最后，函数允许使用“bind”方法轻松绑定，确保回调函数的上下文正确：

var ViewModel = function() {
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         this.items.remove(item);
    }.bind(this);
};

总结，虽然两种定义 Knockout 视图模型的方法都是有效的，但使用函数提供了更大的灵活性、控制和封装优势。这些好处使函数成为更复杂和可维护的视图模型的首选。

以上是## 淘汰视图模型：对象文字与函数 - 哪个更好？的详细内容。更多信息请关注PHP中文网其他相关文章！