整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

微软新作,ImageBERT虽好,千万级数据集才是亮

微软新作,ImageBERT虽好,千万级数据集才是亮点

锋网导语:本文作者提出了一种新的视觉语言预训练模型ImageBERT,该模型基于Transformer架构,并对视觉-语言联合嵌入进行建模。更为重要的是,作者还从网络上收集了一千万规模的弱监督图像-文本数据集LAIT,这也是当前所有视觉-语言数据集中最大的数据集。在这个数据集的加持下,ImageBERT 模型在MSCOCO和Flickr30k的图像-文本检索任务上获得不错的结果。

继 2018 年谷歌的 BERT 模型获得巨大成功之后,在纯文本之外的任务上也有越来越多的研究人员借鉴了 BERT 的思维,开发出各种语音、视觉、视频融合的 BERT 模型。

雷锋网 AI 科技评论曾专门整理并介绍了多篇将BERT应用到视觉/视频领域的重要论文,其中包括最早的VideoBERT以及随后的ViLBERT、VisualBERT、B2T2、Unicoder-VL、LXMERT、VL-BERT等。其中VL-BERT是由来自中科大、微软亚研院的研究者共同提出的一种新型通用视觉-语言预训练模型。继语言BERT之后,视觉BERT隐隐成为一种新的研究趋势。

近期,来自微软的Bing 多媒体团队在arXiv上也同样发表了一篇将BERT应用到视觉中的论文《ImageBERT: Cross-modal Pre-training with Large-scale Weak-supervised Image-Text Data》

雷锋网提供论文链接:https://arxiv.org/abs/2001.07966v1

在这篇文章中,作者提出了一种新的视觉语言预训练模型ImageBERT,并从网络上收集了一个大型的弱监督图像-文本数据集LAIT,包含了 10M(1千万)的 Text-Image pairs,这也是目前最大的一个数据集。利用ImageBERT模型和LAIT数据集进行预训练,在MSCOCO和Flicker30k上进行文本到图像、图像到文本的检索任务上获得了不错的结果。

2、背景及相关工作

随着Transformer的提出并广泛应用于跨模态研究,近一年以来,各项任务上获得的结果被推向了一个新的“珠穆朗玛峰”。虽然几乎所有最新的工作都是基于Transformer,但这些工作在不同的方面各有不同。

模型架构的维度:

BERT是面向输入为一个或两个句子的 NLP 任务的预训练模型。为了将 BERT 架构应用于跨模态任务中,现在已有诸多处理不同模态的方法。ViLBERT和LXMERT 先分别应用一个单模态Transformer到图像和句子上,之后再采用跨模态Transformer来结合这两种模态。其他工作如VisualBERT, B2T2,Unicoder-VL, VL-BERT, Unified VLP,UNITER等等,则都是将图像和句子串联为Transformer的单个输入。很难说哪个模型架构更好,因为模型的性能非常依赖于指定的场景。

图像视觉标记维度:

最近几乎所有的相关论文都将目标检测模型应用到图像当中,同时将经检测的感兴趣区(ROIs) 用作图像描述符,就如语言标记一般。与使用预训练的检测模型的其他工作不同,VL-BERT 结合了图像-文本联合嵌入网络来共同训练检测网络,同时也将全局图像特征添加到模型训练中。

可以发现,基于区域的图像特征是非常好的图像描述符,它们形成了一系列可直接输入到 Transformer 中的视觉标记。

预训练数据维度:

与可以利用大量自然语言数据的预训练语言模型不同,视觉-语言任务需要高质量的图像描述,而这些图像描述很难免费获得。Conceptual Captions 是最为广泛应用于图像-文本预训练的数据,有 3 百万个图像描述,相对而言比其他的数据集都要大。UNITER 组合了四个数据集(Conceptual Captions,SBU Captions,Visual Genome, MSCOCO),形成了一个960万的训练语料库,并在多个图像-文本跨模态任务上实现了最佳结果。LXMERT将一些VQA训练数据增添到预训练中,并且在VQA任务上也获得了最佳结果。

我们可以发现,数据的质量和大小对于模型训练而言至关重要,研究者们在设计新的模型时应该对此给予更大的关注。

3、数据集收集

