Модели представления JavaScript Knockout: объектные литералы и функции

В JavaScript при работе с Knockout.js существует два распространенных способа объявления моделей представления: как объектные литералы и как функции. Позвольте мне объяснить разницу между этими двумя подходами и привести несколько примеров кода.

  1. Подход с использованием объектных литералов:
    При использовании объектных литералов вы определяете модель представления как простой объект JavaScript. Свойства и функции добавляются непосредственно к объекту. Вот пример:
var viewModel = {
  firstName: ko.observable('John'),
  lastName: ko.observable('Doe'),
  fullName: ko.pureComputed(function() {
    return this.firstName() + ' ' + this.lastName();
  }, viewModel)
};

В этом примере объект viewModelимеет свойства firstNameи lastName, которые определены как наблюдаемые Knockout. Свойство fullName — это вычисляемая наблюдаемая переменная, зависящая от firstNameи lastName.

  1. Функциональный подход.
    При использовании функционального подхода вы определяете модель представления как функцию-конструктор. Свойства и функции добавляются в прототип функции. Вот пример:
function ViewModel() {
  this.firstName = ko.observable('John');
  this.lastName = ko.observable('Doe');
}
ViewModel.prototype.fullName = ko.pureComputed(function() {
  return this.firstName() + ' ' + this.lastName();
});
var viewModel = new ViewModel();

В этом примере функция ViewModelвыступает в роли конструктора. Свойства firstNameи lastNameопределяются в функции-конструкторе, а свойство fullNameдобавляется в прототип функции с помощью ViewModel.prototype.