Dart:使用抽象类扩展 HTMLElement

Question

我试图用以下设计模式写一些东西:

void main() 
{
    document.registerElement('abs-test', Test);
    TestExtend test = new TestExtend();
    document.body.append(test);
}

abstract class Test extends HtmlElement
{
    Test.created() : super.created();
    factory Test() => new Element.tag('abs-test')..text = "test";
}

class RedTest extends Test
{
    TestExtend() : super() => style.color = 'red';  
}

我的目标是创建一个注册到抽象类“Test”的自定义 HtmlElement。这个抽象类“Test”将具有所有 Test 类型的元素都需要具有的一些属性。在此示例中，所有 Test 类型的元素都需要将单词“test”作为其文本。

但是，我当时只想允许用户创建具有更具体属性的“测试”的子类。在此示例中，我们有 RedTest，然后将 Test 的颜色设置为红色。生成的 HTML 将是:

<abs-test style="color:red;">test</abs-test>

我有两个问题:

1) 是否可以调用父类的工厂构造函数？ (如果没有，是否可以以不需要工厂构造函数的不同方式扩展 HtmlElement)

2) 是否可以使用抽象类扩展 HtmlElement？

我已经用不同的构造函数进行了一段时间的测试，但无法使其正常工作。任何人都可以建议吗？

Answer 1

你用一个类注册一个标签，这样浏览器就可以为你实例化它。如果这不是 1:1 关系，浏览器就无法知道要实例化哪个类。

因此

你需要

• 每个类(class)一个不同的标签
• 为每个标签注册一个具体的(非抽象的)类

通常可以在抽象类的工厂构造函数中调用子类的构造函数

factory Test() => new RedTest()..text = "test";

在Dart中是有效的，但是因为扩展一个元素需要返回

new Element.tag('abs-test')

这行不通，因为您不能同时返回两者。

你需要用不同的标签注册每个具体的子类

document.registerElement('abs-test-red', TestRed);
document.registerElement('abs-test-blue', TestBlue);