基于语言模型的BERT,可以使用无限的自然语言文本,例如BooksCorpus或Wikipedia;与之不同,跨模态的预训练需要大量且高质量的vision-language对。

目前最新的跨模态预训练模型常用的两个数据集分别是:

The Conceptual Captions (CC) dataset:包含了3百万带有描述的图像,这些图像是从网页的Alt-text HTML属性中获取的;

SBU Captions:包含了1百万用户相关标题的图像。

但这些数据集仍然不够大,不足以对具有数亿参数的模型进行预训练(特别是在将来可能还会有更大的模型)。

为此,作者设计了一种弱监督的方法(如下图所示),从Web上收集了一个大规模的图像文本数据集。

弱监督数据收集流程

先是从网络上收集数亿的网页,从中清除掉所有非英语的部分,然后从中收集图片的URLs,并利用HTML 标记和DOM树特征检测出主要图片(丢弃非主要图片,因为它们可能与网页无关)。

随后仅保留宽度和高度均大于300像素的图片,并将一些色情或淫秽内容的图片以及一些非自然的图片丢弃。

针对剩下的图片,将HTML中用户定义元数据(例如Alt、Title属性、图片周围文本等)用作图像的文本描述.

为了确保文字和图片在语义上是相关的,作者利用少量image-text监督数据,训练了一个弱image-text语义模型来预测

LAIT数据集中的样本

4、ImageBERT模型

如上图所示,ImageBERT模型的总体架构和BERT类似,都采用了Transformer作为最基础的架构。不同之处在于将图像视觉的标记和问题标注作为输入。注意其中图像视觉标记是从Faster-RCNN模型提取的ROL特征。

通过一层嵌入层将文本和图像编码成不同的嵌入,然后将嵌入传送到多层双自我注意Transformer中来学习一个跨模态Transformer,从而对视觉区域和文字标记之间的关系进行建模。

1)嵌入建模

整个嵌入建模分为三个部分:语言嵌入、图像嵌入、序列位置和片段嵌入。

在语言嵌入模块中采用了与BERT相似的词预处理方法。具体而言,是用WordPiece方法将句子分成(标记)n个子词{w0,...,wn-1}。一些特殊的标记,例如CLS和SEP也被增添到标记的文本序列里。每个子词标记的最终嵌入是通过组合其原始单词嵌入、分段嵌入和序列位置嵌入来生成的。

与语言嵌入类似,图像嵌入也是通过类似的过程从视觉输入中产生的。用Faster-RCNN从 o RoIs中提取特征(记为{r0,...ro-1}),从图像中提取特征,从而让这两个特征代表视觉内容。检测到的物体对象不仅可以为语言部分提供整个图像的视觉上下文(visual contexts),还可以通过详细的区域信息与特定的术语相关联。另外,还通过将对象相对于全局图像的位置编码成5维向量来向图像嵌入添加位置嵌入。5维向量表示如下:

其中,(xtl,ytl)以及(xbr,ybr)分别代表边界框的左上角和右下角坐标。5维向量中的第五个分向量相对于整个图像的比例面积。

另外,物体特征和位置嵌入都需要通过语言嵌入投影到同一维度。e(i)代表每个图像的RoI。其计算通过加总对象嵌入、分段嵌入、图像位置嵌入以及序列位置嵌入获得。这意味着每个嵌入被投影到一个向量之中,然后用同样的嵌入大小作为Transformer 隐藏层的尺寸,最后采用正则化层。

在序列位置和片段嵌入中,因为没有检测到Rol的顺序,所以其对所有的视觉标记使用固定的虚拟位置,并且将相应的坐标添加到图像嵌入中。

2)多阶段预训练

不同的数据集来源不同,所以其数据集质量也就不同。为了充分利用不同类型的数据集,作者提出了多阶段预训练框架。如下图所示。

其主要思想是先用大规模域外数据训练预先训练好的模型,然后再用小规模域内数据训练。在多阶段预训练中,为了有顺序地利用不同种类的数据集,可以将几个预训练阶段应用到相同的网络结构。

更为具体的,在ImageBERT模型中使用两阶段的预训练策略。第一个阶段使用LAIT数据集,第二个阶段使用其他公共数据集。注意,两个阶段应使用相同的训练策略。

3)预训练任务

