多个自定义元素，但单个类答案

【问题标题】：multiple custom-elements, but single class多个自定义元素，但单个类
【发布时间】：2022-01-22 11:55:58
【问题描述】：

我想创建许多不同类型的 HTML 类.. 通常你会扩展一个类然后注册它..

class X1 extends HTMLElement {}
customElements.define('el-x1',X1)
class X2 extends HTMLElement {}
customElements.define('el-x2',X2)
........
class XN extends HTMLElement {}
customElements.define('el-xN',XN)

但这会产生太多的类..

我想做的是创建一个具有不同 .build() 方法的类，即

class X extends HTMLElement {}
customElements.define('el-x',X)


X.prototype.build1 = function(){
    this.setAttibute(...)
    el = document.createElement(...)
    ...
    this.appendChild(el)
}


X.prototype.build2 = function(){ ... }
X.prototype.build3 = function(){ ... }
X.prototype.buildN = function(){ ... }

我想稍后定义 build() 方法……更接近我将使用它们的地方。这就是为什么我会为他们做原型

我会这样使用它们：

 x1 = new X()
 x1.build1()

这样我就不必定义新元素了。

有没有更好的办法？

 imagine having to build a <table> with hardcoded tags <td1>,<td2>, ... <tdN>

VS.

 only <td> cells but different content, and doing it in JS.

基于普通类的层次结构 + 覆盖 .build() 方法将起作用，但自定义元素要求您为每个新类显式定义（）一个标签

处于特定“状态”的许多动态网格之一。一切都是JS。不要下结论..数据是随机的；）

所有独立元素都必须是它们自己的动态单元伪类，为此我使用上面的原型方案。

【问题讨论】：

动态创建多个自定义元素的最终好处是什么？这些元素之间最大的区别是什么？
它们有不同的结构...但是使用 js 构建而不是 .innerHTML
"但这会产生太多的类" - 好吧，您还创建了太多的自定义 html 元素类型。如果它们都做同样的事情（由同一个类实现），为什么你甚至需要不同的类型？ “不同的结构”是什么意思？
您可以为您的结构创建具有一些自定义属性的单个自定义元素。然后根据这些属性中的值动态渲染结构。也许如果您能更清楚地了解最终结果应该是什么，我们可以更好地帮助您。
为什么有是<el-x1>、<el-x2 >等？做<el-x type="1">，<el-x type="2"> 会解决它。你仍然可以从 JS 中调用它。

标签： javascript class custom-element

【解决方案1】：

如果你创建一个函数来创建类，然后自动定义它，你可以这样做。我不确定是否还有其他方法可以做到这一点，尽管您可以尝试使用 customElements.define 和相同的 class。

创建类的函数如下所示：

function defineElement(classToCopy, elmname) {
    let copy = class extends classToCopy {}
    customElements.define(elmname, copy);
}

它仍在创建类，但至少您不必手动进行。

不过，我不会真的推荐这个。

我建议的是：在您的原始类中，检查一个属性（例如，称为“模式”）。如果等于 (...)，则使用 (...) 构建模式。

【讨论】：