Javascript Polymer 2.x：在ES6 web组件中包装外部JS库

我正在尝试使用Polymer 2.0封装ES6 web组件

我收到以下错误消息

控制台错误 呈现状态。html:54
未捕获的TypeError:ProgressBar.Secircle不是构造函数
在HTMLElement.animateCille（progress bar.html:108）

<link rel="import" href = "../bower_components/polymer/polymer-element.html">
<link rel="import" href = "shared-styles.html">
<link rel="import" href = "progressbar-js.html">

<dom-module id="progress-bar">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10 px;
      }
      p {
        font - size: 200 % ;
        font - family: Roboto, Open Sans, sans - serif;
      }
      .label {
        color: #6FD57F !important;
        font-size: 300%;
        font-family: Roboto, Open Sans, sans-serif;
      }
      #container {
        width: 200 px;
        height: 100 px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <div id="container"></div>
      [[animatePercentage]]
      <p>1,234 steps</p>
    </div>
  </template>

  <script>
    class ProgressBar extends Polymer.Element {
      static get is() {
        return 'progress-bar';
      }

      static get properties() {
        return {
          animatePercentage: {
            type: Number,
            notify: true,
            value: 0.7,
          },
        }
      }

      constructor() {
        super();
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function() {
          //...
        });
      }

      connectedCallback() {
        super.connectedCallback();
        this.animateCircle('container', this.animatePercentage);
      }

      animateCircle(containerId, animatePercentage) {
        var startColor = '#FC5B3F';
        var endColor = '#6FD57F';

        var element = document.getElementById(containerId);
        var circle = new ProgressBar.SemiCircle(element, {
          color: startColor,
          trailColor: '#eee',
          trailWidth: 5,
          duration: 2000,
          easing: 'bounce',
          strokeWidth: 5,
          text: {
            value: (animatePercentage * 100) + '%',
            className: 'label'
          },
          // Set default step function for all animate calls
          step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
          }
        });

        circle.animate(animatePercentage, {
          from: {
            color: startColor
          },
          to: {
            color: endColor
          }
        });
      }

    }

    window.customElements.define(ProgressBar.is, ProgressBar);
  </script>
</dom-module>

在HTMLElement。（进度条.html:85）

<link rel="import" href = "../bower_components/polymer/polymer-element.html">
<link rel="import" href = "shared-styles.html">
<link rel="import" href = "progressbar-js.html">

<dom-module id="progress-bar">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10 px;
      }
      p {
        font - size: 200 % ;
        font - family: Roboto, Open Sans, sans - serif;
      }
      .label {
        color: #6FD57F !important;
        font-size: 300%;
        font-family: Roboto, Open Sans, sans-serif;
      }
      #container {
        width: 200 px;
        height: 100 px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <div id="container"></div>
      [[animatePercentage]]
      <p>1,234 steps</p>
    </div>
  </template>

  <script>
    class ProgressBar extends Polymer.Element {
      static get is() {
        return 'progress-bar';
      }

      static get properties() {
        return {
          animatePercentage: {
            type: Number,
            notify: true,
            value: 0.7,
          },
        }
      }

      constructor() {
        super();
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function() {
          //...
        });
      }

      connectedCallback() {
        super.connectedCallback();
        this.animateCircle('container', this.animatePercentage);
      }

      animateCircle(containerId, animatePercentage) {
        var startColor = '#FC5B3F';
        var endColor = '#6FD57F';

        var element = document.getElementById(containerId);
        var circle = new ProgressBar.SemiCircle(element, {
          color: startColor,
          trailColor: '#eee',
          trailWidth: 5,
          duration: 2000,
          easing: 'bounce',
          strokeWidth: 5,
          text: {
            value: (animatePercentage * 100) + '%',
            className: 'label'
          },
          // Set default step function for all animate calls
          step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
          }
        });

        circle.animate(animatePercentage, {
          from: {
            color: startColor
          },
          to: {
            color: endColor
          }
        });
      }

    }

    window.customElements.define(ProgressBar.is, ProgressBar);
  </script>
</dom-module>

at callMethod（render status.html:51）
在运行队列（render status.html:42）
在呈现状态下。html:29

下面的代码中，我试图将其包装在聚合元素中

src/progress-bar.html

<link rel="import" href = "../bower_components/polymer/polymer-element.html">
<link rel="import" href = "shared-styles.html">
<link rel="import" href = "progressbar-js.html">

<dom-module id="progress-bar">
  <template>
    <style include="shared-styles">
      :host {
        display: block;
        padding: 10 px;
      }
      p {
        font - size: 200 % ;
        font - family: Roboto, Open Sans, sans - serif;
      }
      .label {
        color: #6FD57F !important;
        font-size: 300%;
        font-family: Roboto, Open Sans, sans-serif;
      }
      #container {
        width: 200 px;
        height: 100 px;
      }
    </style>

    <div class="card">
      <div class="circle">1</div>
      <div id="container"></div>
      [[animatePercentage]]
      <p>1,234 steps</p>
    </div>
  </template>

  <script>
    class ProgressBar extends Polymer.Element {
      static get is() {
        return 'progress-bar';
      }

      static get properties() {
        return {
          animatePercentage: {
            type: Number,
            notify: true,
            value: 0.7,
          },
        }
      }

      constructor() {
        super();
      }

      ready() {
        super.ready();
        Polymer.RenderStatus.afterNextRender(this, function() {
          //...
        });
      }

      connectedCallback() {
        super.connectedCallback();
        this.animateCircle('container', this.animatePercentage);
      }

      animateCircle(containerId, animatePercentage) {
        var startColor = '#FC5B3F';
        var endColor = '#6FD57F';

        var element = document.getElementById(containerId);
        var circle = new ProgressBar.SemiCircle(element, {
          color: startColor,
          trailColor: '#eee',
          trailWidth: 5,
          duration: 2000,
          easing: 'bounce',
          strokeWidth: 5,
          text: {
            value: (animatePercentage * 100) + '%',
            className: 'label'
          },
          // Set default step function for all animate calls
          step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
          }
        });

        circle.animate(animatePercentage, {
          from: {
            color: startColor
          },
          to: {
            color: endColor
          }
        });
      }

    }

    window.customElements.define(ProgressBar.is, ProgressBar);
  </script>
