江苏龙网

  1. 主页 > 生活百科 > >

Web Components实践：如何搭建一个框架无关的AI组件库

Web Componen

一、让人又爱又恨的Web Components
Web Components是一种用于构建可重用的Web元素的技术 。它允许开发者创建自定义的html元素，这些元素可以在不同的Web应用程序中重复使用，并且具有自己的样式、行为和功能 。
Web Components并非一项新技术，而是一组持续演进的、由W3C标准化的组件化API 。最早可以追溯到2011年左右，大约在2016年左右各个浏览器才实现了Custom Element V1版本 。然而，在同一时期，诸如Vue和React等组件化框架已经开始主导前端开发生态 。
尽管近几年Web Components标准和技术都趋于成熟，但早期面临的兼容性问题以及后来Vue和React等MVVM框架的崛起，导致Web Components领域一直处于低调状态 。接下来，我们将从Web Components的发展历程、优势以及开发中面临的挑战三个方面更深入地了解Web Components 。
1、Web Components发展历程
•2011年：google发布了Chrome浏览器，并提出了“Shadow DOM”概念，这是Web Components的一个重要组成部分 。
•2013年：谷歌工程师Alex Komoroske在Google I/O大会上首次提出了Web Components的概念，并推动了相关标准的制定 。
•2014年：W3C发布了Web Components的规范草案，其中包括四个主要技术：Custom Elements、Shadow DOM、HTML Templates和HTML Imports 。
•2015年：Web Components的规范逐渐得到浏览器厂商的支持 ， Chrome、Firefox、Safari等主流浏览器开始逐步实现相关功能 。
•2018年：Web Components逐渐成为前端开发的主流技术之一，越来越多的开发者开始使用Web Components来构建可重用的组件 。
•至今：Web Components技术不断发展和完善，越来越多的框架和库开始支持Web Components，使其在前端开发中发挥更大的作用 。
2、Web Components有哪些优势
•封装性：Web Components 具有良好的封装性，可以将页面中的功能和样式封装在一个自定义元素内部，避免全局作用域的污染，提高了代码的可维护性和可重用性 。
•跨框架兼容：Web Components 是基于 Web 标准的技术 ， 可以在任何支持 Custom Elements 和 Shadow DOM 的现代浏览器中使用，与各种前端框架和库兼容性良好 。
•标准化：Web Components 的规范由 W3C 组织制定，具有较高的标准化程度 ， 有利于统一前端开发的规范和实践，提高了代码的可维护性和可移植性 。
•性能优势：通过使用 Shadow DOM 技术，Web Components 可以实现更好的性能优化，避免不必要的重绘和重排 ， 提高页面的渲染效率和用户体验 。
目前，前端开发中有许多流行的框架可供选择，如React、Vue、Angular、Solid、Svelte、Preact等 。框架的选择是一个复杂的决策过程 。当框架版本升级时，项目可能需要面临重构的问题 。例如，从Vue2升级到Vue3可能需要付出较大的改造成本 。如果不进行升级，就无法使用最新特性，甚至可能面临框架旧版本不再维护的尴尬局面 。在这种情况下，Web Components 的框架无关性可以在一定程度上改善这种局面 。
就性能而言，以将 React 组件转换为 Web Components 为例，可以优化执行过程 ， 减少阻塞，提高页面性能 。在普通的 React 组件中，初次执行时需要一次性完成所有必须的节点逻辑，这些逻辑的执行会同步占用在 JAVAScript 的主线程上 。当页面变得足够复杂时，一些非核心逻辑可能会阻塞后面核心逻辑的执行 。而通过使用 Web Components 优化 React 组件 ， 执行过程会变得更简洁 。例如，注册一个复杂的逻辑组件时，在 React 执行时只需执行一个 语句，创建组件只需要 1-2 微秒即可完成 。真正的逻辑不会立即执行，而是等到“核心任务”执行完毕后再执行 ， 甚至可以在合适的时机再执行 ， 从而降低 Diff 成本 。

Web Components实践：如何搭建一个框架无关的AI组件库

文章插图
3、使用Web Components开发的痛点
虽然Web Components具有许多令人喜欢的优点，但在实际开发中也存在一些棘手的问题 。以下是几个典型问题：
•原生开发难题：Web Components是一项原生技术，因此在组件编写过程中需要回归到原生开发 。事件处理、状态管理等方面都需要自行处理 。尽管大多数框架都提供了对Web Components的封装方案，但使用这些方案又需要引入相应框架的运行时，这导致脱离了框架无关性这一最大优势 。
•Form表单问题：在Shadow DOM中 ， 包含<input>、<textarea>或<select>等标签的value不会自动与表单关联 ， 因此在表单提交时无法获取相应的value ， 需要手动处理，另外 ElementInternals提案 也在致力于解决这个问题 。


推荐阅读


上一篇：MySQL 核心模块揭秘

下一篇：向量数据库落地实践