Javascript 使用动态扩展类表达式创建新元素

是否可以将类表达式作为参数传递

尚未尝试

eval

路线

// CardtsElements.Zone contains a valid class expression
// used to create a valid Zone Custom Element
let extend = (source, name, definitionClassExpression) => 
    customElements.define('CARDTS-' + name, 
                           class extends CardtsElements[source] definitionClassExpression);
                                                              ^^^^SYNTAX ERROR^^^^^^^^^^

// Create a new 'CARDTS-FOUNDATION' element extending 'CARDTS-ZONE'
extend('Zone','Foundation', {
    static get observedAttributes() {
        return ['suit','draggable','drop'];
    }
    constructor(){}
});

您可以将类表达式作为类工厂函数传递：

• a（箭头）

  功能

• 有一个参数（

  超类

  ）：要扩展的

  类

• 这将返回新的派生

  类

//cardtelements.Zone包含有效的类表达式
//用于创建有效的分区自定义元素
var cardtelements={
“区域”：类扩展HtmleElement{
构造函数（）{super（）；console.log（'zone element created'）}
connectedCallback（）{console.log（'connected Zone'）}
zone（）{console.log（'zone'）}
}
}
让extend=（源、名称、类工厂）=>
define（'cardts-'+名称，类工厂（cardtelements[source]））
//创建新的“CARDTS-FOUNDATION”元素，扩展“CARDTS-ZONE”
扩展（'Zone'，'foundation'，超类=>
类扩展了超类{
构造函数（）{super（）；console.log（this.localName+'created'）}
静态get-ObservedAttribute（）{return['suit'，'draggable'，'drop']}
connectedCallback（）{
super.connectedCallback（）；
console.log（'connected'，this.localName）
}
foundation（）{console.log（'foundation'）}
}
)
比照区域（）
CF.foundation（）

---

Cardts Foundation

可能与Object.assign（）一起使用？与以往一样锋利。再过几天，你在过去几个月里的所有帮助的结果都在Github上这很酷。。。为了增强您的示例，我在代码中添加了2个connectedCallbacks和一个super调用来完成功能。我的52张扑克牌现在完全是语义HTML，比如：

和

创建SVG卡（作为数据：IMG元素中的图像）。我需要做一些认真的代码清理才能在GitHub上实现这一点