在模型预训练过程中,设计了四个任务来对语言信息和视觉内容以及它们之间的交互进行建模。四个任务分别为:掩码语言建模(Masked Language Modeling)、掩码对象分类(Masked Object Classification)、掩码区域特征回归(Masked Region Feature Regression)、图文匹配(Image-Text Matching)。

掩码语言建模简称MLM,在这个任务中的训练过程与BERT类似。并引入了负对数似然率来进行预测,另外预测还基于文本标记和视觉特征之间的交叉注意。

掩码对象分类简称MOC,是掩码语言建模的扩展。与语言模型类似,其对视觉对象标记进行了掩码建模。并以15%的概率对物体对象进行掩码,在标记清零和保留的概率选择上分别为90%和10%。另外,在此任务中,还增加了一个完全的连通层,采用了交叉熵最小化的优化目标,结合语言特征的上下文,引入负对数似然率来进行预测正确的标签。

掩码区域特征回归简称MRFR,与掩码对象分类类似,其也对视觉内容建模,但它在对象特征预测方面做得更精确。顾名思义,该任务目的在于对每个掩码对象的嵌入特征进行回归。在输出特征向量上添加一个完全连通的图层,并将其投影到与汇集的输入RoI对象特征相同的维度,然后应用L2损失函数来进行回归。

值得注意的是,上述三个任务都使用条件掩码,这意味着当输入图像和文本相关时,只计算所有掩码损失。

在图文匹配任务中,其主要目标是学习图文对齐(image-text alignment)。具体而言对于每个训练样本对每个图像随机抽取负句(negative sentences),对每个句子随机抽取负图像(negative images),生成负训练数据。在这个任务中,其用二元分类损失进行优化。

4)微调任务

经过预训练,可以得到一个“训练有素”的语言联合表征模型,接下来需要对图文检索任务模型进行微调和评估,因此本任务包含图像检索和文本检索两个子任务。图像检索目的是给定输入字幕句能够检索正确的图像,而图像文本检索正好相反。经过两个阶段的预训练后,在MSCoCO和Flickr30k数据集上对模型进行了微调,在微调过程中,输入序列的格式与预训练时的格式相同,但对象或单词上没有任何掩码。另外,针对不同的负采样方法提出了两个微调目标:图像到文本和文本到图像。

为了使得提高模型效果,还对三种不同的损失函数进行了实验,这三种损失函数分别为:二元分类损失、多任务分类损失、三元组损失(Triplet loss)。关于这三种微调损失的组合研究,实验部分将做介绍。

5、实验

针对图像-文本检索任务,作者给出了零样本结果来评估预训练模型的质量和经过进一步微调后的结果。下面是在 MSCOCO 和Flickr30k 数据集的不同设置下,对ImageBERT模型和图像检测和文本检索任务上其他最先进的方法进行的比较。

1)评估预训练模型

如前面所提到,模型经过了两次预训练。首先是在 LAIT 数据集上,采用从基于BERT 的模型初始化的参数对模型进行了预训练;然后又在公开数据集(Conceptual Captions, SBU Captions)上对模型进行二次预训练。具体过程和实验设置请参考论文。

在没有微调的情况下,作者在Flickr30k和MSCOCO测试集上对预训练模型进行了评估,如下:

零样本结果如表 1 所示,我们可以发现,ImageBERT预训练模型在MSCOCO 获得了新的最佳结果,但在Flickr30k数据集上却比 UNITER模型的表现稍差。

在微调后,ImageBERT模型获得了有竞争力的结果,相关情况在表2 部分进行说明。值得一提的是,相比于其他仅有一个预训练阶段的方法,这种多阶段的预训练策略在预训练期间学到了更多有用的知识,因而能够有助于下游任务的微调阶段。

2)评估微调模型

在检索任务上微调后的最终结果如表2 所示。我们可以看到,ImageBERT模型在Flickr30k 和 MSCOCO(同时在 1k和 5k的测试集)上都实现了最佳表现,并且超越了所有的其他方法,从而证明了本文所提的面向跨模态联合学习的 LAIT 数据和多阶段预训练策略的有效性。

3)消融实验

作者也在 Flickr3k 数据集上对预训练数据集的不同组合、全局视觉特征的显示、不同的训练任务等进行了消融实验,以进一步研究ImageBERT模型的架构和训练策略。

