Миксины определяют свойства так же, как и элемент. Эти объекты свойств будут извлекаться из каждого миксина, так что это работает так же, как «старый способ». Тот факт, что синтаксис static get properties() {}, поначалу выглядит запутанным, но Polymer будет перебирать каждый из миксинов, чтобы получить полный набор свойств.

Кроме того, кажется, что свойства ведут себя по-разному, если они определены, по сравнению с тем, когда они не определены. Это отличается от полимера 1, где свойства можно было использовать и связывать без определения. Я рекомендую определить любое свойство, которое интересует миксин.

Порядок смешивания

Порядок микширования является вложенным, например. A(B(C(baseClass))). По крайней мере, исходя из Полимера 1, стоит отметить, что порядок вложения (т.е. написания) противоположен Полимеру 1. Таким образом, приведенное выше вложение миксинов эквивалентно написанию behaviors: [C, B, A]. Функции самого внешнего миксина применяются к конечному классу.

Сокращение миксинов

Официальная документация предлагает следующий способ объединения примесей в цепочку:

class AnotherElement extends AnotherMixin(MyMixin(Polymer.Element)) { … }

Через некоторое время это становится неоправданно длинным. При кодировании Polymer 1 и переносе кода, так сказать, у меня есть элементы, которые могут легко охватывать 5+ миксинов, и объявление класса становится невыносимо длинным. Однако JavaScript приходит нам на помощь — миксины — это просто функции, поэтому мы можем легко объявить миксин-микшер.

let MyCustomBase = (superclass) => Mixin1(Mixin2(MixinN(superclass)));

Это позволит нам сократить вызовы примесей до одного вызова.

class MyElement extends MyCustomBase(Polymer.Element)

Кэширование примесей

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

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

TequilaMixin = Polymer.dedupingMixin(base => {
 
  let myTempBase = Mixin1(Mixin2(MixinN(base)));
  
  // Note that this scope is executed exactly once! Do not try to put hidden variables here.

  class Tequila extends myTempBase {
     // Usual class declarations here. constructor(), properties(), etc...
  }

  return Tequila;

});

Теперь этот TequilaMixin можно использовать. Он будет включать как код Tequila, так и любые другие примеси, которые мы включаем в myTempBase. Таким образом, мы не только включаем сокращённую функциональность, но и ускоряем время генерации класса. Победа вокруг!