Skip to Content
微前端设计与实现
book

微前端设计与实现

by Luca Mezzalira
August 2022
Beginner to intermediate
270 pages
7h 38m
Chinese
Posts & Telecom Press
Content preview from 微前端设计与实现
78
4
4.4.8
 
Web
组件
Web
组件是一组
Web API
,允许创建自定义、可复用、封装后的
HTML
标签,用于网页和
Web
应用
。当提到微前端时,首先想到的可能不是
Web
组件,但是
Web
组件具有一些有趣
的特性,使得它成为构建微前端架构的合适的解决方案。比如,可以将样式封装在
We
b
件中,而不必担心泄露到主应用中。同样,
React
Angular
Vu
e
等所有主要的
UI
框架都
能够生成
We
b
组件,而且用于简化创建这种
Web
标准的开源库的数量也在增加,特别是像
Svelte
(可
以编译成
Web
组件)和谷歌的
LitElement
等项目。
Web
组件也是为使用相同或不
UI
框架的微前
端项目创建共享库的强大工具。事实上,在
2019
年关于前端开发状况的
几次调查中,
We
b
组件是构建微前端应用的最常用的解决方案之一。它们在微前端架构中
发挥着举足轻重的作用,既可以在微前端应用之间共享组件,也可以封装微前端。
1. Web
组件技术
Web
组件由
3
种主要技术组成
,它们可以一起用来创建具有封装能力的自定义元素,因此
可以在任何地方重复使用而不用担心代码冲突。
自定义元素
这是
HTML
组件的一个扩展
,可以让其作为微前端的容器,允许其通过回调或事件等
方式与外部进行交互。此外,还可以配置要暴露的属性,以便按需配置微前端。
shadow DOM
这是一组
JavaScript
API
,用于将一个封装后的
shadow DOM
树附加到一个元素上,与
DOM
分开渲染
。通过这种方式,可以将元素的特性保持为私有状态,这样就可以为
其编写脚本和样式,而不必担心与文档的其他部分发生冲突。 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

AirBnbBlueOriginElectronic ArtsHomeDepotNasdaqRakutenTata Consultancy Services

QuotationMarkO’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.
Julian F.
Head of Cybersecurity
QuotationMarkI wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.
Addison B.
Field Engineer
QuotationMarkI’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.
Amir M.
Data Platform Tech Lead
QuotationMarkI'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
Mark W.
Embedded Software Engineer

You might also like

Python语言及其应用(第2版)

Python语言及其应用(第2版)

Bill Lubanovic

Publisher Resources

ISBN: 9787115595089