哈啰基于 Web Components 的跨技术栈组件库实践哈啰基于 Web Components 的跨技术栈组件库实践-徐顺发key.pdf

1、基于 Web Components 的跨技术栈组件库建设哈啰/AllanABOUT US哈啰是国内专业的本地出及活服务平台，致于应数字技术的红利，为们提供更便捷的出以及更好的普惠活服务。公司成于2016年9，总部位于上海，从家熟悉的共享单业务起步。前哈啰主要提供移动出服务及新兴本地服务，其中，移动出服务包括两轮共享服务（哈啰单、哈啰助）和四轮出服务（哈啰顺、哈啰打）；新兴本地服务包括主品牌哈啰电动，与蚂蚁集团、宁德时代合资建的哈换电，以及租服务聚合平台哈啰租等。截2022年4底，哈啰已拥有5.5亿注册户。哈啰简介我介绍：徐顺发哈啰出 前端回(技)滚(术)专家ReactRedux 前端开发实战作

2、者。热衷于使前沿技术提升前端产，近年专注于 Web Components 的跨技术栈解决案，通过在哈啰内部孵化 Quark，落地实践和持续打磨，探索出了套能于产环境的跨技术栈组件库案。录1.研发跨技术栈组件库动机2.初识 Web Components3.哈啰研 Web Components 开发/管理具4.向未来的跨技术栈组件库、研发跨技术栈组件库动机录组件库那么多重复造轮？现有组件库存在痛点？依赖技术栈（eg.Vue、React、Angular等）依赖技术栈版本(eg.Vue2.x、Vue3.x)公司前端项技术栈多命周期短&频繁迭代、初识 Web Components录你以为 Web com

3、ponents 离我们很远？在过去的很段时间，浏览器它来封装些元素的内部结构，如 input、select、video通过个示例来看如何写个web组件HeaderBodyFooter哈啰租的订单卡TemplateShadow Dom定义元素Custom elements（定义元素）：组 JavaScript API，允许您定义 custom elements 及其为，然后可以在您的户界中按照需要使它们。Shadow DOM（影 DOM）：组 JavaScript API，于将封装的“影”DOM 树附加到元素（与主档 DOM 分开呈现）并控制其关联的功能。通过这种式，您可以保持元素的功能私有，这

4、样它们就可以被脚本化和样式化，不担与档的其他部分发冲突。HTML templates（HTML 模板）：和 元素使您可以编写不在呈现中显示的标记模板。然后它们可以作为定义元素结构的基础被多次重。Web Components 组成三剑客Shadow DOM独沙盒 与外部DOM元素互不扰DocumentNodeNodeShadowRootShadowDomShadowDomShadow Tree宿主元素优化下代码内容如何动态成？Vue.jsReact.js属性变更后，在 attributeChangedCallback 中更新 DOM 元素如何定义内部事件？此，示例演示完毕结论：可以使 WCs 构

5、建任意组件通组件基础组件/表单/反馈/展示/导航组件期望：像 vant/antd 样使（没有智负担）使者业务组件 订单卡/省市区选择/优惠券等期望：像使 react/vue 样开发使者/组件开发者三、哈啰研 Web components 开发/管理具录现有WCs开发式临的“痛点”有哪些？为什么要研个WCs的开发具？量 DOM 操作纯 DOM 操作，回到了 jquery时代，不符合现代开发式兼容代码多针对 property!=attribute 的兼容分散在各个组件内部，没法收敛可维护性差没有类型约束、代码质量法保证，易出错没有代码亮Html template 和样式都是字符串式拼接在代码内，法

6、亮提示对组件开发者来说法修改内部 CSS 样式由于影 DOM 的存在，开发者法从外部修改组件内部样式样式单位适应如果使 rem/em 单位，不同前端程中单位存在问题其它问题 使原语法去编写 Web Components 相当繁琐，因此我们需要个框架帮助我们提开发效率和开发体验。抽象底层框架 quarkd/core（让组件开发者）书写 Web 组件更轻松创建组件使组件基本法卡重构1:Reactive properties2:Declarative templates3:Custom ElementsconstructorInitializationdisc