使用动态扩展类表达式创建新元素 [英] Creating new element with a dynamic extends class expression

问题描述

是否可以通过类表达式 作为参数？

Is it possible to pass a class expression as parameter?

没有尝试过 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（箭头）函数，


• 具有一个参数（ superclass ）： class 您要扩展，


• ，它将返回新派生的类。

• a (arrow) function,
• with one parameter (superclass): the class you want to extend,
• that will return the new derived class.

// CardtsElements.Zone contains a valid class expression
// used to create a valid Zone Custom Element
var CardtsElements = {
  'Zone': class extends HTMLElement {
      constructor() { super() ; console.log('zone element created') }
      connectedCallback(){ console.log('connected Zone')}
      zone() { console.log( 'zone' ) }
  }
}

let extend = (source, name, classFactory) => 
    customElements.define('cardts-' + name, classFactory(CardtsElements[source])) 


// Create a new 'CARDTS-FOUNDATION' element extending 'CARDTS-ZONE'
extend('Zone','foundation', superclass => 
     class extends superclass {
         constructor() { super() ; console.log(this.localName + ' created') }
         static get observedAttributes() { return ['suit','draggable','drop'] }
         connectedCallback(){ 
            super.connectedCallback();
            console.log('connected',this.localName)
         }
         foundation() { console.log('foundation') }
     }
)

CF.zone()
CF.foundation()

<cardts-foundation id=CF>Cardts Foundation</cardts-foundation>

这篇关于使用动态扩展类表达式创建新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！