</dom-module>

：主持人{
显示：块；
填充：10像素；
}
p{
字体大小：200%；
字体系列：Roboto，opensans，Sans-serif；
}
.标签{
颜色：#6FD57F！重要；
字体大小：300%；
字体系列：Roboto、Open Sans、Sans serif；
}
#容器{
宽度：200像素；
高度：100像素；
}
1.
[[animatePercentage]]
1234步骤

ProgressBar类扩展了Polymer.Element{
静态get是（）{
返回“进度条”；
}
静态获取属性（）{
返回{
动画百分比：{
类型：数字，
通知：正确，
数值：0.7，
},
}
}
构造函数（）{
超级（）；
}
就绪（）{
super.ready（）；
Polymer.RenderStatus.afterNextRender（this，function（）{
//...
});
}
connectedCallback（）{
super.connectedCallback（）；
this.animateCircle（'container'，this.animatePercentage）；
}
animateCircle（集装箱、animatePercentage）{
var startColor='#FC5B3F'；
var endColor='#6FD57F'；
var元素=document.getElementById（containerId）；
变量圆=新的进度条。半圆（元素{
颜色：startColor，
trailColor:“#eee”，
步道宽度：5，
期限：2000年，
“反弹”，
冲程宽度：5，
正文：{
值：（animatePercentage*100）+'%'，
类名：“标签”
},
//为所有动画调用设置默认步长函数
步骤：功能（状态、循环）{
circle.path.setAttribute（'stroke'，state.color）；
}
});
圆。动画（动画百分比{
发件人：{
颜色：startColor
},
致：{
颜色：endColor
}
});
}
}
window.customElements.define（ProgressBar.is，ProgressBar）；

src/progressbar-js.html

<script src="../bower_components/progressbar.js/dist/progressbar.min.js" charset="utf-8"></script>

---

该问题是由

ProgressBar

类与

ProgressBar.js

添加的

ProgressBar

符号之间的名称冲突引起的。重命名类（例如，将其重命名为

MyProgressBar

）可以解决您看到的错误

作为旁注，

animateCycle（）

使用

document.getElementById（containerId）

获取容器元素，但该方法无法查询元素的阴影DOM，而阴影DOM就是元素所在的位置。你可以很容易地用这个聚合物速记来解决这个问题：

this.$[containerId]

// var element = document.getElementById(containerId); // DON'T DO THIS
var element = this.$[containerId]; // DO THIS
var element = this.shadowRoot.getElementById(containerId); // OR DO THIS

---

该问题是由

ProgressBar

类与

ProgressBar.js

添加的

ProgressBar

符号之间的名称冲突引起的。重命名类（例如，将其重命名为

MyProgressBar

）可以解决您看到的错误

作为旁注，

animateCycle（）

使用

document.getElementById（containerId）

获取容器元素，但该方法无法查询元素的阴影DOM，而阴影DOM就是元素所在的位置。你可以很容易地用这个聚合物速记来解决这个问题：

this.$[containerId]

// var element = document.getElementById(containerId); // DON'T DO THIS
var element = this.$[containerId]; // DO THIS
var element = this.shadowRoot.getElementById(containerId); // OR DO THIS

---

这不是因为您定义了一个新的ProgressBar类/proto:

类ProgressBar扩展了Polymer.Element吗{

然后尝试调用一个“不再”存在的方法

新ProgressBar。半圆

？@booster2oo：我的想法是这样的。我想知道我是否需要导入一个行为？我想

链接导入

可能就足够了。你对正确的方法有什么建议吗？我不知道它与web组件非常兼容，所以我可能是错的，但我看到的仍然是。您导入progressbar.js库，它定义了一个可用于构建形状的

progressbar

原型/类：

new progressbar.Semi Circle

。但是，导入此库后，您会说，ok now

progressbar

扩展了

Polymer.Element

的新原型/类，破坏了先前加载的原型/类。因此，它会点击

animateCircle

和

newProgressBar.semicrcle

，

半圆

不再存在。您应该尝试将类重命名为

PolymerProgressBar

，以避免此类问题我不知道它是否是有意的，但您加载了一个HTML文件，而不是progressbar的JS文件：

@booster2oo:我编辑了这个问题，以明确我是根据推荐的最佳实践通过HTML文件导入JS库的。这不是因为您定义了一个新的progressbar类/proto:

类progressbar.Element吗{

然后尝试调用一个“不再”存在的方法

新ProgressBar。半圆

？@booster2oo：我的想法是这样的。我想知道我是否需要导入一个行为？我想

链接导入

可能就足够了。你对正确的方法有什么建议吗？我不知道与web组件非常兼容，所以我可能是错的，但我看到的是。您导入progressbar.js库，该库定义了一个可用于构建形状的

progressbar

原型/类：

新progressbar.semicrcle