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(){}
});
解决方案
您可以将类表达式作为类工厂函数传递:
- 一个(箭头)
function
, - 带有一个参数 (
superclass
):class
您要扩展的, - 这将返回新的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>
推荐阅读
- python - PySpark Python使用列对数据框进行排序
- java - 如何使用 ClassName 作为字符串来执行“新类”?
- git - 当两个分支匹配时在 GitHub 上创建拉取请求
- python - 如何在html文件的块代码上循环遍历另一个文件中的字典列表?
- tfs - 如何为仅解决和关闭子项的功能编写 TFS 查询
- xamarin - 在 Xamarin.android 上捕获屏幕得到黑屏 - 使用 Libvlc
- world-of-warcraft - World of Warcraft API: Check if a bag slot is empty
- clojure - 在 Clojure 中使用浮点值的理念是什么?
- python - 在不启动新驱动程序的情况下处理警报框
- reactjs - 当你点击它时,来自 React Router 的链接标签没有做任何事情