时间戳

首页 > 解决方案 > 创建 Javascript 组件的最佳方法是什么？

javascript - 创建 Javascript 组件的最佳方法是什么？

问题描述

我正在研究如何在 Javascript 中创建组件。通过扩展 HTMLElement 创建组件是个好主意吗？或者还有另一种方法。如果你能告诉我，哪种方法是最好的

我正在练习我在网上找到的这个例子，这是一个好方法吗？

<my-component id="a">Hello</my-component>
<my-component id="b">Hello</my-component>

<script>
 class MyComponent extends HTMLElement {
   get id () {
     console.log ('get id', super.id);
     return super.id;
   }

   set id (value) {
     console.log ('get id', value);
     super.id = value;
   }

   get innerHTML () {
     console.log ('get innerHTML', super.innerHTML);
     return super.innerHTML;
   }

   set innerHTML (value) {
     console.log ('set innerHTML', value);
     super.innerHTML = value;
   }
 }

 customElements.define ('my-component', MyComponent);

 const el1 = document.querySelector ('#a');
 el1.id    = 'c';

 const el2     = document.querySelector ('#b');
 el2.innerHTML = '<h2>Hello</h2>';

</script>

标签： javascriptarraysajaxdom-eventsajaxform

解决方案

这取决于你在寻找什么。如果您正在尝试构建更复杂的 Web 应用程序，我建议您使用前端框架，例如 React、Angular 或 Vue，因为它们让编写复杂的前端变得非常优雅。

但是，如果您更想了解 Web 组件和构建前端的不同方法，我鼓励您尝试使用一堆不同的工具和框架构建简单的项目，您可以找到您最喜欢的东西并从那里开始。我提到的框架之一可能是一个很好的起点。

推荐阅读