Моделирование объектов в AngularJS

Question

Есть ли способ создать / смоделировать "класс" в AngularJS для предопределения свойств, конструктора и методов. Я хотел бы создать ванильный JavaScript файл "класса", но как включить его в AngularJS проект?

var Pastry = {
  // initialize the pastry
  init: function (type, flavor, levels, price, occasion) {
    this.type = type;
    this.flavor = flavor;
    this.levels = levels;
    this.price = price;
    this.occasion = occasion;
  },

  // Describe the pastry
  describe: function () {
    var description = "The " + this.type + " is a " + this.occasion + " pastry, has a " + this.flavor + " flavor, " + this.levels + " layer(s), and costs " + this.price + ".";
    return description;
  }
};

или

function Pastry(type, flavor, levels, price, occasion) {
  this.type = type;
  this.flavor = flavor;
  this.levels = levels;
  this.price = price;
  this.occasion = occasion;
}

Pastry.prototype.describe = function () {
  var description = "The " + this.type + " is a " + this.occasion + "pastry, has a " + this.flavor + " flavor, " + this.levels + " layer(s), and costs " + this.price + ".";
  return description;
}

Answer 1

Я бы выбрал второй пример для JavaScript объектов, использующих наследование прототипа . Таким образом, использование этого даст вам самый классоподобный код. Однако ключевое слово class не является исключительным для AngularJS и представляет собой другой способ написания функций конструктора с прототипными унаследованными методами, геттерами и сеттерами.

Использование import и export (JS руководство по модулям ) для использования class или любого другого значения в других файлах. С помощью export определите, какие переменные, функции или классы могут быть экспортированы . В другом файле используйте import вверху вашего файла, чтобы импортировать экспортированное значение в ваш собственный файл.

Итак, все это вместе.
Вы все еще можете сделать это с помощью function введите ключевое слово и вручную введите свой объект prototype.

function Pastry(type, flavor, levels, price, occasion) {
  ...
}

Pastry.prototype.describe = function () {
  ...
}

export default Pastry;

Или сделайте это с ключевым словом class. Конечный результат будет почти таким же.

export default class Pastry {

  constructor(type, flavor, levels, price, occasion) {
    ...
  }

  describe() {
    ...
  }

}

Обратите внимание на ключевое слово default. Это будет означать, что до тех пор, пока мы не указываем значения, которые мы хотим импортировать, следует импортировать значение по умолчанию.

import Pastry from './pastry.js';

Ключевое слово from извлекает значения из пути относительно файла, который он находится в. Таким образом, в этом случае выше pastry.js файл находится в том же каталоге, файл с оператором import.