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

Question

我在 Polymer 2.0 制作的 Web 应用程序项目中工作，所有自定义元素都扩展了一些 Mixins。其中一些 Mixin 只是为自定义元素提供实用函数，就像日期时间实用函数或任何与数学相关的函数一样。我的问题是是使用 mixins 并将它们扩展到自定义元素还是只是将它们包装在普通的 java 脚本文件中并将该 java 脚本文件加载到 index.html 或应用程序的入口点并用作全局范围，就像我们使用 lodashjs 或下划线.js。

我发现 Mixins 的问题是它总是被应用到每个自定义元素类对象的原型(prototype)链，所以我最终为我的应用程序的每个自定义元素使用了那些相同的实用方法。

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

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>

另一方面，Mixins 可以满足类似的需求，但应该更“连接”到使用它们的元素。(很抱歉这个糟糕的例子，但从我的脑海中我无法想出更好的东西)

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>

结论:

类:

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

混合:

• 如果您需要增强其他类(class)，例如允许myElemenet.changeLanguage('de'), ...
• 如果你需要任何其他状态的类

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