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

Question

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

另一方面，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>

结论：

类：

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

混音：

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

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