预训练数据集

作者使用不同数据集的组合来进行预训练实验。结果如表3所示。CC表示的仅在 Conceptual Captions 数据集上进行预训练;SBU 表示仅在 SBU Captions数据集上进行预训练;LAIT+CC+SBU表示使用LAIT, Conceptual Caption 和 SBU Captions的组合数据集进行预训练;LAIT → CC+SBU 表示使用 LAIT 来完成第一阶段的预训练,之后使用 Conceptual Captions和SBU Captions 数据集来做第二阶段的预训练。

可以看到,用多阶段的方法来使用三种不同的域外数据集,获得了比其他方法明显更好的结果。

全局图像特征

值得注意的是,检测的ROIs可能并不包含整个图像的所有信息。因此,作者也尝试将全局图像特征添加到视觉部分。文章使用了三个不同的CNN 模型(DenseNet,Resnet, GoogleNet)从输入图像上提取全局视觉特征,然而却发现并非所有的指标都会提高。结果如表4的第1部分所示。

预训练损失

作者也将由UNITER引起的MRFR损失添加到预训练中,结果在零样本结果上获得略微提高,结果如表4 的第2 部分所示。这意味着增加一个更难的任务来更好地对视觉内容进行建模,有助于视觉文本联合学习。

图像中的目标数量 (RoIs)

为了理解ImageBERT模型的视觉部分的重要性,作者基于不同的目标数量进行了实验。如表4的第4部分所示,ImageBERT模型在目标最少(目标数量与ViLBERT一样)的情况下,在检索任务上并没有获得更好的结果。

可以得出结论,更多的目标确实能够帮助模型实现更好的结果,因为更多的 RoIs 有助于理解图像内容。

微调损失

针对在第4部分所提到的三项损失,作者尝试在微调期间进行不同的组合。如表4的第4 部分所示,模型通过使用二元交叉熵损失(Binary Cross-Entropy Loss),本身就能在图像-文本检索任务上获得最佳的微调结果。

6、评论

据AI科技评论了解,事实上ImageBERT模型与以前的视觉-语言模型(例如ViLBERT、VL-BERT、UNITER、LXMERT等)相比,模型本身区别并不是很大。 但值得重视的是他们收集的一个新的数据集,这个数据集在数量上是目前最大的vision-language数据集;另外他们进行了两步的预训练(首先是在LAIT进行预训练,然后是在Conceptual Caption进行预训练)。

这两点使他们获得了还不错的性能。不过这篇文章仅对图像检索任务进行了测试,而没有进行例如Captioning, VQA, VCR, grounding等视觉-语言任务的实验。 有趣的一点是,这篇文章在一定程度上表明了,预训练中数据集的顺序对性能有很大的影响。

际计算机协会嵌入式网络传感系统旗舰会议(ACM SenSys)“面向多模态大模型物联网数据集”学术研讨会将于2024年11月4日至7日在杭州举行,本次学术研讨会由中国工业互联网研究院、香港科技大学和北京邮电大学共同举办。

ACM SenSys (ACM Conference on Embedded Networked Sensor Systems) 是国际计算机物联网领域顶级会议,具有较大学术影响力,是清华大学计算机学科群推荐学术会议和期刊列表(TH-CPL)A类会议。本次研讨会主题为面向多模态大模型的物联网数据集,主要针对目前大模型在物联网、工业互联网等领域的研究趋势,征集面向物联网、工业互联网数据语料应用的研究论文,旨在推动大模型在云边端侧的应用与发展。

论文经过评审录用后将会收录在ACM论文集(EI检索),优秀论文会被推荐至SCI期刊。欢迎国内外研究人员积极投稿!

论文提交截至日期:2024年9月4日

论文接受通知:2024年10月2日


ACM Sensys 2024:https://sensys.acm.org/2024/

学术研讨会:https://jwwthu.github.io/SenSys2024.html

联系人及电话:刘女士 15725228058

联系邮箱:liuxiaohui@china-aii.com

