Богатые объектные модели и Angular.js: памятка

В моем предыдущем посте о методах получения и Angular.js  я показал, как сложные вычисления могут быть скрыты за простыми свойствами Javascript. Одним из недостатков этой техники является то, что мы можем начать немного задумываться о том, когда вычисления фактически выполняются. Это может привести к проблемам с производительностью.

В этой статье я расскажу о дорогостоящих вычислениях в богатых объектных моделях — будь то скрытые за методами получения или просто обычными методами — и о том, как мы можем использовать мемоизацию, чтобы уменьшить влияние этих вычислений на производительность. Мемоизация — это не то, что вы должны использовать постоянно, но для сценариев использования, включающих длинные цепочки вычислений, это может быть эффективным методом оптимизации, особенно в среде, такой как Angular.

Если вам не хочется читать, вы всегда можете перейти к той части моей презентации ng-conf, которая посвящена запоминанию , или перейти прямо к проекту Github . В любом случае, я предполагаю, что вы знакомы с основополагающими концепциями, которые я представил в первом посте этой серии.

Пример

Давайте продолжим с примера из моих предыдущих постов: подсчет стоимости, выручки и прибыли от предложения по отделке салона самолета:

angular.module('models').
  factory('Proposal', function(Base) {
    return Base.extend({
      get profit() {
        return this.revenue.minus(this.cost);
      },
      get revenue() {
        return this.price.
          convertTo(this.internalCurrency);
      },
      get cost() {
        this.recurringEngineering.cost.plus(
          this.nonRecurringEngineering.cost
        );
      },
      ...
    });
  });

Скажем, мы хотим отобразить эти значения в табличном формате, а также предоставить поле ввода, которое позволяет нам изменить количество самолетов, которые мы предлагаем оснастить. Наш шаблон может выглядеть примерно так:

...
<tr><td>Cost</td><td money="proposal.cost"></td></tr>
<tr><td>Revenue</td><td money="proposal.revenue"></td></tr>
<tr><td>Profit</td><td money="proposal.profit"></td></tr>
...
<tr>
  <td>Number of Aircraft</td>
  <td>
    <input type="number"
      min="1"
      ng-model="proposal.numberOfAircraft">
    </input>
  </td>
</tr>
...

Обратите внимание, что:

• Мы используем пользовательскую директиву для отображения денежных значений. Это действительно просто для того, чтобы избежать дублирования кода — в каждом случае нам нужно отображать как валюту, так и сумму.
• Хотя мы используем нотацию свойств для доступа к значениям, мы могли бы также связываться с вызовами методов. С помощью методов получения немного проще потерять отслеживание того, что на самом деле вычисляется

Настраивая двусторонние привязки, мы можем гарантировать, что если количество самолетов в предложении будет изменено, то значения стоимости, выручки и прибыли будут обновляться автоматически.

Чтобы гарантировать правильное обновление, каждый раз, когда Angular обнаруживает любое событие, будь то ввод пользователя, обратный вызов AJAX или даже таймер, он выполняет цикл дайджеста.

Каждый цикл включает переваривать Угловой неоднократно итерацию списка часов — который будет включать в себя proposal.cost, proposal.revenueи proposal.profitвыражении — и переоценка этих выражений , пока никаких изменений не обнаружены.

Кроме того, даже во время одной итерации по списку наблюдения оценка некоторых из этих выражений приведет к многократным вычислениям. Например, мы отображаем как стоимость, так и прибыль, но стоимость также используется для расчета прибыли. Это фактически означает, что мы рассчитываем стоимость дважды.

Вероятно, наиболее известное правило оптимизации производительности Angular заключается в том, что ваши выражения часов не должны занимать слишком много времени для оценки. Но в нашем случае, по мере того, как предложения становятся больше — больше деталей, больше статей затрат и т. Д. — соответственно увеличивается время расчета. Возможно, мы не сможем полностью исключить это время, но можем ли мы хотя бы сократить количество ненужных вычислений?

Представляем памятку

Мемоизация — это хорошо известная стратегия для ускорения дорогостоящих программ.

В контексте языка с функциональными корнями, такого как Javascript, запоминание — это когда вы оборачиваете функцию так, что, когда она вызывается в первый раз, результат вызова сохраняется. При последующих вызовах вместо повторного вызова исходной функции сохраненное значение возвращается немедленно. Такие библиотеки, как underscore.js и lodash, предоставляют инструменты для запоминания , или вы можете написать свои собственные.

