聚合物 3.x 中聚合物 1.x 的“行为”对应物是什么

【问题标题】：What is the 'behavior' counterpart of Polymer 1.x in polymer 3.x聚合物 3.x 中聚合物 1.x 的“行为”对应物是什么
【发布时间】：2019-05-17 19:34:27
【问题描述】：

我正在将行为组件从 Polymer 1.x 转换为 Polymer 3.x。我关心的是如何翻译我的 bevaior 类以在 Polymer 3 应用程序中使用。测试代码如下：

PermissionsBehaviour =
{
    ready: function ()
    {
        var _th = this;
        this._getRoles().then(function (d)
        {
            _th.set('perms_roles', d);          
        });
    },

    properties:
    {
         perms_roles: { type: Array, value: [] },          
    },

    _getRoles: function ()
    {
        return $.get(Global.Settings.RootWebUrl +                                                     
                       "Permission/GetUserRoles", function (result) { });
    }
}

【问题讨论】：

可以通过使用 mixins 来做到这一点：

标签： polymer polymer-2.x polymer-3.x

【解决方案1】：

您可以在 Polymer 3 中将其定义为 mixin：https://polymer-library.polymer-project.org/3.0/docs/devguide/custom-elements#defining-mixins

import {dedupingMixin} from '@polymer/polymer/lib/utils/mixin.js';

let internalMyMixin = function(superClass) {
  return class extends superClass {
    constructor() {
      super();
      this.addEventListener('keypress', (e) => this._handlePress(e));
    }

    static get properties() {
      return {
        bar: {
          type: Object
        }
      };
    }

    static get observers() {
      return [ '_barChanged(bar.*)' ];
    }

    _barChanged(bar) { ... }

    _handlePress(e) { console.log('key pressed: ' + e.charCode); }
  }
}

const MyMixin = dedupingMixin(internalMyMixin);
export {MyMixin as default};

然后使用mixin如下：

import {MyMixin} from './my-mixin.js';

class Foo extends MyMixin(PolymerElement) { ... }

【讨论】：