【徐顺发】 低成本、跨技术栈与无框架：重新构想前端组件.pdf

1、低低成成本本、跨跨技技术术栈栈与与无无框框架架：重重新新构构想想前前端端组组件件自我介绍：徐顺发哈啰出行 前端开发ReactRedux 前端开发实战作者。热衷于使用前沿技术提升前端生产力，近一年专注于 Web Components 的跨技术栈解决方案，目前致力于 Quark 技术生态建设。开篇/讲师介绍目录1.聊聊当下主流前端组件的“伤”2.初识 Web Components3.利用 Quarkc 高效构建 Web 组件4.面向未来的无框架浏览器原生组件探索与实践开篇/目录一、聊聊当下主流前端组件的“伤”目录一/组件痛点通通用用组组件件 e e.g g.基基础础组组件件 /表表单单 /反反馈馈

2、 /展展示示 /导导航航组组件件业业务务组组件件 e e.g g.抽抽奖奖转转盘盘 /省省市市区区选选择择 /优优惠惠券券等等依赖技术栈（eg.Vue、React等）运行时关联技术栈版本(eg.Vue2.x、Vue3.x)v va an nt t /a an nt td d 等等第第三三方方n np pmm包包开开发发者者自自行行封封装装，私私有有n np pmm托托管管生命周期短&频繁迭代&维护成本大不能跨技术框架/技术栈使用CSS样式全局相互影响组件痛点/组件分类组件痛点/场景举例业务中台：需要提供业务组件给上层业务方使用，但因为一些历史问题，不同业务线使用框架不统一，包括 React、V

3、ue2、Vue3、jQuery 等。此时会面临问题：每种选型框架都需要开发一次，费时费力组件升级，需要业务方同步发版升级，沟通成本高、迭代效率低组件痛点/场景举例组件其实可以不用依赖技术框架而存在。如果能做到这点，那么这个组件库可以穿越沉浮，历经长久!不用随着技术栈的更新而更新。我们认为组件痛点/我们认为二、初识 Web Components目录二/WC你以为 Web components 离我们很远？WCs/介绍在过去的很长一段时间里，浏览器用它来封装一些元素的内部结构，比如 i in np pu ut t、s se el le ec ct t、v vi id de eo oWCs/介绍通通

4、过过一一个个小小示示例例来来看看如如何何写写一一个个wwe eb b组组件件WCs/演示H He ea ad de er rB Bo od dy yF Fo oo ot te er r哈啰租车的订单卡片WCs/演示WCs/演示T Te emmp pl la at te eS Sh ha ad do oww D Do omm自自定定义义元元素素WCs/演示Custom elements（自定义元素）：一组 JavaScript API，允许您定义 custom elements 及其行为，然后可以在您的用户界面中按照需要使用它们。Shadow DOM（影子 DOM）：一组 JavaScript

5、API，用于将封装的“影子”DOM 树附加到元素（与主文档 DOM 分开呈现）并控制其关联的功能。通过这种方式，您可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。HTML templates（HTML 模板）：和 元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。Web Components 组成三剑客WCs/W3C 规范Shadow DOM独立沙盒 与外部DOM元素互不干扰D Do oc cu umme en nt tN No od de eN No od de eS Sh ha ad do owwR R

6、o oo ot tS Sh ha ad do owwD Do ommS Sh ha ad do owwD Do ommShadow Tree宿主元素WCs/核心API优化一下代码WCs/示例展示内容如何动态生成？WCs/示例讲解属性传递WCs/示例讲解Vue.jsReact.jsWCs/示例讲解内部事件如何定？WCs/示例讲解WCs/示例讲解在 Vue.js 使用示例：WCs/示例讲解至至此此，小小示示例例演演示示完完毕毕结论：WCs 可以用来构建任意web组件WCs/示例讲解现有WCs开发方式面临的“痛痛点点”有哪些？为什么要自研一个WCs的开发工具？WCs/开发痛点大量 DOM 操作纯 D