代码之家 › 专栏 › 技术社区 › Harshal Patil

如何在ReasonML中为web组件扩展JavaScript HtmleElement类?

bucklescript reason ffi class

-1

Harshal Patil · 技术社区 · 7 年前

对于下面的JavaScript代码,如何用ReasonML编写?

class HelloWorld extends HTMLElement {
  constructor() {
    super();
    // Attach a shadow root to the element.
    let shadowRoot = this.attachShadow({mode: 'open'});
    shadowRoot.innerHTML = `<p>hello world</p>`;
  }
}

我找不到任何关于在ReasonML中编写类的文档?我不能使用普通对象/类型,因为我需要从HtmleElement类进行扩展,HtmleElement类不适用于 ES style classes .

我已经调查过了 existing question - How to extend JS class in ReasonML 然而,这是另一回事。为了编写web组件,我们需要扩展 HTMLElement 我们必须用 new 关键词。ES5风格的扩展机制不起作用。

1 回复 | 直到 7 年前

1

4

glennsl Namudon'tdie 7 年前

你不能。至少不能直接这么做,因为BuckleScript(Reason用来编译成JavaScript)以ES5为目标,因此不了解ES6类。

幸运的是,ES6类不需要特殊的运行时支持,但只作为语法糖实现,这就是为什么您可以将ES6传输到ES5,如您链接到的问题所示。然后,您真正需要做的就是将这个传输的输出转换为ReasonML:

var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var BaseElement = (function (_super) {
    __extends(BaseElement, _super);
    function BaseElement() {
        _super.call(this);
    }
    return BaseElement;
}(HTMLElement));

根据您实际需要的特定类功能,您可能可以将其简化一点。