Прежде чем запоминать методы для объектов, нужно сначала задать один ключевой вопрос: идемпотентны ли базовые вычисления и не будут ли они иметь побочных эффектов во время цикла дайджеста? В случае с нашими расчетами по предложению, это действительно так. Например, мы ожидаем, что доход останется неизменным в течение нескольких итераций по списку наблюдения в течение одного цикла дайджеста.

Поэтому без лишних слов я представляю Base.memoizeметод — декларативное средство для указания свойств объекта, значения которого должны быть запомнены. Вот как это выглядит в действии:

angular.module('models').
  factory('Proposal', function(Base) {
    return Base.extend({
      memoize: ['revenue', 'cost', 'profit'],
 
      get profit() {
        return this.revenue.minus(this.cost);
      },
      get revenue() {
        return this.price.
          convertTo(this.internalCurrency);
      },
      get cost() {
        this.recurringEngineering.cost.plus(
          this.nonRecurringEngineering.cost
        );
      },
      ...
    });
  });

В этом случае, вызовы с profit, revenueи costбудет memoized методов геттерных. Реализация также обрабатывает вызовы обычных методов. Однако, если он используется в обычном методе, он не обращает никакого внимания на аргументы метода — тот же результат будет возвращен при последующих вызовах, даже если аргументы отличаются. Следовательно, во избежание путаницы желательно не запоминать методы, принимающие аргументы.

Unmemoization

Запоминание — это хорошо, но вы, вероятно, спрашиваете себя, в какой момент мы на самом деле очищаем любые результаты, которые были запомнены. Например, если пользователь устанавливает количество самолетов один раз, а затем устанавливает его снова, мы хотим, чтобы рассчитанные значения обновлялись оба раза.

Чтобы поддержать это, я также представил unmemoizeметод Basemixin, который очищает кэшированные значения для любых запомненных методов, а это означает, что они будут пересчитаны при следующем вызове.

Как мы это используем? Ну, самый простой способ — вызывать его всякий раз, когда пользователь запускает какое-то действие. Например, когда они устанавливают количество самолетов в предложении:

...
<tr><td>Cost</td><td money="proposal.cost"</td></tr>
<tr><td>Revenue</td><td money="proposal.revenue"></td></tr>
<tr><td>Profit</td><td money="proposal.profit"></td></tr>
...
<tr>
  <td>Number of Aircraft</td>
  <td>
    <input type="number"
      min="1"
      ng-model="proposal.numberOfAircraft"
      ng-change="proposal.unmemoize()">
    </input>
  </td>
</tr>
...

Это удалит все напоминания, которые у нас есть в предложении, а это означает, что правильная стоимость, доход и прибыль будут отображаться каждый раз, когда пользователь что-то делает. Однако в каждом цикле дайджеста стоимость, выручка и прибыль все равно будут запоминаться.

Вложенная незапятнанность

memoizeДекларация может быть применена к любому бизнес — объекту, а не только предложения. Например, мы могли бы избежать дорогостоящих вычислений на NonRecurringEngineeringобъекте, запоминая материальные и внутренние затраты:

angular.module('models').
  factory('NonRecurringEngineering', function(Base, Money) {
    ...
    return Base.extend({
      memoize: ['materialCost', 'internalCost'],
      ..
      materialCost: function() {
        return total(this.materialCostItems);
      },
      internalCost: function() {
        return total(this.internalCostItems);
      },
      ...
    });
  });

angular.module('models').
  factory('Proposal', function(Base) {
    return Base.extend({
      memoize: ['revenue', 'cost', 'profit',
        'recurringEngineering', 'nonRecurringEngineering'],
 
      get profit() {
        return this.revenue.minus(this.cost);
      },
      ...
    });
  });

angular.module('controllers', ['services']).
  controller('ProposalCtrl',
    function($scope, $routeParams, ProposalSvc, afterEachDigest) {
      ProposalSvc.get($routeParams.proposalId).then(
        function(proposal) {
          $scope.proposal = proposal;
 
          afterEachDigest($scope, function() {
            $scope.proposal.unmemoize();
          });
        }
      );
    });