Mixins作为Polymer 2.0中的实用程序库

Question

我正在使用Polymer 2.0制作的Web应用程序项目,所有Custom元素都扩展了一些Mixins.其中一些Mixins只是为自定义元素提供实用程序功能,就像Date Time Utility函数或任何与Math相关的函数一样.我的问题是是否使用mixins并将它们扩展到自定义元素或只是将它们包装在普通的java脚本文件中,并在index.html或应用程序的入口点加载该java脚本文件,并像我们使用lodashjs一样用作全局范围underscore.js.

我用Mixins找到的问题是它总是被应用到每个自定义元素类对象的原型链,所以我最终得到了与我的应用程序的每个自定义元素相同的实用程序方法.

请建议我在Polymer相关应用程序中使用Utilities的最佳方法.

Answer 1

这是一个很难正确回答的问题......因为真正的答案只是“两者都是有效的解决方案 - 这取决于您的用例”。我想这并没有太大帮助。那么让我们给您一些背景信息。

对于真正的实用程序，最好将它们作为静态函数放入类中。

class MathHelper {
  static addOne(value) {
    return value + 1;
  }
}

class ElOne extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `5 + 1 = ${MathHelper.addOne(5)}`;
  }
}

customElements.define('el-one', ElOne);

<el-one></el-one>

另一方面，Mixin 可以满足类似的需求，但应该与它们所使用的元素更加“连接”。（很抱歉这个可怕的例子，但从我的头脑中我无法想出更好的东西）

const MathMixin = superclass => class extends superclass {
  addOneTo(prop) {
    this[prop] += 1;
  }
}

class ElTwo extends MathMixin(HTMLElement) {

  constructor() {
    super();
    this.number = 5;
  }
  
  connectedCallback() {
    this.addOneTo('number');
    this.innerHTML = `5 + 1 = ${this.number}`;
  }
  
}

customElements.define('el-two', ElTwo);

<el-two></el-two>

结论：

班级：

• 如果可能的话使用它
• 甚至可能使用静态函数
• 更容易测试和维护

混合：

• 如果您需要增强另一个类，例如允许 myElemenet.changeLanguage('de')，...
• 如果您需要班级的任何其他状态

我希望这至少能澄清一点。如果您有更具体的示例需要实施什么，我们可以提出推荐的实施方式。