乐趣区

关于前端:哈啰前端Web-Components最佳实践

初识

在 html5 提供的 video 组件实现上采纳了 Shadow DOM 技术,Shadow DOM 技术是 Web Components 外围套件之一,还有像 input、select 也都采纳了这个技术,具体什么是 Shadow DOM 会在下文中给出解释。

实际

基于业务,咱们先看一个订单卡片的视觉稿:

用 Web Components 实现,代码展现如下:

这里波及到 Web Components 的三大技术套件

  • Template: 利用 Template 生成 DOM;
  • Shadow DOM:利用 Shadow DOM 来隔离 CSS 款式;
  • Custom Elements: 利用 Custom Elements 来自定义元素,继承自 HTMLElement,HTMLElement 是 DOM API 外面的一个类,继承该类就有了 html 的常见属性和 API,利用 Custom Elements 来自定义元素;

Template 和 Custom Elements 都比拟好了解,那什么是 Shadow DOM 呢?

你能够简略了解为 Shadow DOM 是一个独立的沙箱,与其它的 DOM 元素互不烦扰,能人造做到 CSS 的款式隔离!相似于 Vue 中带 Scoped 的 style 标签,它不会烦扰其它标签款式。

上面咱们来看下更具象 <order-card /> 的组件代码:

目前组件的内容是写死的,该怎么动静生成 DOM 呢?咱们持续往下看:

答案就是借助 Web Components 组件的生命周期来做,其中 connectedCallback 就是 dom 节点首次挂载调用,且只会调用一次,在这里能够拿到内部传入的属性。属性变更会调用 attributeChangedCallback, 在这里能够做 dom 更新相干的事件,这里不在开展,大家能够自行摸索下。

dom 能动静生成了,点击事件怎么玩?

其实和大家平时写 Vue 组件、React 组件一样,在 Vue 中是 @click,在 React 中是 onClick,具体示例可参考下图:

好了,根本知识点先讲到这里。这就是 Web Components!

总结

Web Components 具备如下特点:

其利用场景也比拟丰盛:

组件库

举例:国内已有实际 WCs 的是 Taro v3 版本,上面是官网截图:

跨端

举例:跨端的含意是一套 Web Components 组件既能够跑在 Web 上也能够跑在小程序上,跑在 Web 上,那是 Web Components 人造反对的,跑在小程序上的一个可行的计划能够参考下 Taro 3.x。

其基本原理是在 Taro runtime 提供了一套模仿 DOM & BOM 的 API,React & Vue 最终调用的 API 会被映射到 taro runtime 模仿的那一套 API,而后 Taro runtime 在模仿的 API 外部做微信小程序相干组件和 API 的调用。

微前端

微前端的几个基本要素:技术栈无关、利用隔离、独立开发。目前 Web Components 都合乎,实践上用 Web Components 做微前端也是可行的。

做点什么

既然咱们晓得了 WCs 这么牛逼,那咱们能用它来为咱们业务做点什么呢?

🍉🍉🍉 小故事一则:

在 9 月初,咱们团队在和其余团队共建 Vue 组件库,过后正好咱们的产品经理提出要重构订单,会波及到 React、Vue 两个技术栈的多个工程。

因而咱们萌发了寻找一套可能跨技术栈的组件解决方案,在 9 月份的时候,咱们组一边在共建 Vue 2.x 组件库、一边在摸索跨技术组件的可能性。

在通过一直摸索后,咱们利用业务开发 Buffer 工夫,积淀了一套基于 Web Components 技术的跨技术栈组件库!

上面向大家隆重介绍,咱们的作品 Quark。

目前为止,Quark 曾经能够接受住 40w+ pv 工程,且监控数据表明运行状况良好。

【体积小】比轻更轻,Quark cdn 总包大小为 20k!

【跨技术栈】反对 Vue、React、Angular 等各类框架 / 无框架

【品质高】19+ 高质量组件

【按需加载】反对按需援用

【文档全】详尽的文档和示例

【单测】单元测试笼罩

【TS】反对 TypeScript

【SSR】反对服务端渲染

【主题】反对定制主题

(本文作者:赵存)

浏览哈啰技术更多干货合集

前端 | 后端 | 挪动端 | 算法 | 项目管理

本文系哈啰技术团队出品,未经许可,不得进行商业性转载或者应用。非商业目标转载或应用本文内容,敬请注明“内容转载自哈啰技术团队”。

退出移动版