江苏龙网

  1. 主页 > 生活百科 > >

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

Web Componen


•样式隔离问题：虽然样式隔离有助于避免全局样式污染的问题，但在某些场景下，如主题颜色等，仍需要将样式同步到Web Components组件内部 。目前可以通过css变量实现主题切换 。此外 ， 需要注意的是 ， slot插槽中的DOM元素样式并未得到隔离 。
针对这些问题，开发人员可能需要考虑采取一些额外的措施来解决挑战，以确保Web Components在实际应用中能够更加顺畅地运行 。
二、目前主流的Web Components组件方案
1、头部案例
Twitter
Twitter 2016 年开始将自己的嵌入式推文从 iframe 切换成 ShadowDOM ， 减少了内存消耗、加快了渲染速度，并批量渲染的时候保持丝滑 。Upcoming Change to Embedded Tweet Display on Web?
YouTube
Youtube 作为 google 系的产品，很早就在全站用上了 Web Components，并且开源了自己播放器组件 Github - GoogleWebComponents/google-youtube: YouTube video playback web component此外 google 开源的 Web Components 还是很多的，Google Web Components · GitHub ，包括地图、drive、日历等等 。
Github
Github 对 Web Components 的使用很早 ， 具体可以看： How we use Web Components at GitHub | The GitHub Blog，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相继实现之后，Github 开始大范围使 。要知道 Github 2018 年才刚刚完全移除 jQuery：Removing jQuery from GitHub.com frontend | The GitHub Blog 这既得益于 Github 自身项目组件化的架构，也得益于 Web Components 本身与框架无关的特性非常识合作老项目升级 。
Adobe Spectrum
?Adobe Spectrum 是由 Adobe 创建的设计系统，该站点是一个基于 Web Components 的 UI 框架产品 。
2、方案对比
目前主流的 Web Components 组件方案有三种：
方案一：
•特点：以React和Vue为代表 ， 通过将React或Vue组件包装为Web Components组件的方式实现 。
•优点：利用了本身框架的特性如生命周期、状态管理等，易于开发者使用 。
•缺点：需要引入本身框架的运行时 ， 导致组件体积增加，同时丧失了框架无关性这一优势 。
方案二：
•特点：以Stencil和LitElement为代表，提供了专门的编译器、工具链和语法糖来构建 Web Components 。
•优点：相比第一种方案，引入本身框架的运行时可能更小，减少了体积 。
•缺点：需要学习新的语法和工具，可能增加开发者的心智负担 。
方案三：
特点：以Svelte和Solid为代表，直接将组件编译成原生 Web Components
优点：放弃了虚拟DOM，利用编译或转译能力直接生成操作DOM的更新函数，性能优秀，接近原生DOM 。另外Vue3中的Vapor模式，正是借鉴了这种模式，目前正在试验阶段 。
三、与SolidJS结合的“化学反应”
1、SolidJS有何不同
SolidJS 是一个快速、灵活、可扩展的 JavaScript 库，用于构建用户界面 。与其他前端框架相比，SolidJS 有一些独特的特点和优势：
•Reactivity System: SolidJS 使用基于数据变化的响应式系统，可以精确追踪状态的变化，并只更新发生变化的部分 ， 从而提高性能 。
•Fine-grAIned Reactivity: SolidJS 提供了细粒度的响应式更新 ， 可以在组件级别、元素级别甚至属性级别进行更新 ， 避免不必要的重新渲染 。
•No Virtual DOM: 与其他框架不同，SolidJS 不使用虚拟 DOM，而是直接编译生成操作真实 DOM的函数，减少了 diff 算法的开销，提高了性能 。
•Hooks-based API: SolidJS 使用类似 React Hooks 的 API，使得组件逻辑更易于复用和组合
2、可以解决哪些问题
•直接在编译阶段生成原生Web Components，核心库非常小巧，没有额外的依赖，可以帮助减少项目的体积 。
•提供响应式状态管理、事件管理、生命周期等，解决原生开发的痛点 。
•类React语法，上手容易，降低开发者心智负担 ， 转换成Web Components十分流畅 。
四、从0到1搭建 Aura Design Web Components组件库
【Web Components实践：如何搭建一个框架无关的AI组件库】1、工程目录设计
该项目采用了 Monorepo 设计，旨在统一管理各个子项目，避免开发阶段频繁发布/安装 npm 包来同步代码 。具体内容包括：
•packages/eslint-config-aurai： 用于管理ESLint配置，集成了TypeScript和Prettier（用于JavaScript/TypeScript格式化） 。
•packages/stylelint-config-aurai： 用于管理StyleLint配置 ， 集成了stylelint-order（用于样式属性排序）和Prettier（用于样式格式化） 。


推荐阅读


上一篇：MySQL 核心模块揭秘

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