如何用函数结构替代类结构实现自定义HTMLElement组件

问题背景 #

需要将基于Class类实现的阿拉伯键盘自定义元素SpecialKeyboard，改用函数结构重写。原Class代码及期望的函数结构示例如下：

目标函数结构示例 #

function SpecialKeyboard() {
  /* 实现代码 */
} 
SpecialKeyboard();

原Class实现代码 #

class SpecialKeyboard extends HTMLElement{
  constructor(){
    super()
    arabic.split('').forEach( char => {
      key.innerHTML = arabic[arabic.indexOf(char)];
      key.onclick = ()=>{
        this.typeInTextarea(TextView,arabic);
        this.addEventListener('click', handler, false);
      }
      center.appendChild(key);
    });
    String.prototype.trToLower = function(){
        var string = this;
        return string.toLowerCase();
    }   
  }
  typeInTextarea(el, newText) {
    var start = el.selectionStart
    var end = el.selectionEnd
    el.value = (before + newText + after)
    el.selectionStart = el.selectionEnd = start + newText.length
  } 
}
customElements.define('arabic-keyboard',SpecialKeyboard);

函数式实现方案 #

要通过函数结构实现自定义元素，核心是继承HTMLElement的原型链，并正确调用父类构造逻辑。以下是改造后的完整代码：

// 定义构造函数
function SpecialKeyboard() {
  // 调用HTMLElement构造函数，生成实例并绑定原型
  const instance = Reflect.construct(HTMLElement, [], SpecialKeyboard);

  // 原Class构造函数内的逻辑
  arabic.split('').forEach(char => {
    key.innerHTML = arabic[arabic.indexOf(char)];
    key.onclick = () => {
      // 调用原型上的方法，这里修正原代码传参问题，改为当前字符char
      instance.typeInTextarea(TextView, char);
      instance.addEventListener('click', handler, false);
    };
    center.appendChild(key);
  });

  // 扩展String方法
  String.prototype.trToLower = function() {
    return this.toLowerCase();
  };

  return instance;
}

// 继承HTMLElement的原型方法
SpecialKeyboard.prototype = Object.create(HTMLElement.prototype);
// 修正constructor指向，避免原型链混乱
SpecialKeyboard.prototype.constructor = SpecialKeyboard;

// 挂载typeInTextarea方法到原型，对应原Class的实例方法
SpecialKeyboard.prototype.typeInTextarea = function(el, newText) {
  const start = el.selectionStart;
  const end = el.selectionEnd;
  // 补充原代码缺失的before/after变量逻辑
  const before = el.value.substring(0, start);
  const after = el.value.substring(end);
  el.value = before + newText + after;
  el.selectionStart = el.selectionEnd = start + newText.length;
};

// 注册自定义元素
customElements.define('arabic-keyboard', SpecialKeyboard);

关键细节说明 #

• 用Reflect.construct()替代Class中的super()，确保正确调用父类构造函数并生成符合规范的元素实例
• 通过Object.create(HTMLElement.prototype)让函数原型继承HTMLElement的基础特性，保证自定义元素的原生行为
• 将typeInTextarea挂载到函数原型上，实现与Class实例方法一致的复用效果
• 补充原代码中缺失的before/after变量逻辑，修复功能漏洞

内容的提问来源于stack exchange，提问作者Gary Andrew