不使用class关键字创建自定义元素 [英] Creating custom element without using class keyword

问题描述

这实际上是关于ES6中面向对象模型的更多问题。但是我将使用新的自定义元素的创建作为示例。

This is actually more a question about the object-orientation model in ES6. However I am going to use the creation of a new custom element as an example.

因此，创建新自定义元素的新的闪亮（截至今天）方法是通过 customElements.define（）接收标记 name ，构造函数和选项（这是可选的） API / CustomElementRegistry / definerel =noreferrer> MDN ， Google ，当然还有 spec 。列出的所有文档都为构造函数使用了新类关键字的变体。

So the new and shiny (as of today) method to create a new custom element is via customElements.define() which take in a tag name, a constructor, and options (which is optional) according to MDN, Google, and of course the spec. All the documentation listed uses a variation of the new class keyword for constructor.

假设我不喜欢新的类语法，并且考虑到大部分 class 是一种合成糖（根据这个教程）。该规范甚至具体说明了

Assuming I don't like the new class syntax, and considering for most part class is a syntatic sugar (according to this tutorial). The spec even specifically state that

对 super（）的无参数调用必须是
构造函数体中的第一个语句，才能在运行任何其他代码之前建立正确的原型链和
值。

A parameter-less call to super() must be the first statement in the constructor body, to establish the correct prototype chain and this value before any further code is run.

通过阅读本教程，我发布了这个以尝试是否可行（也是为了修改和重新学习Javascript的对象模型）。

By reading the tutorial I came out with this to try if it is possible (also to revise and re-learn Javascript's object model).

var _extends = function(_parent) {
    var _result = function() {
        _parent.call(this);
    };
    _result.prototype = Object.create(_parent.prototype);
    Object.defineProperty(_result.constructor, 'constructor', {
        enumerable: false,
        writeable: true,
        value: _result
    });

    return _result;
};

customElements.define('foo-bar', _extends(HTMLElement));
console.log(document.createElement('foo-bar'));

我收到此错误

错误：正在构造的自定义元素未使用
customElements 注册。

所以我的问题是，是否可以不使用 class 关键字（也没有 new 如果可能的话）？如果答案是否定的，我应该坚持使用 class 关键字，而不是在编写新的Javascript时使用 Object.create 将来的代码？

So my question is, is it possible to do it without using class keyword (also without new if possible)? If the answer is no, should I stick to the class keyword instead of using Object.create when I write new Javascript code in the future?

推荐答案

在一些简单的情况下，可以定义一个没有的自定义元素class keyword。

In some simple situations it is possible to define a custom element without the class keyword.

诀窍是使用 Reflect.construct（）替换 super（） call。

The trick is to use Reflect.construct() to replace the super() call.

var CEo = function ()
{
    console.log( "created" )
    return Reflect.construct( HTMLElement, [], CEo )
}

CEo.prototype = Object.create( HTMLElement.prototype )

CEo.prototype.connectedCallback = function ()
{
    console.log( "connected" )
    this.innerHTML = "Hello v1"
} 

customElements.define( "object-v1", CEo )

请注意，它是一个不受支持的语法，因为正如你所说，ES6类只不过是语法糖。

Note that it's a not a supported syntax because, as you stated, ES6 classes are a little more than just syntaxic sugar.

这篇关于不使用class关键字创建自定义元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！