Миксины определяют свойства так же, как и элемент. Эти объекты свойств будут извлекаться из каждого миксина, так что это работает так же, как «старый способ». Тот факт, что синтаксис 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. Таким образом, мы не только включаем сокращённую функциональность, но и ускоряем время генерации класса. Победа вокруг!