一、让人又爱又恨的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 执行时只需执行一个 createElement 语句，创建组件只需要 1-2 微秒即可完成。真正的逻辑不会立即执行，而是等到“核心任务”执行完毕后再执行，甚至可以在合适的时机再执行，从而降低 Diff 成本。





3、使用Web Components开发的痛点

虽然Web Components具有许多令人喜欢的优点，但在实际开发中也存在一些棘手的问题。以下是几个典型问题：

•原生开发难题：Web Components是一项原生技术，因此在组件编写过程中需要回归到原生开发。事件处理、状态管理等方面都需要自行处理。尽管大多数框架都提供了对Web Components的封装方案，但使用这些方案又需要引入相应框架的运行时，这导致脱离了框架无关性这一最大优势。

•Form表单问题：在Shadow DOM中，包含、或<select>等标签的value不会自动与表单关联，因此在表单提交时无法获取相应的value，需要手动处理，另外 <a href="https://www.helloworld.net/redirect?target=https://html.spec.whatwg.org/multipage/custom-elements.html#elementinternals" rel="nofollow noopener noreferrer" target="_blank">ElementInternals提案</a> 也在致力于解决这个问题。</p> <p>•样式隔离问题：虽然样式隔离有助于避免全局样式污染的问题，但在某些场景下，如主题颜色等，仍需要将样式同步到Web Components组件内部。目前可以通过CSS变量实现主题切换。此外，需要注意的是，slot插槽中的DOM元素样式并未得到隔离。</p> <p>针对这些问题，开发人员可能需要考虑采取一些额外的措施来解决挑战，以确保Web Components在实际应用中能够更加顺畅地运行。</p> <h2 id="二、目前主流的web-components组件方案">二、目前主流的Web Components组件方案</h2> <h3 id="1、头部案例">1、头部案例</h3> <p>Twitter</p> <p>Twitter 2016 年开始将自己的嵌入式推文从 iframe 切换成 ShadowDOM，减少了内存消耗、加快了渲染速度，并批量渲染的时候保持丝滑。<a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/tools/blog-entry?target=https://twittercommunity.com/t/upcoming-change-to-embedded-tweet-display-on-web/66215/1&source=article&objectId=2380289" rel="nofollow noopener noreferrer" target="_blank">Upcoming Change to Embedded Tweet Display on Web</a></p> <p>Youtube</p> <p>Youtube 作为 google 系的产品，很早就在全站用上了 Web Components，并且开源了自己播放器组件 <a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/tools/blog-entry?target=https://github.com/GoogleWebComponents/google-youtube&source=article&objectId=2380289" rel="nofollow noopener noreferrer" target="_blank">GitHub - GoogleWebComponents/google-youtube: YouTube video playback web component</a>此外 google 开源的 Web Components 还是很多的，<a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/tools/blog-entry?target=https://github.com/GoogleWebComponents&source=article&objectId=2380289" rel="nofollow noopener noreferrer" target="_blank">Google Web Components · GitHub</a> ，包括地图、drive、日历等等。</p> <p>Github</p> <p>Github 对 Web Components 的使用很早，具体可以看： <a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/tools/blog-entry?target=https://github.blog/2021-05-04-how-we-use-web-components-at-github/&source=article&objectId=2380289" rel="nofollow noopener noreferrer" target="_blank">How we use Web Components at GitHub | The GitHub Blog</a>，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相继实现之后，Github 开始大范围使。要知道 Github 2018 年才刚刚完全移除 jQuery：<a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/tools/blog-entry?target=https://github.blog/2018-09-06-removing-jquery-from-github-frontend/&source=article&objectId=2380289" rel="nofollow noopener noreferrer" target="_blank">Removing jQuery from GitHub.com frontend | The GitHub Blog</a> 这既得益于 Github 自身项目组件化的架构，也得益于 Web Components 本身与框架无关的特性非常识合作老项目升级。</p> <p>Adobe Spectrum</p> <p><a href="https://www.helloworld.net/redirect?target=https://opensource.adobe.com/spectrum-web-components/index.html" rel="nofollow noopener noreferrer" target="_blank">Adobe Spectrum</a> 是由 Adobe 创建的设计系统，该站点是一个基于 Web Components 的 UI 框架产品。</p> <h3 id="2、方案对比">2、方案对比</h3> <p>目前主流的 Web Components 组件方案有三种：</p> <p>方案一：</p> <p>•特点：以React和Vue为代表，通过将React或Vue组件包装为Web Components组件的方式实现。</p> <p>•优点：利用了本身框架的特性如生命周期、状态管理等，易于开发者使用。</p> <p>•缺点：需要引入本身框架的运行时，导致组件体积增加，同时丧失了框架无关性这一优势。</p> <p>方案二：</p> <p>•特点：以Stencil和LitElement为代表，提供了专门的编译器、工具链和语法糖来构建 Web Components。</p> <p>•优点：相比第一种方案，引入本身框架的运行时可能更小，减少了体积。</p> <p>•缺点：需要学习新的语法和工具，可能增加开发者的心智负担。</p> <p>方案三：</p> <p>特点：以Svelte和Solid为代表，直接将组件编译成原生 Web Components</p> <p><strong>优点：放弃了虚拟DOM，利用编译或转译能力直接生成操作DOM的更新函数，性能优秀，接近原生DOM。另外Vue3中的Vapor模式，正是借鉴了这种模式，目前正在试验阶段。</strong></p> <h2 id="三、与solidjs结合的化学反应">三、与SolidJS结合的“化学反应”</h2> <h3 id="1、solidjs有何不同">1、SolidJS有何不同</h3> <p>SolidJS 是一个快速、灵活、可扩展的 JavaScript 库，用于构建用户界面。与其他前端框架相比，SolidJS 有一些独特的特点和优势：</p> <p>•Reactivity System: SolidJS 使用基于数据变化的响应式系统，可以精确追踪状态的变化，并只更新发生变化的部分，从而提高性能。</p> <p>•Fine-grained Reactivity: SolidJS 提供了<strong>细粒度的响应式更新</strong>，可以在组件级别、元素级别甚至属性级别进行更新，避免不必要的重新渲染。</p> <p>•No Virtual DOM: 与其他框架不同，SolidJS <strong>不使用虚拟 DOM</strong>，而是直接编译生成操作真实 DOM的函数，减少了 diff 算法的开销，提高了性能。</p> <p>•Hooks-based API: SolidJS 使用类似 React Hooks 的 API，使得组件逻辑更易于复用和组合</p> <h3 id="2、可以解决哪些问题">2、可以解决哪些问题</h3> <p>•直接在编译阶段生成原生Web Components，核心库非常小巧，没有额外的依赖，可以帮助减少项目的体积。</p> <p>•提供响应式状态管理、事件管理、生命周期等，解决原生开发的痛点。</p> <p>•类React语法，上手容易，降低开发者心智负担，转换成Web Components十分流畅。</p> <h2 id="四、从0到1搭建-aura-design-web-components组件库">四、从0到1搭建 <a href="https://www.helloworld.net/redirect?target=https://aura-design.deno.dev/" rel="nofollow noopener noreferrer" target="_blank">Aura Design</a> Web Components组件库</h2> <h3 id="1、工程目录设计">1、工程目录设计</h3> <p>该项目采用了 Monorepo 设计，旨在<strong>统一管理各个子项目，避免开发阶段频繁发布/安装 npm 包</strong>来同步代码。具体内容包括：</p> <p>•packages/eslint-config-aurai： 用于管理ESLint配置，集成了TypeScript和Prettier（用于JavaScript/TypeScript格式化）。</p> <p>•packages/stylelint-config-aurai： 用于管理StyleLint配置，集成了stylelint-order（用于样式属性排序）和Prettier（用于样式格式化）。</p> <p>•packages/aura-design： 基于eslint-config-aurai和stylelint-config-aurai规范，使用Solid和Solid Element构建的Web Components元组件库，包括按钮、图标、卡片、布局等基础组件。</p> <p>•packages/aura-design-pro： 与aura-design类似，但封装了一些复杂组件，通常是依赖第三方库的组件，例如支持Markdown渲染的富文本组件、视频播放组件等。</p> <p>•apps/aura-design-docs： 基于Storybook的组件文档库，支持查看代码、组件预览，并可实时预览修改组件属性。</p> <p>•apps/react-starter、apps/vue-starter： 计划用于验证Web Components在React和Vue组件中的兼容性等问题。</p> <p></p> <p><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/4005c15b51516a2fc9beea88ec290301.png" alt="Web Components实践：如何搭建一个框架无关的AI组件库" /></p> <p> </p> <h3 id="2、部分细节展示">2、部分细节展示</h3> <h4 id="21、组件样式编写">2.1、组件样式编写</h4> <p>Web Components组件中的样式是内联到每一个组件的Shadow DOM中，因此不能用常规的CSS Modules等方案。本项目中使用了大约4种不同的内联样式方案，以对应不同的应用场景：</p> <p>•原子化CSS方案：UnoCSS致力于将所有样式属性细分为最小单元的CSS，以便实现最大程度的自由组合和复用。此外，UnoCSS还具有自动分析文件中使用的样式的功能，只将实际使用的样式打包，从而减小文件大小。</p> <p></p> <p><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/d218ee5e2625b827854160745be95437.png" alt="Web Components实践：如何搭建一个框架无关的AI组件库" /></p> <p> </p> <p>•CSS inline模式：利用Vite的功能，将外部样式作为内联模式引入，当需要自定义复杂样式或语义化场景时，可能会使用此模式。</p> <pre><code>import styles from './Button.css?inline';</code></pre><p>•CSS Template：CSS模板字符串类似于CSS-in-JS方案，通常用于根据prop变量动态控制样式。尽管这种方法会增加一定的运行时处理逻辑，但可以有效减少CSS重复和文件大小。</p> <pre><code>const styles = css` :host { display: inline-block; } .box { height: ${props.size + 2}px; line-height: ${props.size + 2}px; position: relative; overflow: hidden; } .nums-chip { transition: transform 1.5s; transform: translate(0, -50%); overflow: hidden; } .number { font-size: ${props.size}px; line-height: ${props.size + 2}px; } `;</code></pre><p>•CSS Link：使用link标签引入外部样式表，当组件样式比较多、体积较大时，如果直接内嵌到组件内部，当有N个组件时，体积就会增大N倍（暂不考虑浏览器内置优化逻辑），而使用link标签减少体积同时也可以利用上浏览器缓存的特性。</p> <pre><code>... return ( <> <link href={`https://cdn.bootcdn.net/ajax/libs/highlight.js/11.8.0/styles/atom-one-${props.theme}.min.css`} rel="stylesheet"></link> <style>{styles}</style> <div innerHTML={md.render(props.text)}></div> </> ); ...</code></pre><h4 id="22、svg图标集成">2.2、Svg图标集成</h4> <p>Icon组件引入和注册</p> <pre><code>import { defineCustomElements, registerIcon, Icon, } from '@aura-group/aura-design'; registerIcon('/iconfont.svg'); // 自定义svg图标注册，使用主项目根目录的svg图标文件，如果不注册则使用默认图标 defineCustomElements({ Icon }); // 注册Web Components图标组件</code></pre><p>组件使用</p> <pre><code><ar-icon name="download" size="20px" color="#4213de"></ar-icon></code></pre><h4 id="23、组件打包">2.3、组件打包</h4> <p>支持ES（按需加载）和UMD两种范式，自动生成Typescript声明文件：</p> <p>package.json</p> <pre><code>{ "name": "@aura-group/aura-design", "version": "0.3.9", "description": "", "main": "dist/aura-design.umd.js", "module": "dist/aura-design.es.js", "typings": "dist/types/components/index.d.ts", "files": [ "dist" ], "type": "module", ... }</code></pre><p>Vite相关配置</p> <pre><code>... build: { lib: { entry: 'src/components/index.ts', name: 'aura-design', fileName: (format) => `aura-design.${format}.js`, }, }, ...</code></pre><h3 id="3、基于storybook的组件文档">3、基于Storybook的组件文档</h3> <p>Storybook 是一个开源工具，用于开发和展示 React、Vue、Angular 等前端组件的交互式 UI 组件库。通过 Storybook，开发人员可以在一个独立的环境中编写、展示和测试组件，而不必依赖于整个应用程序。这样可以更快地开发和调试组件，同时也方便团队成员之间的协作。</p> <p>Storybook 提供了一个交互式的界面，开发人员可以在其中创建不同的“故事”（stories），每个故事对应一个组件的不同状态或交互方式。通过 Storybook，开发人员可以轻松地查看和测试组件在不同状态下的表现，从而更好地理解和调试组件的行为。</p> <p><a href="https://www.helloworld.net/redirect?target=https://aura-design.deno.dev/" rel="nofollow noopener noreferrer" target="_blank">Aura Design 组件库文档</a></p> <p></p> <p><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/89c3cde8f1660d88408bce845945a5d6.png" alt="Web Components实践：如何搭建一个框架无关的AI组件库" /></p> <p> </p> <h3 id="4、未来规划">4、未来规划</h3> <p>目前，我们的组件库中包含了16个基础组件和一些与AI Chat相关的组件。在 <a href="https://www.helloworld.net/redirect?target=https://a-m.love/" rel="nofollow noopener noreferrer" target="_blank">A-M</a> 网站中，95% 的组件都源自 <a href="https://www.helloworld.net/redirect?target=https://aura-design.deno.dev/" rel="nofollow noopener noreferrer" target="_blank">Aura Design</a> 组件库。未来，除了继续封装一些基础组件外，我们将优先开发常规组件库中缺失的比如AI应用的相关组件。随着组件库的逐步丰富和条件的成熟，我们会考虑将其开源。<strong>如果您有任何相关组件的封装需求或希望成为项目的成员，请随时与我联系。</strong></p> <h2 id="参考文献">参考文献</h2> <p>•<a href="https://www.helloworld.net/redirect?target=https://a-m.love/zh-cn/apps/chats" rel="nofollow noopener noreferrer" target="_blank">ChatGPT</a></p> <p>•<a href="https://www.helloworld.net/redirect?target=https://cloud.tencent.com/developer/article/2380289" rel="nofollow noopener noreferrer" target="_blank">Web Components从技术解析到生态应用个人心得指北</a></p> <p>•<a href="https://www.helloworld.net/redirect?target=https://www.51cto.com/article/702559.html" rel="nofollow noopener noreferrer" target="_blank">2022 Web Components 趋势解读和展望</a></p> <p>•<a href="https://www.helloworld.net/redirect?target=https://www.albertaz.com/blog/web-component-history-and-future" rel="nofollow noopener noreferrer" target="_blank">你不知道的 Web Components - 过去和未来</a></p> <p>•<a href="https://www.helloworld.net/redirect?target=https://juejin.cn/post/7029224164506468388" rel="nofollow noopener noreferrer" target="_blank">浅析Web components的痛点</a></p></div> </article> <div class="tags-box" data-v-1bdff09d><a href="/tag/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91.html" target="_blank" class="item" data-v-1bdff09d>软件开发</a><a href="/tag/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F.html" target="_blank" class="item" data-v-1bdff09d>程序人生</a></div> <div class="blog-btns-box" data-v-7d5edd21><div class="btn-item" data-v-7d5edd21><div class="circle zan" data-v-7d5edd21><IconFont type="icon-Dianzan" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>点赞</div></div> <div class="btn-item" data-v-7d5edd21><div class="circle favorite" data-v-7d5edd21><IconFont type="icon-Like1" class="iconfont" data-v-7d5edd21></IconFont></div> <div class="text" data-v-7d5edd21>收藏</div></div></div></div> <div id="recommend-lesson"><div class="recommend-lesson-title">推荐课程</div> <div class="horizontal" data-v-ba84c88a><a target="_blank" href="/lesson/detail/9574923462" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/86018b97b99b2ad0b0e8f43ccfd5c8c8.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a>Andriod第三方源码分析</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>35人学习</span></div></div></a><a target="_blank" href="/lesson/detail/6955961602" class="re-course-list" data-v-ba84c88a><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/2847450d82190c8a7d0ae4ba8a8e5629.png" alt="avatar" data-v-ba84c88a> <div class="re-info" data-v-ba84c88a><h2 data-v-ba84c88a>Android进阶之旅-(Framework源码分析)</h2> <div class="des" data-v-ba84c88a><div class="price" data-v-ba84c88a>免费</div> <span data-v-ba84c88a>26人学习</span></div></div></a></div></div> <div id="anchor" class="comment-container"><div id="comment-panel" class="comment-panel" data-v-25426b80><div class="panel-title" data-v-25426b80>评论区</div> <div class="comment-input-box" data-v-25426b80><img src="/_nuxt/img/default-avatar.38df358.png" alt class="user-avatar" data-v-25426b80> <!----></div> <!----></div></div> <div class="recommend-blog-list"><div class="recommend-title">推荐文章</div> <div class="art-list" data-v-6293c55f><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/0d250ec5492da88592013bbd302402ae.jfif" alt="helloworld_34035044" class="img" data-v-6293c55f> <a href="/34035044" target="_blank" class="name" data-v-6293c55f> helloworld_34035044 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/9382788506" target="_blank" title="皕杰报表之UUID" class="title single-ellipsis" data-v-6293c55f> 皕杰报表之UUID </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> ​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>891</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/4251373309" target="_blank" title="Python+Selenium自动化篇" class="title single-ellipsis" data-v-6293c55f> Python+Selenium自动化篇 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 本篇文字主要学习selenium定位页面元素的集中方法，以百度首页为例子。0.元素定位方法主要有：id定位：find\_element\_by\_id('')name定位：find\_element\_by\_name('')class定位：find\_element\_by\_class\_name('' </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>774</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/5577656212" target="_blank" title="FLV文件格式 " class="title single-ellipsis" data-v-6293c55f> FLV文件格式 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300（0x012C），那么在FLV文件中存放的顺序是：|0x01|0x2C|。如果是无符号32位数字300（0x0000012C），那么在FLV文件中的存放顺序是：|0x00|0x00|0x00|0x01|0x2C。2.   </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>987</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/6029686498" target="_blank" title="mysql设置时区 " class="title single-ellipsis" data-v-6293c55f> mysql设置时区 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1054</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/7613974470" target="_blank" title="RobotFramework自动化测试之元素定位 " class="title single-ellipsis" data-v-6293c55f> RobotFramework自动化测试之元素定位 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 前言：最近在做基于RF框架的Web自动化测试，其中涉及到元素的定位，主要用到id、name、xpath、css四中定位方法，尤其后面的两种方法特别有效，可以解决大部分的定位问题。 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>855</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/1bad3e5246214111b0d7a482fc5beec5.jfif" alt="Stella981" class="img" data-v-6293c55f> <a href="/Stella981" target="_blank" class="name" data-v-6293c55f> Stella981 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2690099717" target="_blank" title="CSS 分类 (Classification) " class="title single-ellipsis" data-v-6293c55f> CSS 分类 (Classification) </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> ★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。⑵下面是常用的属性以及描述：!(https://oscimg.oschina.net/oscnet/00cb565 </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>575</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/43634775400d410b3ba10e5f595ca12d.png" alt="可莉" class="img" data-v-6293c55f> <a href="/Lorraine12" target="_blank" class="name" data-v-6293c55f> 可莉 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/1700461974" target="_blank" title="10+个很酷的VueJS组件，模板和实验示例 " class="title single-ellipsis" data-v-6293c55f> 10+个很酷的VueJS组件，模板和实验示例 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 众所周知，Vue.js组件是Vue创建自定义元素的重要功能之一，同时，模板可帮助你避免从头开始创建网页设计。总之，这些工具对于希望其开发过程更快，更高效的任何Web开发人员都是必不可少的。此外，在过去的几年中，Vue.js变得非常流行，许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据绑定和MVC模型（模型、视图、控制器）， </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>529</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/46847d754406b0102dee7a1f54d14f92.jfif" alt="Wesley13" class="img" data-v-6293c55f> <a href="/Wesley13" target="_blank" class="name" data-v-6293c55f> Wesley13 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 2年前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2102334911" target="_blank" title="MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 " class="title single-ellipsis" data-v-6293c55f> MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> 背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_ </div></div> <!----></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>1245</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div><div class="blog-item" data-v-6293c55f><div class="blog-header" data-v-6293c55f><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/b9b9448bb7c5d337f5d44624f78b8976.png" alt="小万哥" class="img" data-v-6293c55f> <a href="/6389284992" target="_blank" class="name" data-v-6293c55f> 小万哥 </a> <div class="dot" data-v-6293c55f>•</div> <div class="time" data-v-6293c55f> 3个月前 </div></div> <div class="blog-content" data-v-6293c55f><div class="item-left" data-v-6293c55f><a href="/p/2740026496" target="_blank" title="DOM（文档对象模型）：理解网页结构与内容操作的关键技术" class="title single-ellipsis" data-v-6293c55f> DOM（文档对象模型）：理解网页结构与内容操作的关键技术 </a> <div class="intro multi-ellipsis-2" data-v-6293c55f> DOM（文档对象模型）定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档，而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的 </div></div> <img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/09d1e2e0f4adc20c0d7f6733cbc6aeb1.png" class="item-right" data-v-6293c55f></div> <!----> <div class="blog-footer flex" data-v-6293c55f><div class="iconfont footer-item icon-Show1" data-v-6293c55f><span class="num" data-v-6293c55f>117</span></div><div class="iconfont footer-item icon-Guanbi1-copy" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div><div class="iconfont footer-item icon-Pinglun1" data-v-6293c55f><span class="num" data-v-6293c55f>0</span></div></div></div> </div></div></div> <div class="blog-right-container"><div class="personal-info" data-v-af95cca0><div class="base-info" data-v-af95cca0><img src="https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/57aa87a531a5600fa75d19106bac89f6.jpg" alt="京东云开发者" class="avatar" data-v-af95cca0> <div class="info-content" data-v-af95cca0><div onc class="name-level" data-v-af95cca0><div class="name single-ellipsis" data-v-af95cca0> 京东云开发者 </div> <div class="level-icon level-1" data-v-429e45df data-v-af95cca0> Lv1 </div></div> <!----></div></div> <button type="button" class="follow-btn ant-btn ant-btn-primary ant-btn-background-ghost" data-v-af95cca0><span>关 注</span></button> <div class="signature" data-v-af95cca0>最懂产业的云</div> <div class="article-fans-stars" data-v-af95cca0><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>文章</div> <div class="value" data-v-af95cca0> 1.3k </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>粉丝</div> <div class="value" data-v-af95cca0> 46 </div></div><div class="item" data-v-af95cca0><div class="label" data-v-af95cca0>获赞</div> <div class="value" data-v-af95cca0> 480 </div></div></div> <div class="author-social-info" data-v-af95cca0><!----> <!----> <!----></div></div> <div class="sider-box" data-v-377f20d6><h5 class="common-title" data-v-377f20d6>热门文章</h5> <div class="content-box" data-v-377f20d6><div class="hot-article-list" data-v-5fa70b3e><div class="item" data-v-5fa70b3e><a href="/p/5578795498" title="KVC原理与数据筛选" class="abstract multi-ellipsis-2" data-v-5fa70b3e> KVC原理与数据筛选 </a></div><div class="item" data-v-5fa70b3e><a href="/p/7576416516" title="Function源码解析与实践" class="abstract multi-ellipsis-2" data-v-5fa70b3e> Function源码解析与实践 </a></div><div class="item" data-v-5fa70b3e><a href="/p/3323970888" title="观察者模式在spring中的应用" class="abstract multi-ellipsis-2" data-v-5fa70b3e> 观察者模式在spring中的应用 </a></div><div class="item" data-v-5fa70b3e><a href="/p/3146830974" title="单体分层应用架构剖析" class="abstract multi-ellipsis-2" data-v-5fa70b3e> 单体分层应用架构剖析 </a></div><div class="item" data-v-5fa70b3e><a href="/p/2811679206" title="责任链和策略设计模式-基于Java编程语言" class="abstract multi-ellipsis-2" data-v-5fa70b3e> 责任链和策略设计模式-基于Java编程语言 </a></div></div></div></div></div></div></div> <!----></div></div></div><script>window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x){return {layout:"default",data:[{}],fetch:{},error:e,state:{showSlideAuth:c,showLogin:c,fromIndex:c,urlConfig:{GET_BLOG_COLLECTION_LIST_URL:k,getAllTag:"\u002Ftag\u002FgetAllTag",CREATE_BLOG_URL:"\u002Fmanage\u002FcreateBlog",PUBLISH_BLOG_URL:"\u002Fmanage\u002FpublishBlog",UPDATE_BLOG_DETAIL:"\u002Fmanage\u002FupdateBlog",GET_BLOG_DETAIL:"\u002Fblog\u002FgetBlogDetail",GET_BLOG_NEWEST_DRAFT:l,UPDATE_CHAPTER_URL:m,GET_CHAPTER_NEWEST_DRAFT:n,PUBLISH_CHAPTER:m,CREATE_BLOG_CATE:"\u002Fcollection\u002Fadd",RENAME_COLLECTION:"\u002Fcollection\u002FrenameCollection",DELETE_COLLECTION:"\u002Fcollection\u002FdeleteCollection",GET_MY_BLOG_LIST_URL:"\u002Fadmin\u002FblogList",FOLLOW_AUTHOR:"\u002Fuser\u002Ffollow",UNFOLLOW_AUTHOR:"\u002Fuser\u002Funfollow",GET_RECOMMEND_BLOG:"\u002Fhome\u002FgetHomeBlogByAction",GET_RECOMMEND_BLOG_BY_CATE:"\u002Fhome\u002FgetHomeBlogListByTag",GET_RECOMMEND_BLOG_BY_TAG:"\u002Fhome\u002FgetBlogListByTag",GET_TAG_LIST:"\u002Fuser\u002FhotWords",GET_CATE_LIST:"\u002Ftag\u002FgetHomeTag",GET_RECOMMEND_AUTHOR:"\u002Fhome\u002FgetRecommendAuthorList",GET_DAILY_ALGORITHM:"\u002Fhome\u002Fdailyalgorithm",LOG_IN:"\u002Faccess\u002Flogin",LOG_OUT:"\u002Faccess\u002FsignOut",CHECK_USER_INFO:"\u002Faccess\u002FcheckUserInfo",REGISTER:"\u002Faccess\u002Fregister",CHANGE_PWD:"\u002Faccess\u002FchangePassword",SEND_CODE:"\u002Faccess\u002FsendCode",ACTION_AUTH:"\u002Faccess\u002FactionAuth",ACTION_AUTH2:"\u002Faccess\u002FactionAuth2",CHECK_USER_AND_BLOG:"\u002Faccess\u002FcheckUserAndBlog",CHECK_TOKEN:"\u002Faccess\u002FcheckToken",SIGN_IN:"\u002Faccess\u002FsignIn",GET_PERSONAL_INFO:"\u002Fuser\u002Fdetail\u002Finfo",GET_PERSONAL_BLOG_LIST:"\u002Fuser\u002Fdetail\u002Fbloglist",FILE_UPLOAD:"\u002Ffile\u002Fupload",DL_AND_UPLOAD:"\u002Ffile\u002FdownloadAndUploadOss",GET_MY_FOLLOW_USER_LIST:"\u002Fadmin\u002FgetMyFollowUserList",GET_MY_FANS_USER_LIST:"\u002Fadmin\u002FgetMyFansUserList",GET_MY_FOLLOW_QUESTION_LIST:"\u002Fadmin\u002FgetMyFollowQuestion",GET_MY_SUBSCIBE_SPECIAL_LIST:"\u002Fadmin\u002FgetMySubscribeSpecialList",TAKE_OFF_BLOG:"\u002Fadmin\u002FtakeOffBlog",TAKE_ON_BLOG:"\u002Fadmin\u002FtakeOnBlog",GET_HOME_RECOMMEND_SPECIAL_LIST:"\u002Fhome\u002FgetRecommendSpecialList",GET_MOST_SPECIAL_COUNT_USER_LIST:"\u002Fspecial\u002FgetSpecialMostUserList",GET_SPECIAL_CATE_LIST_URL:"\u002Fspecial\u002FgetSpecialCateList",GET_SPECIAL_LIST_URL:"\u002Fspecial\u002FgetSpecialList",GET_SPECIAL_LIST_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialListPerCategory",GET_CATEGORY_INFO_BY_ID_URL:"\u002Fhome\u002FgetCategoryInfoById",GET_SPECIAL_COUNT_PER_CATEGORY_URL:"\u002Fspecial\u002FgetSpecialTotalCountPerCategory",GET_SPECIAL_BANNER:"\u002Fspecial\u002FgetBannerList",GET_SPECIAL_DETAIL_CHAPTER_LIST:"\u002Fspecial\u002FgetSpecialSectionList",GET_SPECIAL_DETAIL:"\u002Fspecial\u002FgetMySpecialChapterInfo",GetChapterInfo:"\u002Fspecial\u002FgetSectionDetail",GET_SPECIAL_DETAIL_INFO:"\u002Fadmin\u002FgetSpecialDetail",ADD_CHAPTER_URL:"\u002Fadmin\u002FaddChapter",UPDATE_CHAPTER_INFO:"\u002Fadmin\u002FupdateChapterInfo",UPDATE_CHAPTER_SEQUENCE:"\u002Fadmin\u002FupdateChapterSequence",DELETE_CHAPTER_URL:"\u002Fadmin\u002FdeleteChapter",TAKE_ON_SPECIAL:"\u002Fspecial\u002FpublishSection",TAKE_OFF_SPECIAL:"\u002Fadmin\u002FtakeOffSpecial",RENAME_SPECIAL:"\u002Fadmin\u002FrenameSpecial",GET_SPECIAL_CATE_LIST:"\u002Fadmin\u002FgetSpecialCateList",UPDATE_SPECIAL_INTRO:"\u002Fadmin\u002FupdateSpecialIntro",UPDATE_SPECIAL_INFO:"\u002Fadmin\u002FupdateSpecialCateId",UPDATE_SPECIAL_TITLE:"\u002Fadmin\u002FupdateSpecialTitle",DELETE_SPECIAL:"\u002Fadmin\u002FdeleteSpecial",GET_CHAPTER_COMMENT:"\u002Fcomment\u002FgetChapterCommentList",UPDATE_SPECIALINFO:"\u002Fadmin\u002FupdateSpecialBaseInfo",SUBSCRIBE_SPECIAL:o,UN_SUBSCRIBE_SPECIAL:p,MODIFY_SPECIAL:q,GET_TUTORIAL_BIG_CATEGORY:"\u002Ftutorial\u002FgetTutorialBigCategories",GET_ALL_TUTORIALS:r,GET_CHAPTER_AND_SECTION_BY_PATH:"\u002Ftutorial\u002FgetChapterAndSectionByPath",GET_CONTENT_BY_SECTION_PATH:"\u002Ftutorial\u002FgetSectionContent",GET_TUTORIAL_OVERVIEW:s,GET_UID_BY_PROFILE_PATH:"\u002Fuser\u002FgetUidByProfilePath",GET_USER_DETAIL_USER_INFO:"\u002Fuser\u002Fdetail\u002FuserInfo",GET_SPECIAL_CATEGORY:"\u002Fuser\u002Fdetail\u002FspecialCategory",CREATE_SPECIAL_URL:"\u002Fspecial\u002FcreateSpecial",GET_MY_SPECIAL_LIST_URL:"\u002Fadmin\u002FgetMySpecialList",GET_CHAPTER_LIST_PER_SPECIAL_URL:"\u002Fadmin\u002FgetSpecialChapterList",GET_USER_RELATED_QUESTION_LIST:"\u002Fuser\u002Fdetail\u002FgetUserRelatedQuestionList",Get_BLOG_COLLECT_LIST:"\u002Fuser\u002Fdetail\u002FgetUserBlogCollectList",GET_BLOG_LIST_URL:"\u002Fuc\u002FgetUserBlogList",GET_BLOG_LIST_BY_COLLECT_ID:"\u002Fuser\u002Fdetail\u002FgetCollectBlogList",GET_SPECIAL_LIST_BY_SORT_TYPE:"\u002Fuc\u002FgetUserPublishedSpecialList",GET_USER_BASE_INFO:"\u002Fuc\u002FgetUserInfo",GET_NEWEST_BLOG_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestBlogList",GET_NEWEST_COMMENT_LIST:"\u002Fuser\u002Fdetail\u002FgetNewestCommentList",GET_FAVORITE_BLOG_LIST:"\u002Fuc\u002FgetUserFavoriteBlogList",GET_FOLLOW_USER_LIST:"\u002Fuc\u002FgetFollowList",GET_FOLLOW_USER_FANS:"\u002Fuc\u002FgetFanList",GET_HOT_COMMENTS:"\u002Fuc\u002FgetHotComments",IS_USER_BLOG:"\u002Fuc\u002FisUserBlog",GET_SEARCH_WORD:"\u002Fsearch\u002FsearchWord",GET_QUESTION_COMMON_TAG:"\u002Fquestion\u002FgetHotTagList",GET_QUESTION_LIST:"\u002Fquestion\u002FgetQuestionList",GET_QUESTION_DETAIL:"\u002Fquestion\u002FgetQuestionDetail",UPDATE_QUESTION_INFO:"\u002Fquestion\u002FupdateQuestion",GET_QUESTION_BASE_INFO:"\u002Fquestion\u002FgetQuestionBaseInfo",GET_BLOG_COMMENT_LIST:"\u002Fcomment\u002FgetBlogCommentList",ADD_COMMENT:"\u002Fcomment\u002FaddComment",ADD_REPLY:"\u002Fcomment\u002FaddReply",LIKE_BLOG:"\u002Fblog\u002FzanBlog",FAVORITE_BLOG:"\u002Fblog\u002FfavoriteBlog",GET_USER_LIKE_FAVORITE_INFO:"\u002Fadmin\u002FgetUserAndBlogActionInfo",DAMIT_CHANGE_PWD:"\u002Fadmin\u002FchangePassword",UPDATE_PERSONAL:"\u002Fadmin\u002FmodifyPersonalInfo",SUBMIT_SUGGESTION:"\u002Fsuggestion\u002FsubmitSuggestion",GETALLBLOGID:"\u002Faccess\u002FgetAllBlogId",GETCONTENTBYID:"\u002Faccess\u002FgetContentById",UPDATEHTMLBYID:"\u002Faccess\u002FupdateHtmlById",CHANGE_USER_PWD:t,SEND_USER_SMS:"\u002Faccess\u002FsendSmsCode",GET_WIN_USERS:"\u002Fwin\u002FgetWinUsers",GET_FRIEND_LINKS:"\u002Fhome\u002FgetFriendLinks",GET_SITE_MAP:"\u002Fspider\u002FgetSiteMap",GET_BLOG_BY_TAG_NAME:"\u002Fblog\u002FgetBlogByTagName",GET_BLOG_BY_TAG_ID:"\u002Fsearch\u002FsearchTag",GET_RANDOM_TAGS:"\u002Fblog\u002FgetRandomTags",GET_UPLOAD_SIGNATURE:"\u002Fvod\u002FgetUploadSignature",UPLOAD_MEDIA_INFO:"\u002Fvod\u002FuploadMediaInfo",GET_BLOG_INFO:"\u002Fadmin\u002FgetBlogInfo",GET_HOME_RECOMMEND_TAGS:"\u002Ftag\u002FgetHomeRecommendTags",GET_USER_HOT_BLOG_LIST:"\u002Fuc\u002FgetUserHotBlogList",COMMENT_BLOG:"\u002Fcomment\u002Fcomment",GET_COMMENT_LIST:"\u002Fcomment\u002FgetCommentList",REPLY_COMMENT:"\u002Fcomment\u002FreplyComment",GET_COMMENT_REPLIES:"\u002Fcomment\u002FgetCommentReplies",GET_BACK_IMAGE_LIST:"\u002Fuc\u002FgetBackImageList",UPDATE_BACK_IMAGE:"\u002Fuc\u002FupdateBackImage",GET_MY_SPECIAL_LIST:"\u002Fmanage\u002FgetMySpecialList",GET_SUBCRIBED_SPECLIAL_LIST:"\u002Fmanage\u002FgetMySubscribedSpecialList",GET_MY_SPECIAL_DETAIL:"\u002Fmanage\u002FgetMySpecialDetail",SUBCRIBE_SPECLIAL:o,UNSUBCRIBED_SPECLIAL:p,CREATE_COLLECTION:"\u002Fmanage\u002FcreateCollection",GET_COLLECTION_LIST:k,UPDATE_COLLECTION:"\u002Fmanage\u002FupdateCollection",REMOVE_COLLECTION:"\u002Fmanage\u002FremoveCollection",GET_MY_BLOG_LIST:"\u002Fmanage\u002FgetMyBlogList",GET_FOLLOW_LIST:"\u002Fmanage\u002FgetFollowList",UPDATE_FOLLOW:"\u002Fmanage\u002FupdateFollow",GET_MY_INFO:"\u002Fmanage\u002FgetMyInfo",UPDATE_MY_INFO:"\u002Fmanage\u002FupdateMyInfo",GET_MY_FAVORITE_BLOG_LIST:"\u002Fmanage\u002FgetMyFavoriteBlogList",GET_MY_FAVORITE_LESSON_LIST:"\u002Flesson\u002FfavoriteList",UPDATE_FAVORITE_LESSON:"\u002Flesson\u002Ffavorite",UPDATE_CANCEL_FAVORITE_LESSON:"\u002Flesson\u002FremoveFavorite",GET_RECOMMEND_LESSON_BY_BLOG:"\u002Flesson\u002FrecommendLesson",MODIFY_PASSWORD:t,GET_MY_BLOG_DETAIL:l,GET_MY_BLOG_DETAIL_FOR_ADMIN_PREVIEW:"\u002Fmanage\u002FgetMyBlogDetailForAdminPreview",GET_NEW_NOTIFICATION_COUNT:"\u002Fmanage\u002FgetNewNotificationCount",GET_NOTIFICATION_LIST:"\u002Fmanage\u002FgetNotificationList",READ_NOTIFICATION:"\u002Fmanage\u002FreadNotification",CREATE_SECTION:"\u002Fspecial\u002FcreateSection",MODIFIY_SECTION_TITLE:"\u002Fspecial\u002FmodifySectionTitle",MODIFIY_SPECIAL_TITLE:q,MODIFIY_SECTION_STATUS:"\u002Fspecial\u002FmodifySectionStatus",PUBLISH_SPECIAL:"\u002Fspecial\u002FpublishSpecial",OFFLINE_SPECIAL:"\u002Fspecial\u002FofflineSpecial",UNPUBLISHED_SPECIAL_DETAIL:"manage\u002FgetMySpecialDetail",UNPUBLISHED_SPECIAL_CHAPTER_DETAIL:n,UPDATE_BLOG_TITLE:"\u002Fmanage\u002FupdateTitle",UPDATE_BLOG_STATUS_PUBLISHED:"\u002Fmanage\u002FupdateBlogStatusPublished",DELETE_BLOG:"\u002Fmanage\u002FdeleteBlog",GET_CATELIST_TUTORIAL:"\u002Ftutorial\u002FgetCateList",GET_TUTORIAL_LIST:r,GET_TUTORIAL_DETAIL:s,GET_CHAPTER_INFO:"\u002Ftutorial\u002FgetChapterInfo",FAVORITE_SECTION:"\u002Fmanage\u002FfavoriteSection",ZAN_SECTION:"\u002Fmanage\u002FzanSection",LESSON_LIST_ALL:"\u002Flesson\u002Flist\u002Fall",LESSON_LIST_MY:"\u002Flesson\u002Flist\u002Fmy",LESSON_LIST_BUY:"\u002Flesson\u002Flist\u002Fbuy",LESSON_LIST_REC:"\u002Flesson\u002Flist\u002Frec",LESSON_CREATE:"\u002Flesson\u002Fcreate",LESSON_DETAIL_EDIT:"\u002Flesson\u002Fdetail\u002Fedit",LESSON_DETAIL:"\u002Flesson\u002Fdetail",LESSON_DELETE:"\u002Flesson\u002Fdelete",LESSON_CATEGORIES:"\u002Flesson\u002Fcategories",LESSON_DIRECTIONS:"\u002Flesson\u002Fdirections",LESSON_STORE:"\u002Flesson\u002Fstore",LESSON_CREATE_CHAPTER:"\u002Flesson\u002Fchapter",LESSON_CHAPTER_VIDEO:"\u002Flesson\u002Fchapter\u002Fvideo",LESSON_CHAPTERS:"\u002Flesson\u002Fchapters",LESSON_CHAPTERS_EDIT:"\u002Flesson\u002Fchapters\u002Fedit",LESSON_VIDEO_ENCRYPT:"\u002Flesson\u002Fvideo\u002Fencrypt",LESSON_VIDEO:"\u002Flesson\u002Fvideo",LESSON_VIDEO_M3U8:"\u002Flesson\u002Fvideo\u002Fm3u8",LESSON_COS_TOKEN:"\u002Flesson\u002Fcos\u002Ftoken",LESSON_NOTE:"\u002Flesson\u002Fnote",LESSON_RESOURCE:"\u002Flesson\u002Fresource",LESSON_LEARN_REPORT:"\u002Flesson\u002Flearn\u002Freport",ADD_STUDY_COUNT:"\u002Flesson\u002FaddStudyCount",WXPAY_NATIVE_PAY:"\u002Fwxpay\u002FnativePay",WXPAY_QUERY_ORDER_STATUS:"\u002Fwxpay\u002FqueryOrderStatus",WXPAY_ORDER:"\u002Fwxpay\u002Forder",WXPAY_ORDERS:"\u002Fwxpay\u002Forders",WXPAY_CANCELORDER:"\u002Fwxpay\u002FcancelOrder"},isLoading:c,authPhone:b,friendLink:[],showSpecial:c,specialData:e,navFixedVisible:c,deviceId:859356716448145000,blackList:[],access:{token:b,userInfo:{}},admin:{collectionList:[],specialList:[],notifyCount:{},curTab:"blog",blogDetail:{}},backstage:{blogList:{},typeCount:{collectCount:a,commentCount:a,count:a,followCount:a,subscribeCount:a,zanCount:a},isShow:c},course:{isCollapase:u},personal:{errorMsg:b,handling:c,visible:c,success:c,isSmsCoding:c,sendCodeSuccess:c,uid:e,userDetailInfo:{},personalBlogList:[],blogCount:a,personalSpecialList:[],specialCount:a,newestBlog:[],newestComment:[],personalFavoriteList:[],favoriteCount:a,personalFollowList:[],followCount:a,personalFansList:[],fansCount:a,hotComment:[],routeParams:{profile:b,pageType:b}},question:{commonTags:[],questionList:[],questionDetail:{}},recommend:{recommendBlog:{data:[]},tagList:[],categoryList:{data:[]},recommendAuthorList:{data:[]},todayAlgorithm:b,blogDetail:{blogInfo:{uuid:"6313912932",title:"Web Components实践：如何搭建一个框架无关的AI组件库",intro:"一、让人又爱又恨的WebComponentsWebComponents是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素，这些元素可以在不同的Web应用程序中重复使用，并且具有自己的样式、行为和功能。WebComponents并非",content:"## 一、让人又爱又恨的Web Components\n\nWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素，这些元素可以在不同的Web应用程序中重复使用，并且具有自己的样式、行为和功能。\n\nWeb Components并非一项新技术，而是一组持续演进的、由W3C标准化的组件化API。最早可以追溯到2011年左右，大约在2016年左右各个浏览器才实现了Custom Element V1版本。然而，在同一时期，诸如Vue和React等组件化框架已经开始主导前端开发生态。\n\n尽管近几年Web Components标准和技术都趋于成熟，但早期面临的兼容性问题以及后来Vue和React等MVVM框架的崛起，导致Web Components领域一直处于低调状态。接下来，我们将从Web Components的发展历程、优势以及开发中面临的挑战三个方面更深入地了解Web Components。\n\n### 1、Web Components发展历程\n\n•2011年：Google发布了Chrome浏览器，并提出了“Shadow DOM”概念，这是Web Components的一个重要组成部分。\n\n•2013年：谷歌工程师Alex Komoroske在Google I\u002FO大会上首次提出了Web Components的概念，并推动了相关标准的制定。\n\n•2014年：W3C发布了Web Components的规范草案，其中包括四个主要技术：Custom Elements、Shadow DOM、HTML Templates和HTML Imports。\n\n•2015年：Web Components的规范逐渐得到浏览器厂商的支持，Chrome、Firefox、Safari等主流浏览器开始逐步实现相关功能。\n\n•2018年：Web Components逐渐成为前端开发的主流技术之一，越来越多的开发者开始使用Web Components来构建可重用的组件。\n\n•至今：Web Components技术不断发展和完善，越来越多的框架和库开始支持Web Components，使其在前端开发中发挥更大的作用。\n\n### 2、Web Components有哪些优势\n\n•**封装性：** Web Components 具有良好的封装性，可以将页面中的功能和样式封装在一个自定义元素内部，避免全局作用域的污染，提高了代码的可维护性和可重用性。\n\n•**跨框架兼容**：Web Components 是基于 Web 标准的技术，可以在任何支持 Custom Elements 和 Shadow DOM 的现代浏览器中使用，与各种前端框架和库兼容性良好。\n\n•**标准化**：Web Components 的规范由 W3C 组织制定，具有较高的标准化程度，有利于统一前端开发的规范和实践，提高了代码的可维护性和可移植性。\n\n•**性能优势**：通过使用 Shadow DOM 技术，Web Components 可以实现更好的性能优化，避免不必要的重绘和重排，提高页面的渲染效率和用户体验。\n\n目前，前端开发中有许多流行的框架可供选择，如React、Vue、Angular、Solid、Svelte、Preact等。框架的选择是一个复杂的决策过程。当框架版本升级时，项目可能需要面临重构的问题。例如，从Vue2升级到Vue3可能需要付出较大的改造成本。如果不进行升级，就无法使用最新特性，甚至可能面临框架旧版本不再维护的尴尬局面。在这种情况下，Web Components 的**框架无关性**可以在一定程度上改善这种局面。\n\n就性能而言，以将 React 组件转换为 Web Components 为例，可以优化执行过程，减少阻塞，提高页面性能。在普通的 React 组件中，初次执行时需要一次性完成所有必须的节点逻辑，这些逻辑的执行会同步占用在 JavaScript 的主线程上。当页面变得足够复杂时，一些非核心逻辑可能会阻塞后面核心逻辑的执行。而通过使用 Web Components 优化 React 组件，执行过程会变得更简洁。例如，注册一个复杂的逻辑组件时，在 React 执行时只需执行一个 createElement 语句，创建组件只需要 1-2 微秒即可完成。真正的逻辑不会立即执行，而是等到“核心任务”执行完毕后再执行，甚至可以在合适的时机再执行，从而**降低 Diff 成本**。\n\n\n\n\n\n \n\n\n### 3、使用Web Components开发的痛点\n\n虽然Web Components具有许多令人喜欢的优点，但在实际开发中也存在一些棘手的问题。以下是几个典型问题：\n\n•原生开发难题：Web Components是一项原生技术，因此在组件编写过程中需要回归到原生开发。事件处理、状态管理等方面都需要自行处理。尽管大多数框架都提供了对Web Components的封装方案，但使用这些方案又需要引入相应框架的运行时，这导致脱离了框架无关性这一最大优势。\n\n•Form表单问题：在Shadow DOM中，包含\u003Cinput\u003E、\u003Ctextarea\u003E或\u003Cselect\u003E等标签的value不会自动与表单关联，因此在表单提交时无法获取相应的value，需要手动处理，另外 [ElementInternals提案](https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fcustom-elements.html#elementinternals) 也在致力于解决这个问题。\n\n•样式隔离问题：虽然样式隔离有助于避免全局样式污染的问题，但在某些场景下，如主题颜色等，仍需要将样式同步到Web Components组件内部。目前可以通过CSS变量实现主题切换。此外，需要注意的是，slot插槽中的DOM元素样式并未得到隔离。\n\n针对这些问题，开发人员可能需要考虑采取一些额外的措施来解决挑战，以确保Web Components在实际应用中能够更加顺畅地运行。\n\n## 二、目前主流的Web Components组件方案\n\n### 1、头部案例\n\nTwitter\n\nTwitter 2016 年开始将自己的嵌入式推文从 iframe 切换成 ShadowDOM，减少了内存消耗、加快了渲染速度，并批量渲染的时候保持丝滑。[Upcoming Change to Embedded Tweet Display on Web](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Ftwittercommunity.com%2Ft%2Fupcoming-change-to-embedded-tweet-display-on-web%2F66215%2F1&source=article&objectId=2380289)\n\nYoutube\n\nYoutube 作为 google 系的产品，很早就在全站用上了 Web Components，并且开源了自己播放器组件 [GitHub - GoogleWebComponents\u002Fgoogle-youtube: YouTube video playback web component](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.com%2FGoogleWebComponents%2Fgoogle-youtube&source=article&objectId=2380289)此外 google 开源的 Web Components 还是很多的，[Google Web Components · GitHub](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.com%2FGoogleWebComponents&source=article&objectId=2380289) ，包括地图、drive、日历等等。\n\nGithub\n\nGithub 对 Web Components 的使用很早，具体可以看： [How we use Web Components at GitHub | The GitHub Blog](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.blog%2F2021-05-04-how-we-use-web-components-at-github%2F&source=article&objectId=2380289)，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相继实现之后，Github 开始大范围使。要知道 Github 2018 年才刚刚完全移除 jQuery：[Removing jQuery from GitHub.com frontend | The GitHub Blog](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.blog%2F2018-09-06-removing-jquery-from-github-frontend%2F&source=article&objectId=2380289) 这既得益于 Github 自身项目组件化的架构，也得益于 Web Components 本身与框架无关的特性非常识合作老项目升级。\n\nAdobe Spectrum\n\n[Adobe Spectrum](https:\u002F\u002Fopensource.adobe.com\u002Fspectrum-web-components\u002Findex.html) 是由 Adobe 创建的设计系统，该站点是一个基于 Web Components 的 UI 框架产品。\n\n### 2、方案对比\n\n目前主流的 Web Components 组件方案有三种：\n\n方案一：\n\n•特点：以React和Vue为代表，通过将React或Vue组件包装为Web Components组件的方式实现。\n\n•优点：利用了本身框架的特性如生命周期、状态管理等，易于开发者使用。\n\n•缺点：需要引入本身框架的运行时，导致组件体积增加，同时丧失了框架无关性这一优势。\n\n方案二：\n\n•特点：以Stencil和LitElement为代表，提供了专门的编译器、工具链和语法糖来构建 Web Components。\n\n•优点：相比第一种方案，引入本身框架的运行时可能更小，减少了体积。\n\n•缺点：需要学习新的语法和工具，可能增加开发者的心智负担。\n\n方案三：\n\n特点：以Svelte和Solid为代表，直接将组件编译成原生 Web Components\n\n**优点：放弃了虚拟DOM，利用编译或转译能力直接生成操作DOM的更新函数，性能优秀，接近原生DOM。另外Vue3中的Vapor模式，正是借鉴了这种模式，目前正在试验阶段。**\n\n## 三、与SolidJS结合的“化学反应”\n\n### 1、SolidJS有何不同\n\nSolidJS 是一个快速、灵活、可扩展的 JavaScript 库，用于构建用户界面。与其他前端框架相比，SolidJS 有一些独特的特点和优势：\n\n•Reactivity System: SolidJS 使用基于数据变化的响应式系统，可以精确追踪状态的变化，并只更新发生变化的部分，从而提高性能。\n\n•Fine-grained Reactivity: SolidJS 提供了**细粒度的响应式更新**，可以在组件级别、元素级别甚至属性级别进行更新，避免不必要的重新渲染。\n\n•No Virtual DOM: 与其他框架不同，SolidJS **不使用虚拟 DOM**，而是直接编译生成操作真实 DOM的函数，减少了 diff 算法的开销，提高了性能。\n\n•Hooks-based API: SolidJS 使用类似 React Hooks 的 API，使得组件逻辑更易于复用和组合\n\n### 2、可以解决哪些问题\n\n•直接在编译阶段生成原生Web Components，核心库非常小巧，没有额外的依赖，可以帮助减少项目的体积。\n\n•提供响应式状态管理、事件管理、生命周期等，解决原生开发的痛点。\n\n•类React语法，上手容易，降低开发者心智负担，转换成Web Components十分流畅。\n\n## 四、从0到1搭建 [Aura Design](https:\u002F\u002Faura-design.deno.dev\u002F) Web Components组件库\n\n### 1、工程目录设计\n\n该项目采用了 Monorepo 设计，旨在**统一管理各个子项目，避免开发阶段频繁发布\u002F安装 npm 包**来同步代码。具体内容包括：\n\n•packages\u002Feslint-config-aurai： 用于管理ESLint配置，集成了TypeScript和Prettier（用于JavaScript\u002FTypeScript格式化）。\n\n•packages\u002Fstylelint-config-aurai： 用于管理StyleLint配置，集成了stylelint-order（用于样式属性排序）和Prettier（用于样式格式化）。\n\n•packages\u002Faura-design： 基于eslint-config-aurai和stylelint-config-aurai规范，使用Solid和Solid Element构建的Web Components元组件库，包括按钮、图标、卡片、布局等基础组件。\n\n•packages\u002Faura-design-pro： 与aura-design类似，但封装了一些复杂组件，通常是依赖第三方库的组件，例如支持Markdown渲染的富文本组件、视频播放组件等。\n\n•apps\u002Faura-design-docs： 基于Storybook的组件文档库，支持查看代码、组件预览，并可实时预览修改组件属性。\n\n•apps\u002Freact-starter、apps\u002Fvue-starter： 计划用于验证Web Components在React和Vue组件中的兼容性等问题。\n\n\n\n\n\n \n\n\n### 2、部分细节展示\n\n#### 2.1、组件样式编写\n\nWeb Components组件中的样式是内联到每一个组件的Shadow DOM中，因此不能用常规的CSS Modules等方案。本项目中使用了大约4种不同的内联样式方案，以对应不同的应用场景：\n\n•原子化CSS方案：UnoCSS致力于将所有样式属性细分为最小单元的CSS，以便实现最大程度的自由组合和复用。此外，UnoCSS还具有自动分析文件中使用的样式的功能，只将实际使用的样式打包，从而减小文件大小。\n\n\n\n\n\n \n\n\n•CSS inline模式：利用Vite的功能，将外部样式作为内联模式引入，当需要自定义复杂样式或语义化场景时，可能会使用此模式。\n\n```\nimport styles from '.\u002FButton.css?inline';\n```\n\n•CSS Template：CSS模板字符串类似于CSS-in-JS方案，通常用于根据prop变量动态控制样式。尽管这种方法会增加一定的运行时处理逻辑，但可以有效减少CSS重复和文件大小。\n\n```\nconst styles = css`\n :host {\n display: inline-block;\n }\n .box {\n height: ${props.size + 2}px;\n line-height: ${props.size + 2}px;\n position: relative;\n overflow: hidden;\n }\n .nums-chip {\n transition: transform 1.5s;\n transform: translate(0, -50%);\n overflow: hidden;\n }\n .number {\n font-size: ${props.size}px;\n line-height: ${props.size + 2}px;\n }\n`;\n```\n\n•CSS Link：使用link标签引入外部样式表，当组件样式比较多、体积较大时，如果直接内嵌到组件内部，当有N个组件时，体积就会增大N倍（暂不考虑浏览器内置优化逻辑），而使用link标签减少体积同时也可以利用上浏览器缓存的特性。\n\n```\n...\nreturn (\n \u003C\u003E\n \u003Clink href={`https:\u002F\u002Fcdn.bootcdn.net\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.8.0\u002Fstyles\u002Fatom-one-${props.theme}.min.css`} rel=\"stylesheet\"\u003E\u003C\u002Flink\u003E\n \u003Cstyle\u003E{styles}\u003C\u002Fstyle\u003E\n \u003Cdiv innerHTML={md.render(props.text)}\u003E\u003C\u002Fdiv\u003E\n \u003C\u002F\u003E\n );\n...\n```\n\n#### 2.2、Svg图标集成\n\nIcon组件引入和注册\n\n```\nimport {\n defineCustomElements,\n registerIcon,\n Icon,\n} from '@aura-group\u002Faura-design';\nregisterIcon('\u002Ficonfont.svg'); \u002F\u002F 自定义svg图标注册，使用主项目根目录的svg图标文件，如果不注册则使用默认图标\ndefineCustomElements({ Icon }); \u002F\u002F 注册Web Components图标组件\n```\n\n组件使用\n\n```\n\u003Car-icon name=\"download\" size=\"20px\" color=\"#4213de\"\u003E\u003C\u002Far-icon\u003E\n```\n\n#### 2.3、组件打包\n\n支持ES（按需加载）和UMD两种范式，自动生成Typescript声明文件：\n\npackage.json\n\n```\n{\n \"name\": \"@aura-group\u002Faura-design\",\n \"version\": \"0.3.9\",\n \"description\": \"\",\n \"main\": \"dist\u002Faura-design.umd.js\",\n \"module\": \"dist\u002Faura-design.es.js\",\n \"typings\": \"dist\u002Ftypes\u002Fcomponents\u002Findex.d.ts\",\n \"files\": [\n \"dist\"\n ],\n \"type\": \"module\",\n...\n}\n```\n\nVite相关配置\n\n```\n...\nbuild: { \n lib: {\n entry: 'src\u002Fcomponents\u002Findex.ts',\n name: 'aura-design',\n fileName: (format) =\u003E `aura-design.${format}.js`,\n },\n},\n...\n```\n\n### 3、基于Storybook的组件文档\n\nStorybook 是一个开源工具，用于开发和展示 React、Vue、Angular 等前端组件的交互式 UI 组件库。通过 Storybook，开发人员可以在一个独立的环境中编写、展示和测试组件，而不必依赖于整个应用程序。这样可以更快地开发和调试组件，同时也方便团队成员之间的协作。\n\nStorybook 提供了一个交互式的界面，开发人员可以在其中创建不同的“故事”（stories），每个故事对应一个组件的不同状态或交互方式。通过 Storybook，开发人员可以轻松地查看和测试组件在不同状态下的表现，从而更好地理解和调试组件的行为。\n\n[Aura Design 组件库文档](https:\u002F\u002Faura-design.deno.dev\u002F)\n\n\n\n\n\n \n\n\n### 4、未来规划\n\n目前，我们的组件库中包含了16个基础组件和一些与AI Chat相关的组件。在 [A-M](https:\u002F\u002Fa-m.love\u002F) 网站中，95% 的组件都源自 [Aura Design](https:\u002F\u002Faura-design.deno.dev\u002F) 组件库。未来，除了继续封装一些基础组件外，我们将优先开发常规组件库中缺失的比如AI应用的相关组件。随着组件库的逐步丰富和条件的成熟，我们会考虑将其开源。**如果您有任何相关组件的封装需求或希望成为项目的成员，请随时与我联系。**\n\n## 参考文献\n\n•[ChatGPT](https:\u002F\u002Fa-m.love\u002Fzh-cn\u002Fapps\u002Fchats)\n\n•[Web Components从技术解析到生态应用个人心得指北](https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Farticle\u002F2380289)\n\n•[2022 Web Components 趋势解读和展望](https:\u002F\u002Fwww.51cto.com\u002Farticle\u002F702559.html)\n\n•[你不知道的 Web Components - 过去和未来](https:\u002F\u002Fwww.albertaz.com\u002Fblog\u002Fweb-component-history-and-future)\n\n•[浅析Web components的痛点](https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7029224164506468388)",html:"\u003Ch2 id=\"一、让人又爱又恨的web-components\"\u003E一、让人又爱又恨的Web Components\u003C\u002Fh2\u003E\n\u003Cp\u003EWeb Components是一种用于构建可重用的Web元素的技术。它允许开发者创建自定义的HTML元素，这些元素可以在不同的Web应用程序中重复使用，并且具有自己的样式、行为和功能。\u003C\u002Fp\u003E\n\u003Cp\u003EWeb Components并非一项新技术，而是一组持续演进的、由W3C标准化的组件化API。最早可以追溯到2011年左右，大约在2016年左右各个浏览器才实现了Custom Element V1版本。然而，在同一时期，诸如Vue和React等组件化框架已经开始主导前端开发生态。\u003C\u002Fp\u003E\n\u003Cp\u003E尽管近几年Web Components标准和技术都趋于成熟，但早期面临的兼容性问题以及后来Vue和React等MVVM框架的崛起，导致Web Components领域一直处于低调状态。接下来，我们将从Web Components的发展历程、优势以及开发中面临的挑战三个方面更深入地了解Web Components。\u003C\u002Fp\u003E\n\u003Ch3 id=\"1、web-components发展历程\"\u003E1、Web Components发展历程\u003C\u002Fh3\u003E\n\u003Cp\u003E•2011年：Google发布了Chrome浏览器，并提出了“Shadow DOM”概念，这是Web Components的一个重要组成部分。\u003C\u002Fp\u003E\n\u003Cp\u003E•2013年：谷歌工程师Alex Komoroske在Google I\u002FO大会上首次提出了Web Components的概念，并推动了相关标准的制定。\u003C\u002Fp\u003E\n\u003Cp\u003E•2014年：W3C发布了Web Components的规范草案，其中包括四个主要技术：Custom Elements、Shadow DOM、HTML Templates和HTML Imports。\u003C\u002Fp\u003E\n\u003Cp\u003E•2015年：Web Components的规范逐渐得到浏览器厂商的支持，Chrome、Firefox、Safari等主流浏览器开始逐步实现相关功能。\u003C\u002Fp\u003E\n\u003Cp\u003E•2018年：Web Components逐渐成为前端开发的主流技术之一，越来越多的开发者开始使用Web Components来构建可重用的组件。\u003C\u002Fp\u003E\n\u003Cp\u003E•至今：Web Components技术不断发展和完善，越来越多的框架和库开始支持Web Components，使其在前端开发中发挥更大的作用。\u003C\u002Fp\u003E\n\u003Ch3 id=\"2、web-components有哪些优势\"\u003E2、Web Components有哪些优势\u003C\u002Fh3\u003E\n\u003Cp\u003E•\u003Cstrong\u003E封装性：\u003C\u002Fstrong\u003E Web Components 具有良好的封装性，可以将页面中的功能和样式封装在一个自定义元素内部，避免全局作用域的污染，提高了代码的可维护性和可重用性。\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Cstrong\u003E跨框架兼容\u003C\u002Fstrong\u003E：Web Components 是基于 Web 标准的技术，可以在任何支持 Custom Elements 和 Shadow DOM 的现代浏览器中使用，与各种前端框架和库兼容性良好。\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Cstrong\u003E标准化\u003C\u002Fstrong\u003E：Web Components 的规范由 W3C 组织制定，具有较高的标准化程度，有利于统一前端开发的规范和实践，提高了代码的可维护性和可移植性。\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Cstrong\u003E性能优势\u003C\u002Fstrong\u003E：通过使用 Shadow DOM 技术，Web Components 可以实现更好的性能优化，避免不必要的重绘和重排，提高页面的渲染效率和用户体验。\u003C\u002Fp\u003E\n\u003Cp\u003E目前，前端开发中有许多流行的框架可供选择，如React、Vue、Angular、Solid、Svelte、Preact等。框架的选择是一个复杂的决策过程。当框架版本升级时，项目可能需要面临重构的问题。例如，从Vue2升级到Vue3可能需要付出较大的改造成本。如果不进行升级，就无法使用最新特性，甚至可能面临框架旧版本不再维护的尴尬局面。在这种情况下，Web Components 的\u003Cstrong\u003E框架无关性\u003C\u002Fstrong\u003E可以在一定程度上改善这种局面。\u003C\u002Fp\u003E\n\u003Cp\u003E就性能而言，以将 React 组件转换为 Web Components 为例，可以优化执行过程，减少阻塞，提高页面性能。在普通的 React 组件中，初次执行时需要一次性完成所有必须的节点逻辑，这些逻辑的执行会同步占用在 JavaScript 的主线程上。当页面变得足够复杂时，一些非核心逻辑可能会阻塞后面核心逻辑的执行。而通过使用 Web Components 优化 React 组件，执行过程会变得更简洁。例如，注册一个复杂的逻辑组件时，在 React 执行时只需执行一个 createElement 语句，创建组件只需要 1-2 微秒即可完成。真正的逻辑不会立即执行，而是等到“核心任务”执行完毕后再执行，甚至可以在合适的时机再执行，从而\u003Cstrong\u003E降低 Diff 成本\u003C\u002Fstrong\u003E。\u003C\u002Fp\u003E\n\u003Cp\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002F832edb802ad8562cab8ff18e585950d7.png\" alt=\"\"\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E \u003C\u002Fp\u003E\n\u003Ch3 id=\"3、使用web-components开发的痛点\"\u003E3、使用Web Components开发的痛点\u003C\u002Fh3\u003E\n\u003Cp\u003E虽然Web Components具有许多令人喜欢的优点，但在实际开发中也存在一些棘手的问题。以下是几个典型问题：\u003C\u002Fp\u003E\n\u003Cp\u003E•原生开发难题：Web Components是一项原生技术，因此在组件编写过程中需要回归到原生开发。事件处理、状态管理等方面都需要自行处理。尽管大多数框架都提供了对Web Components的封装方案，但使用这些方案又需要引入相应框架的运行时，这导致脱离了框架无关性这一最大优势。\u003C\u002Fp\u003E\n\u003Cp\u003E•Form表单问题：在Shadow DOM中，包含\u003Cinput\u003E、\u003Ctextarea\u003E或\u003Cselect\u003E等标签的value不会自动与表单关联，因此在表单提交时无法获取相应的value，需要手动处理，另外 \u003Ca href=\"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fcustom-elements.html#elementinternals\"\u003EElementInternals提案\u003C\u002Fa\u003E 也在致力于解决这个问题。\u003C\u002Fp\u003E\n\u003Cp\u003E•样式隔离问题：虽然样式隔离有助于避免全局样式污染的问题，但在某些场景下，如主题颜色等，仍需要将样式同步到Web Components组件内部。目前可以通过CSS变量实现主题切换。此外，需要注意的是，slot插槽中的DOM元素样式并未得到隔离。\u003C\u002Fp\u003E\n\u003Cp\u003E针对这些问题，开发人员可能需要考虑采取一些额外的措施来解决挑战，以确保Web Components在实际应用中能够更加顺畅地运行。\u003C\u002Fp\u003E\n\u003Ch2 id=\"二、目前主流的web-components组件方案\"\u003E二、目前主流的Web Components组件方案\u003C\u002Fh2\u003E\n\u003Ch3 id=\"1、头部案例\"\u003E1、头部案例\u003C\u002Fh3\u003E\n\u003Cp\u003ETwitter\u003C\u002Fp\u003E\n\u003Cp\u003ETwitter 2016 年开始将自己的嵌入式推文从 iframe 切换成 ShadowDOM，减少了内存消耗、加快了渲染速度，并批量渲染的时候保持丝滑。\u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Ftwittercommunity.com%2Ft%2Fupcoming-change-to-embedded-tweet-display-on-web%2F66215%2F1&source=article&objectId=2380289\"\u003EUpcoming Change to Embedded Tweet Display on Web\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EYoutube\u003C\u002Fp\u003E\n\u003Cp\u003EYoutube 作为 google 系的产品，很早就在全站用上了 Web Components，并且开源了自己播放器组件 \u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.com%2FGoogleWebComponents%2Fgoogle-youtube&source=article&objectId=2380289\"\u003EGitHub - GoogleWebComponents\u002Fgoogle-youtube: YouTube video playback web component\u003C\u002Fa\u003E此外 google 开源的 Web Components 还是很多的，\u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.com%2FGoogleWebComponents&source=article&objectId=2380289\"\u003EGoogle Web Components · GitHub\u003C\u002Fa\u003E ，包括地图、drive、日历等等。\u003C\u002Fp\u003E\n\u003Cp\u003EGithub\u003C\u002Fp\u003E\n\u003Cp\u003EGithub 对 Web Components 的使用很早，具体可以看： \u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.blog%2F2021-05-04-how-we-use-web-components-at-github%2F&source=article&objectId=2380289\"\u003EHow we use Web Components at GitHub | The GitHub Blog\u003C\u002Fa\u003E，2017 年 Custom Elements v1 版本在 chrome 和 safari 上相继实现之后，Github 开始大范围使。要知道 Github 2018 年才刚刚完全移除 jQuery：\u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Ftools\u002Fblog-entry?target=https%3A%2F%2Fgithub.blog%2F2018-09-06-removing-jquery-from-github-frontend%2F&source=article&objectId=2380289\"\u003ERemoving jQuery from GitHub.com frontend | The GitHub Blog\u003C\u002Fa\u003E 这既得益于 Github 自身项目组件化的架构，也得益于 Web Components 本身与框架无关的特性非常识合作老项目升级。\u003C\u002Fp\u003E\n\u003Cp\u003EAdobe Spectrum\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"https:\u002F\u002Fopensource.adobe.com\u002Fspectrum-web-components\u002Findex.html\"\u003EAdobe Spectrum\u003C\u002Fa\u003E 是由 Adobe 创建的设计系统，该站点是一个基于 Web Components 的 UI 框架产品。\u003C\u002Fp\u003E\n\u003Ch3 id=\"2、方案对比\"\u003E2、方案对比\u003C\u002Fh3\u003E\n\u003Cp\u003E目前主流的 Web Components 组件方案有三种：\u003C\u002Fp\u003E\n\u003Cp\u003E方案一：\u003C\u002Fp\u003E\n\u003Cp\u003E•特点：以React和Vue为代表，通过将React或Vue组件包装为Web Components组件的方式实现。\u003C\u002Fp\u003E\n\u003Cp\u003E•优点：利用了本身框架的特性如生命周期、状态管理等，易于开发者使用。\u003C\u002Fp\u003E\n\u003Cp\u003E•缺点：需要引入本身框架的运行时，导致组件体积增加，同时丧失了框架无关性这一优势。\u003C\u002Fp\u003E\n\u003Cp\u003E方案二：\u003C\u002Fp\u003E\n\u003Cp\u003E•特点：以Stencil和LitElement为代表，提供了专门的编译器、工具链和语法糖来构建 Web Components。\u003C\u002Fp\u003E\n\u003Cp\u003E•优点：相比第一种方案，引入本身框架的运行时可能更小，减少了体积。\u003C\u002Fp\u003E\n\u003Cp\u003E•缺点：需要学习新的语法和工具，可能增加开发者的心智负担。\u003C\u002Fp\u003E\n\u003Cp\u003E方案三：\u003C\u002Fp\u003E\n\u003Cp\u003E特点：以Svelte和Solid为代表，直接将组件编译成原生 Web Components\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003E优点：放弃了虚拟DOM，利用编译或转译能力直接生成操作DOM的更新函数，性能优秀，接近原生DOM。另外Vue3中的Vapor模式，正是借鉴了这种模式，目前正在试验阶段。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"三、与solidjs结合的化学反应\"\u003E三、与SolidJS结合的“化学反应”\u003C\u002Fh2\u003E\n\u003Ch3 id=\"1、solidjs有何不同\"\u003E1、SolidJS有何不同\u003C\u002Fh3\u003E\n\u003Cp\u003ESolidJS 是一个快速、灵活、可扩展的 JavaScript 库，用于构建用户界面。与其他前端框架相比，SolidJS 有一些独特的特点和优势：\u003C\u002Fp\u003E\n\u003Cp\u003E•Reactivity System: SolidJS 使用基于数据变化的响应式系统，可以精确追踪状态的变化，并只更新发生变化的部分，从而提高性能。\u003C\u002Fp\u003E\n\u003Cp\u003E•Fine-grained Reactivity: SolidJS 提供了\u003Cstrong\u003E细粒度的响应式更新\u003C\u002Fstrong\u003E，可以在组件级别、元素级别甚至属性级别进行更新，避免不必要的重新渲染。\u003C\u002Fp\u003E\n\u003Cp\u003E•No Virtual DOM: 与其他框架不同，SolidJS \u003Cstrong\u003E不使用虚拟 DOM\u003C\u002Fstrong\u003E，而是直接编译生成操作真实 DOM的函数，减少了 diff 算法的开销，提高了性能。\u003C\u002Fp\u003E\n\u003Cp\u003E•Hooks-based API: SolidJS 使用类似 React Hooks 的 API，使得组件逻辑更易于复用和组合\u003C\u002Fp\u003E\n\u003Ch3 id=\"2、可以解决哪些问题\"\u003E2、可以解决哪些问题\u003C\u002Fh3\u003E\n\u003Cp\u003E•直接在编译阶段生成原生Web Components，核心库非常小巧，没有额外的依赖，可以帮助减少项目的体积。\u003C\u002Fp\u003E\n\u003Cp\u003E•提供响应式状态管理、事件管理、生命周期等，解决原生开发的痛点。\u003C\u002Fp\u003E\n\u003Cp\u003E•类React语法，上手容易，降低开发者心智负担，转换成Web Components十分流畅。\u003C\u002Fp\u003E\n\u003Ch2 id=\"四、从0到1搭建-aura-design-web-components组件库\"\u003E四、从0到1搭建 \u003Ca href=\"https:\u002F\u002Faura-design.deno.dev\u002F\"\u003EAura Design\u003C\u002Fa\u003E Web Components组件库\u003C\u002Fh2\u003E\n\u003Ch3 id=\"1、工程目录设计\"\u003E1、工程目录设计\u003C\u002Fh3\u003E\n\u003Cp\u003E该项目采用了 Monorepo 设计，旨在\u003Cstrong\u003E统一管理各个子项目，避免开发阶段频繁发布\u002F安装 npm 包\u003C\u002Fstrong\u003E来同步代码。具体内容包括：\u003C\u002Fp\u003E\n\u003Cp\u003E•packages\u002Feslint-config-aurai： 用于管理ESLint配置，集成了TypeScript和Prettier（用于JavaScript\u002FTypeScript格式化）。\u003C\u002Fp\u003E\n\u003Cp\u003E•packages\u002Fstylelint-config-aurai： 用于管理StyleLint配置，集成了stylelint-order（用于样式属性排序）和Prettier（用于样式格式化）。\u003C\u002Fp\u003E\n\u003Cp\u003E•packages\u002Faura-design： 基于eslint-config-aurai和stylelint-config-aurai规范，使用Solid和Solid Element构建的Web Components元组件库，包括按钮、图标、卡片、布局等基础组件。\u003C\u002Fp\u003E\n\u003Cp\u003E•packages\u002Faura-design-pro： 与aura-design类似，但封装了一些复杂组件，通常是依赖第三方库的组件，例如支持Markdown渲染的富文本组件、视频播放组件等。\u003C\u002Fp\u003E\n\u003Cp\u003E•apps\u002Faura-design-docs： 基于Storybook的组件文档库，支持查看代码、组件预览，并可实时预览修改组件属性。\u003C\u002Fp\u003E\n\u003Cp\u003E•apps\u002Freact-starter、apps\u002Fvue-starter： 计划用于验证Web Components在React和Vue组件中的兼容性等问题。\u003C\u002Fp\u003E\n\u003Cp\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002F4005c15b51516a2fc9beea88ec290301.png\" alt=\"\"\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E \u003C\u002Fp\u003E\n\u003Ch3 id=\"2、部分细节展示\"\u003E2、部分细节展示\u003C\u002Fh3\u003E\n\u003Ch4 id=\"21、组件样式编写\"\u003E2.1、组件样式编写\u003C\u002Fh4\u003E\n\u003Cp\u003EWeb Components组件中的样式是内联到每一个组件的Shadow DOM中，因此不能用常规的CSS Modules等方案。本项目中使用了大约4种不同的内联样式方案，以对应不同的应用场景：\u003C\u002Fp\u003E\n\u003Cp\u003E•原子化CSS方案：UnoCSS致力于将所有样式属性细分为最小单元的CSS，以便实现最大程度的自由组合和复用。此外，UnoCSS还具有自动分析文件中使用的样式的功能，只将实际使用的样式打包，从而减小文件大小。\u003C\u002Fp\u003E\n\u003Cp\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fd218ee5e2625b827854160745be95437.png\" alt=\"\"\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E \u003C\u002Fp\u003E\n\u003Cp\u003E•CSS inline模式：利用Vite的功能，将外部样式作为内联模式引入，当需要自定义复杂样式或语义化场景时，可能会使用此模式。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003Eimport styles from '.\u002FButton.css?inline';\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp\u003E•CSS Template：CSS模板字符串类似于CSS-in-JS方案，通常用于根据prop变量动态控制样式。尽管这种方法会增加一定的运行时处理逻辑，但可以有效减少CSS重复和文件大小。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003Econst styles = css`\n :host {\n display: inline-block;\n }\n .box {\n height: ${props.size + 2}px;\n line-height: ${props.size + 2}px;\n position: relative;\n overflow: hidden;\n }\n .nums-chip {\n transition: transform 1.5s;\n transform: translate(0, -50%);\n overflow: hidden;\n }\n .number {\n font-size: ${props.size}px;\n line-height: ${props.size + 2}px;\n }\n`;\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp\u003E•CSS Link：使用link标签引入外部样式表，当组件样式比较多、体积较大时，如果直接内嵌到组件内部，当有N个组件时，体积就会增大N倍（暂不考虑浏览器内置优化逻辑），而使用link标签减少体积同时也可以利用上浏览器缓存的特性。\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E...\nreturn (\n <>\n <link href={`https:\u002F\u002Fcdn.bootcdn.net\u002Fajax\u002Flibs\u002Fhighlight.js\u002F11.8.0\u002Fstyles\u002Fatom-one-${props.theme}.min.css`} rel="stylesheet"><\u002Flink>\n <style>{styles}<\u002Fstyle>\n <div innerHTML={md.render(props.text)}><\u002Fdiv>\n <\u002F>\n );\n...\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Ch4 id=\"22、svg图标集成\"\u003E2.2、Svg图标集成\u003C\u002Fh4\u003E\n\u003Cp\u003EIcon组件引入和注册\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003Eimport {\n defineCustomElements,\n registerIcon,\n Icon,\n} from '@aura-group\u002Faura-design';\nregisterIcon('\u002Ficonfont.svg'); \u002F\u002F 自定义svg图标注册，使用主项目根目录的svg图标文件，如果不注册则使用默认图标\ndefineCustomElements({ Icon }); \u002F\u002F 注册Web Components图标组件\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp\u003E组件使用\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E<ar-icon name="download" size="20px" color="#4213de"><\u002Far-icon>\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Ch4 id=\"23、组件打包\"\u003E2.3、组件打包\u003C\u002Fh4\u003E\n\u003Cp\u003E支持ES（按需加载）和UMD两种范式，自动生成Typescript声明文件：\u003C\u002Fp\u003E\n\u003Cp\u003Epackage.json\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E{\n "name": "@aura-group\u002Faura-design",\n "version": "0.3.9",\n "description": "",\n "main": "dist\u002Faura-design.umd.js",\n "module": "dist\u002Faura-design.es.js",\n "typings": "dist\u002Ftypes\u002Fcomponents\u002Findex.d.ts",\n "files": [\n "dist"\n ],\n "type": "module",\n...\n}\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Cp\u003EVite相关配置\u003C\u002Fp\u003E\n\u003Cpre\u003E\u003Ccode\u003E...\nbuild: { \n lib: {\n entry: 'src\u002Fcomponents\u002Findex.ts',\n name: 'aura-design',\n fileName: (format) => `aura-design.${format}.js`,\n },\n},\n...\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003Ch3 id=\"3、基于storybook的组件文档\"\u003E3、基于Storybook的组件文档\u003C\u002Fh3\u003E\n\u003Cp\u003EStorybook 是一个开源工具，用于开发和展示 React、Vue、Angular 等前端组件的交互式 UI 组件库。通过 Storybook，开发人员可以在一个独立的环境中编写、展示和测试组件，而不必依赖于整个应用程序。这样可以更快地开发和调试组件，同时也方便团队成员之间的协作。\u003C\u002Fp\u003E\n\u003Cp\u003EStorybook 提供了一个交互式的界面，开发人员可以在其中创建不同的“故事”（stories），每个故事对应一个组件的不同状态或交互方式。通过 Storybook，开发人员可以轻松地查看和测试组件在不同状态下的表现，从而更好地理解和调试组件的行为。\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Ca href=\"https:\u002F\u002Faura-design.deno.dev\u002F\"\u003EAura Design 组件库文档\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cimg src=\"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002F89c3cde8f1660d88408bce845945a5d6.png\" alt=\"\"\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E \u003C\u002Fp\u003E\n\u003Ch3 id=\"4、未来规划\"\u003E4、未来规划\u003C\u002Fh3\u003E\n\u003Cp\u003E目前，我们的组件库中包含了16个基础组件和一些与AI Chat相关的组件。在 \u003Ca href=\"https:\u002F\u002Fa-m.love\u002F\"\u003EA-M\u003C\u002Fa\u003E 网站中，95% 的组件都源自 \u003Ca href=\"https:\u002F\u002Faura-design.deno.dev\u002F\"\u003EAura Design\u003C\u002Fa\u003E 组件库。未来，除了继续封装一些基础组件外，我们将优先开发常规组件库中缺失的比如AI应用的相关组件。随着组件库的逐步丰富和条件的成熟，我们会考虑将其开源。\u003Cstrong\u003E如果您有任何相关组件的封装需求或希望成为项目的成员，请随时与我联系。\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"参考文献\"\u003E参考文献\u003C\u002Fh2\u003E\n\u003Cp\u003E•\u003Ca href=\"https:\u002F\u002Fa-m.love\u002Fzh-cn\u002Fapps\u002Fchats\"\u003EChatGPT\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Ca href=\"https:\u002F\u002Fcloud.tencent.com\u002Fdeveloper\u002Farticle\u002F2380289\"\u003EWeb Components从技术解析到生态应用个人心得指北\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Ca href=\"https:\u002F\u002Fwww.51cto.com\u002Farticle\u002F702559.html\"\u003E2022 Web Components 趋势解读和展望\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Ca href=\"https:\u002F\u002Fwww.albertaz.com\u002Fblog\u002Fweb-component-history-and-future\"\u003E你不知道的 Web Components - 过去和未来\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cp\u003E•\u003Ca href=\"https:\u002F\u002Fjuejin.cn\u002Fpost\u002F7029224164506468388\"\u003E浅析Web components的痛点\u003C\u002Fa\u003E\u003C\u002Fp\u003E",tags:"[{\"id\":0,\"uuid\":\"50484765\",\"name\":\"软件开发\",\"icon\":\"icon-ruanjiankaifa\",\"status\":0,\"createTime\":\"0001-01-01T00:00:00Z\",\"updateTime\":\"0001-01-01T00:00:00Z\",\"action\":20},{\"id\":0,\"uuid\":\"52445863\",\"name\":\"程序人生\",\"icon\":\"icon-Chengxurensheng\",\"status\":0,\"createTime\":\"0001-01-01T00:00:00Z\",\"updateTime\":\"0001-01-01T00:00:00Z\",\"action\":20}]",homeImg:b,createTime:"2024-04-03T11:07:18.349702+08:00",updateTime:"2024-04-03T11:08:20.868818+08:00",publishTime:"2024-04-03T11:08:20.868819+08:00",readCount:v,favoriteCount:a,zanCount:a,isAuthorBlog:c},otherBlogList:[{uuid:"5578795498",title:"KVC原理与数据筛选"},{uuid:"7576416516",title:"Function源码解析与实践"},{uuid:"3323970888",title:"观察者模式在spring中的应用"},{uuid:"3146830974",title:"单体分层应用架构剖析"},{uuid:"2811679206",title:"责任链和策略设计模式-基于Java编程语言"}],recommendBlogList:[{uuid:"9382788506",title:"皕杰报表之UUID",title2:b,intro:"​在我们用皕杰报表工具设计填报报表时，如何在新增行里自动增加id呢？能新增整数排序id吗？目前可以在新增行里自动增加id，但只能用uuid函数增加UUID编码，不能新增整数排序id。uuid函数说明：获取一个UUID，可以在填报表中用来创建数据ID语法：uuid()或uuid(sep)参数说明：sep布尔值，生成的uuid中是否包含分隔符''，缺省为",createTime:d,updateTime:d,publishTime:"2022-07-08T08:32:23+08:00",homeImg:b,readCount:891,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"34035044",nicker:"helloworld_34035044",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F0d250ec5492da88592013bbd302402ae.jfif",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"4251373309",title:"Python+Selenium自动化篇",title2:b,intro:"本篇文字主要学习selenium定位页面元素的集中方法，以百度首页为例子。0.元素定位方法主要有：id定位：find\\_element\\_by\\_id('')name定位：find\\_element\\_by\\_name('')class定位：find\\_element\\_by\\_class\\_name(''",createTime:d,updateTime:d,publishTime:"2021-10-11T23:39:07+08:00",homeImg:b,readCount:774,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:f,nicker:f,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"5577656212",title:"FLV文件格式 ",title2:b,intro:"1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300（0x012C），那么在FLV文件中存放的顺序是：|0x01|0x2C|。如果是无符号32位数字300（0x0000012C），那么在FLV文件中的存放顺序是：|0x00|0x00|0x00|0x01|0x2C。2.  ",createTime:d,updateTime:d,publishTime:"2021-10-11T10:30:18+08:00",homeImg:b,readCount:987,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"6029686498",title:"mysql设置时区 ",title2:b,intro:"mysql设置时区mysql\\_query(\"SETtime\\_zone'8:00'\")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\\_id)asdevice,CONVERT\\_TZ(FROM\\_UNIXTIME(reg\\_time),'08:00','0",createTime:d,updateTime:d,publishTime:"2021-10-11T12:01:24+08:00",homeImg:b,readCount:1054,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"7613974470",title:"RobotFramework自动化测试之元素定位 ",title2:b,intro:"前言：最近在做基于RF框架的Web自动化测试，其中涉及到元素的定位，主要用到id、name、xpath、css四中定位方法，尤其后面的两种方法特别有效，可以解决大部分的定位问题。",createTime:d,updateTime:d,publishTime:"2021-10-12T00:59:38+08:00",homeImg:b,readCount:855,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:f,nicker:f,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2690099717",title:"CSS 分类 (Classification) ",title2:b,intro:"★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。⑵下面是常用的属性以及描述：!(https:\u002F\u002Foscimg.oschina.net\u002Foscnet\u002F00cb565",createTime:d,updateTime:d,publishTime:"2021-10-11T16:02:46+08:00",homeImg:b,readCount:575,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:f,nicker:f,avatar:h,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"1700461974",title:"10+个很酷的VueJS组件，模板和实验示例 ",title2:b,intro:"众所周知，Vue.js组件是Vue创建自定义元素的重要功能之一，同时，模板可帮助你避免从头开始创建网页设计。总之，这些工具对于希望其开发过程更快，更高效的任何Web开发人员都是必不可少的。此外，在过去的几年中，Vue.js变得非常流行，许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据绑定和MVC模型（模型、视图、控制器），",createTime:d,updateTime:d,publishTime:"2021-10-11T12:46:36+08:00",homeImg:b,readCount:529,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"Lorraine12",nicker:"可莉",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F43634775400d410b3ba10e5f595ca12d.png",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2102334911",title:"MySQL部分从库上面因为大量的临时表tmp_table造成慢查询 ",title2:b,intro:"背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_",createTime:d,updateTime:d,publishTime:"2021-10-11T11:24:10+08:00",homeImg:b,readCount:1245,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:g,nicker:g,avatar:i,collectionId:a,recommendStatus:a,userStatus:a,auditReason:b},{uuid:"2740026496",title:"DOM（文档对象模型）：理解网页结构与内容操作的关键技术",title2:b,intro:"DOM（文档对象模型）定义了一种访问和操作文档的标准。它是一个平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。HTMLDOM用于操作HTML文档，而XMLDOM用于操作XML文档。HTMLDOM示例通过ID获取并修改HTML元素的",createTime:d,updateTime:d,publishTime:"2024-03-29T20:24:49.599133+08:00",homeImg:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F09d1e2e0f4adc20c0d7f6733cbc6aeb1.png",readCount:117,zanCount:a,favoriteCount:a,status:a,commentCount:a,profile:"6389284992",nicker:"小万哥",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002Fb9b9448bb7c5d337f5d44624f78b8976.png",collectionId:a,recommendStatus:a,userStatus:a,auditReason:b}],userInfo:{profile:"74966852",avatar:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F57aa87a531a5600fa75d19106bac89f6.jpg",nicker:"京东云开发者",level:a,job:b,company:"京东云",sex:j,slogan:"最懂产业的云",blogCount:1337,fansCount:46,zanCount:480,followed:c,isZaned:c,isFavorited:c,webEnable:a,website:b,websiteDomain:b,wechatQrcode:b,wechatOfficialAccount:b}},currentCateId:b,recommendSpecialList:[],userAndBlogActionInfo:{},isLoading:c,isFinished:c,searchList:[],isLoadingSearch:c,isFinishedSearch:c,recommendLessonList:[],recommendLessonListByBlog:[{id:v,uuid:"9574923462",userId:w,name:"Andriod第三方源码分析",subtitle:"Andriod第三方源码分析，通过对 EventBus、OKHttp、RXJava 、Retrofit 的底层源码分析与手写实现，帮助你更好的掌握三方裤的使用",content:b,html:b,price:a,discountAmount:a,status:x,reason:b,level:3,type:j,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F86018b97b99b2ad0b0e8f43ccfd5c8c8.png",payCount:35,updatedAt:"2023-08-31T22:36:46.061685+08:00",createdAt:"2023-08-30T17:15:05.856981+08:00",deletedAt:e},{id:75,uuid:"6955961602",userId:w,name:"Android进阶之旅-(Framework源码分析)",subtitle:"详细分析了android Framework底层的源码，包括但不限于 启动，init进程，zygote进程，binder机制，ServiceManger进程，AMS,PMS, Launcher等等",content:b,html:b,price:a,discountAmount:a,status:x,reason:b,level:4,type:j,mark:a,canRefund:a,cover:"https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F2847450d82190c8a7d0ae4ba8a8e5629.png",payCount:26,updatedAt:"2023-09-08T09:27:27.21739+08:00",createdAt:"2023-09-07T21:50:23.74792+08:00",deletedAt:e}]},special:{mostSpecialCountUserList:[],specialList:[],specialCateList:[],bannerList:[],specialDetail:{},specialDetailList:{},chapterList:[],specialListByCate:[],mySpecialDetail:e,isLoading:c,isFinished:c},tutorial:{bigCateList:[],tutorialData:[],tutorialDetail:{},chapterList:[],tutorialOverview:{}}},serverRendered:u,routePath:"\u002Fp\u002F6313912932",config:{_app:{basePath:"\u002F",assetsPath:"\u002F_nuxt\u002F",cdnURL:e}}}}(0,"",false,"0001-01-01T00:00:00Z",null,"Stella981","Wesley13","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F1bad3e5246214111b0d7a482fc5beec5.jfif","https:\u002F\u002Fimg-hello-world.oss-cn-beijing.aliyuncs.com\u002Fimgs\u002F46847d754406b0102dee7a1f54d14f92.jfif",1,"\u002Fmanage\u002FgetCollectionList","\u002Fmanage\u002FgetMyBlogDetail","\u002Fspecial\u002FupdateSection","\u002Fmanage\u002FgetMySectionDetail","\u002Fspecial\u002FsubscribeSpecial","\u002Fspecial\u002FunSubscribeSpecial","\u002Fspecial\u002FmodifySpecial","\u002Ftutorial\u002FgetTutorialList","\u002Ftutorial\u002FgetTutorialDetail","\u002Faccess\u002FmodifyPassword",true,66,7689,30));</script><script src="/_nuxt/hw.165.js?t=1720233430691" defer></script><script src="/_nuxt/hw.116.js?t=1720233430691" defer></script><script src="/_nuxt/hw.0.js?t=1720233430691" defer></script><script src="/_nuxt/hw.1.js?t=1720233430691" defer></script><script src="/_nuxt/hw.2.js?t=1720233430691" defer></script><script src="/_nuxt/hw.166.js?t=1720233430691" defer></script><script src="/_nuxt/hw.14.js?t=1720233430691" defer></script><script src="/_nuxt/hw.171.js?t=1720233430691" defer></script><script src="/_nuxt/hw.15.js?t=1720233430691" defer></script> </body> </html>