有些知识点,比如说Web Components, 自己平时根本用不到,如果不刻意学习和了解,自己的知识体系就会产生盲区,可是每个人的知识盲区那么多,扫的过来嘛。对于这一点,我们要抱有积极的心态,少除一个就少一个。可是要扫除的技术盲区那么多,为什么要优先选择扫除它?这一点看个人偏好,没有标准答案。但有一个大方向是确定的,如果想在技术的道路上走得更远,就得不断清除阻碍自己前行的障碍拓宽自己的技术视野。废话不多说了,现在我们进入今天的主题。

Web Components简介

Web Components 是一组标准,用于创建可重用的、封装良好的自定义元素,能够与标准的 HTML 元素无缝集成。Web Components 使开发者能够定义自己的 HTML 标签,这些标签具有独立的样式和行为,从而增强了组件的可复用性和模块化程度。Web Components 由以下三项技术组成:

Custom Elements(自定义元素)

  • 允许开发者定义自己的 HTML 元素,并赋予这些元素自定义的行为。
  • 通过 customElements.define 方法注册自定义元素。
  • 自定义元素具有生命周期回调方法,例如 connectedCallback(挂载)、disconnectedCallback(卸载)、attributeChangedCallback(属性改变) 等。

Shadow DOM(影子 DOM)

  • 提供了一种封装组件内部 DOM 和样式的方法,使其与外部 DOM 和样式隔离。
  • 使用 attachShadow 方法创建一个影子 DOM 根节点。
  • 影子 DOM 内部的样式和结构不会影响外部的 DOM,反之亦然。

HTML Templates(HTML 模板)

  • 提供了一种定义可重用 HTML 结构的方法,这些结构在页面加载时不会立即呈现。
  • 使用 <template> 标签定义模板内容。
  • 模板内容在通过 JavaScript 克隆并插入到 DOM 中。

Web Components使用场景

Web Components技术是一组让开发者能够创建可重用的、封装良好的自定义HTML元素的标准。使开发者能够创建高度复用、独立、封装良好的组件,从而提高开发效率和代码质量。下面是一些典型的场景:

  1. 设计系统和组件库

许多公司和团队使用Web Components来构建设计系统和组件库。这些系统和库允许在不同项目中复用一致的UI组件,从而保持设计的一致性和开发的高效性。如Salesforce的Lightning Web Components、Ionic Framework中的Stencil。

  1. 跨框架组件共享

Web Components可以在不同的前端框架(如React、Angular、Vue)中无缝使用。这使得开发者能够创建独立于框架的组件,从而提高组件的复用性。在一个项目中使用React构建大部分页面,同时使用Web Components构建特定的独立组件,比如日期选择器或地图。

  1. 微前端架构

在微前端架构中,不同团队可以独立开发、部署和维护前端应用的不同部分。Web Components使得这些独立的部分可以以组件的形式集成到一个整体的应用中,而不会互相干扰。如一个电商网站的不同模块(如购物车、支付、用户评论)由不同团队开发,并以Web Components的形式集成。

  1. Web Widgets和插件

Web Components非常适合构建可以嵌入到任意网页中的小部件和插件,比如聊天窗口、表单验证、广告模块等。这些小部件通常需要高度的封装性和独立性,以避免与宿主页面的冲突。如第三方客服聊天窗口、嵌入式视频播放器。

  1. 数据可视化

创建数据可视化组件,如图表、地图、数据表等,这些组件可以独立于具体的应用环境,在不同的项目中重用。如使用D3.js或其他图表库创建的自定义元素,用于显示动态数据图表。

  1. 定制表单控件

构建复杂且可复用的表单控件,如日期选择器、颜色选择器、富文本编辑器等。这些控件可以被封装为自定义元素,便于在不同表单中复用。如一个自定义的富文本编辑器,可以用于博客系统、内容管理系统等多个场景。

  1. Web应用的组件化开发

在开发大型Web应用时,使用Web Components可以实现组件化开发,使得应用结构更清晰,组件更易于测试和维护。如在线文档编辑器中的各种工具栏和编辑器组件,每个都封装为独立的Web Component。

Web Components开发组件示例

模态对话框是Web应用中常见的UI组件,可以用于显示重要的消息、表单或确认对话框。我们通过用web components技术创建一个自定义的模态对话框组件,演示一下web components的使用方法。

1. 定义模板和自定义元素

