不会吧，现在还有人不知道 Web components ？

前端小猿_zym
1,131 阅读6分钟

一、背景

  1. 风格不统一：前端框架众多对应组件库也不尽相同，导致构建的应用 UI 风格也不一致。

  2. 维护成本高：不同技术栈构建的应用都需要点对点进行维护。

  3. 复杂性高：一般都依赖于第三方库和框架，这可能会增加应用程序的复杂性和维护成本。

  4. 灵活性受到限制：Web 框架由于其提供了完整的解决方案，因此可能限制了开发者的灵活性。对于某些特定的需求，开发者可能需要适应框架的限制，或者需要寻找第三方插件或扩展。

  5. 需要学习成本：Web 框架通常需要更多的学习和了解才能熟练使用。不同的框架可能有不同的API和概念，因此切换框架可能需要一定的成本。

二、认识 Web components

Web Components 技术的发展历程非常具有特色。早在2004年，Mozilla基金会就提出了 XUL（XML User interface Language）的概念，旨在使用XML 语言来定义通用的用户界面组件。之后，Google 通过 GWT（Google Web Toolkit）再次推出了 UI 编写框架，其中有关于组件化的一些实践，例如通过UI Binder来实现UI设计与业务逻辑的分离，处理数据绑定等前端开发问题。在此之后，一些流行的Web框架，例如 Angular、React 和 Vue 都提供了自定义组件化的新特性，从而为 Web Components 的实现和推广铺平了道路。

Web Components 目前已经成为Web应用程序开发技术的主流之一，越来越多的开发者开始关注和应用这种技术。虽然在早期的浏览器中并未提供原生支持，但是通过 Web Components 的相关 polyfill 库，开发者可以在任何现代浏览器上实现相同的开发体验。

三、优点与缺点

Web Components 主要优势：

  1. 可重用、可组合性：Web Components 可以轻松地创建可重用的代码块，这有助于减少重复代码并提高代码的可维护性。

  2. 灵活性：Web Components 可以轻松地定制 HTML 标签，从而使 HTML 更加灵活和强大。这使得开发者可以创建自定义的标签、组件和属性，以满足特定的需求。

  3. 跨平台兼容性：Web Components 是 HTML5 的一个重要组成部分，因此它们在所有主流浏览器中都是支持的。这使得开发者可以轻松地编写跨平台的代码,从而提高代码的通用性和可移植性。

  4. 可测试性：Web 组件是可测试的，这意味着它们可以使用单元测试和集成测试进行测试。这可以帮助开发人员确保他们的 Web 组件是正确的。

  5. 标准化：Web 组件是基于标准的，这意味着它们可以在任何现代浏览器中运行。这可以帮助开发人员确保他们的 Web 组件可以被广泛使用。

  6. 组件化和模块化程度高：通过 Shadow DOM，可以将一个组件的 HTML、CSS 和 JavaScript 封装在一起，形成一个独立的模块。避免了样式冲突和命名空间污染，而不会影响到其他元素；将组件的实现细节隐藏起来，只暴露必要的接口，从而保护了组件的完整性和稳定性。

Web Components 缺点：

  1. 浏览器兼容性：虽然 Web Components 规范得到了 Chrome、Firefox 和 Safari 等主流浏览器的支持，但不同浏览器的实现方式可能存在差异，这可能导致在某些浏览器中出现问题。

  2. 学习成本：Web Components 技术相对复杂，需要理解 Custom Elements、Shadow DOM、HTML Templates 和 ES Modules 四个技术组成部分的概念和使用方式，可能需要一定的学习成本。

  3. 开发效率：由于 Web Components 相对比较自由和灵活，开发人员需要自己编写更多的代码来实现功能和样式，这可能会导致开发效率降低。

  4. 生态发展：尽管 Web Components 技术提供了强大的自定义能力，但目前其生态发展相对较弱，缺乏像 React、Vue 等框架那样丰富的第三方库和组件支持，比如SEO 需要很多额外处理、SSR 方案还不够完善。

四、Web Components 使用

Web Component 使用教程 mdn1。

示例：

// 为这个元素创建类
class MyCustomElement extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    console.log('元素被添加');
  }

  disconnectedCallback {
    console.log('元素被移除');
  }

  adoptedCallback() {
    console.log('元素被移动');
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log('属性发生变化');
  }
}

// 注册自定义元素
customElements.define("my-custom-element", MyCustomElement);

<!-- 使用自定义元素 -->
<my-custom-element size="100"></my-custom-element>

五、发展现状

Web Components 的标准已经相对成熟，并且在主流浏览器中得到了广泛支持。Web Components 社区正在不断壮大，应用场景变得更加丰富。然而在实际应用中仍然存在一些挑战和问题，例如，Web Components 的性能可能不如原生 HTML 元素，同时其使用门槛也相对较高，需要一定的学习和实践成本。但是，新兴 Web 框架的出现，使得 Web Components 赢来了春天，开发 Web Components 组件可以像现代 web 框架一样如鱼得水，完善的测试套件也在为 Web Components 保驾护航。

新兴框架:

  1. Stencil2

    img-20231218121947.png

  2. Lit3

    img-20231218122828.png

    • UI 组件库
      • Web: shoelace一个具有前瞻性的 Web 组件库。

  3. Quarkc4

    img-20231218131221.png

  4. Omi5

    img-20231218143320.png

    • UI 组件库

  5. Atomico 6,受 React Hooks 启发的微型库，专为 Web 组件的创建而设计和优化。

  6. Fast7

  7. 其他

  8. 测试套件8

  9. Web Component DevTools9

  10. Eslint10

部分内容参考了文章 你不知道的 Web Components - 现状

六、总结展望

未来已来，赶紧上车。

Footnotes

  1. Web Components 使用教程 ↩

  2. Stencil 是一个用于构建可重用、可扩展的组件库的库。生成可在任何地方运行的小型、快速的 Web 组件。 ↩

  3. Lit 是一个简单的库，用于构建快速、轻量级的 Web 组件。 ↩

  4. Quarkc，构建下一代前端组件！ ↩

  5. Omi 是 Web Components 框架 ↩

  6. Atomico 专为 Web 组件的创建而设计和优化. ↩

  7. Fast 库是一种轻量级方法，可轻松构建高性能、内存高效且符合标准的 Web 组件。 ↩

  8. Web Components 测试套件——Open Web Components ↩

  9. Web Component DevTools ↩

  10. @open-wc/eslint-config ↩

avatar
文章
阅读
粉丝