将模板和自定义元素的定义放在一个JavaScript文件 my-modal.js中。

  • 创建了一个模板 template,其中包含了模态对话框的结构和样式。 注意模板有三个插槽,可以让我们自定义模态框的标题,内容和底部区域。
  • 定义了一个 MyModal 类,继承自 HTMLElement。
  • 在 constructor 中使用 Shadow DOM 绑定模板内容。
  • 实现了打开和关闭模态对话框的方法,以及处理相关的事件。
// my-modal.js
const template=document.createElement('template');
template.innerHTML=`
  <style>
    :host {
      display: block;
    }
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
    }
    .modal.open {
      display: flex;
    }
    .modal-content {
      background: white;
      padding: 20px;
      border-radius: 5px;
      max-width: 500px;
      width: 100%;
    }
    .modal-header,
    .modal-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .modal-footer {
      margin-top: 20px;
    }
    .close-button {
      cursor: pointer;
    }
  </style>
  <div class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <slot name="header">头部</slot>
        <span class="close-button">X</span>
      </div>
      <div class="modal-body">
        <slot name="body">内容区域</slot>
      </div>
      <div class="modal-footer">
        <slot name="footer">
          <button id="close-button">关闭</button>
        </slot>
      </div>
    </div>
  </div>
`;

class MyModal extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.appendChild(template.content.cloneNode(true));

    this.modal=this.shadowRoot.querySelector('.modal');
    this.closeButton=this.shadowRoot.querySelector('.close-button');
    this.footerCloseButton=this.shadowRoot.querySelector('#close-button');

    this.close=this.close.bind(this);
  }

  connectedCallback() {
    if (this.closeButton) {
      this.closeButton.addEventListener('click', this.close);
    }
    if (this.footerCloseButton) {
      this.footerCloseButton.addEventListener('click', this.close);
    }
  }

  disconnectedCallback() {
    if (this.closeButton) {
      this.closeButton.removeEventListener('click', this.close);
    }
    if (this.footerCloseButton) {
      this.footerCloseButton.removeEventListener('click', this.close);
    }
  }

  open() {
    this.modal.classList.add('open');
  }

  close() {
    this.modal.classList.remove('open');
  }
}

customElements.define('my-modal', MyModal);

2. 在 index.html 中引入模板和自定义元素

在HTML文件中通过 <script> 标签引入上述JavaScript文件,并使用自定义的模态对话框组件的插槽功能定制内容。

  • 使用 <script src="my-modal.js" defer></script> 引入自定义元素的定义文件。
  • 使用 <my-modal> 自定义元素,并通过 slot 插槽填充自定义的内容。
  • 使用JavaScript控制按钮的点击事件,调用自定义元素的方法来打开和关闭模态对话框。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modal Component Example</title>
    <script src="my-modal.js" defer></script>
</head>
<body>
    <button id="open-modal-button">Open Modal</button>

    <my-modal id="my-modal">
        <span slot="header">自定义头部</span>
        <p slot="body">自定义内容区域</p>
        <div slot="footer">
            <button id="footer-close-button">关闭按钮</button>
        </div>
    </my-modal>

    <script>
        document.getElementById('open-modal-button').addEventListener('click', ()=> {
            document.getElementById('my-modal').open();
        });

        document.getElementById('footer-close-button').addEventListener('click', ()=> {
            document.getElementById('my-modal').close();
        });
    </script>
</body>
</html>

至此,我们实现了一个功能完整的模态对话框组件,并且能够在不同的页面中复用。

最后

使用web components开发了一个模态框之后,我们发现Web Components的一些不方便之处,比如说template的定义无法单独写在一个html文件中,必须用模版字符串包裹起来,不优雅。另外,我们习惯使用框架组件之后,发现Web Component和原生dom开发一样,不支持响应式数据,api相对繁琐等。这可能是web components不是特别热门的原因。可是有一种场景,特别适合用web components。就是一些很复杂的跨开发框架的组件,比如说日历组件,富文本编辑器,复杂的图标和表单等。总体说来,web components还是有用武之地的。有没有感觉,多了解一项技术,开发的时候就多了一分灵活性,所以说技多不压身。


手把手教你用Web Components开发一个跨框架的模态框
原文链接:https://juejin.cn/post/7371319684842340363