整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
鋒網(wǎng)導(dǎo)語：本文作者提出了一種新的視覺語言預(yù)訓(xùn)練模型ImageBERT，該模型基于Transformer架構(gòu)，并對視覺-語言聯(lián)合嵌入進(jìn)行建模。更為重要的是，作者還從網(wǎng)絡(luò)上收集了一千萬規(guī)模的弱監(jiān)督圖像-文本數(shù)據(jù)集LAIT，這也是當(dāng)前所有視覺-語言數(shù)據(jù)集中最大的數(shù)據(jù)集。在這個數(shù)據(jù)集的加持下，ImageBERT 模型在MSCOCO和Flickr30k的圖像-文本檢索任務(wù)上獲得不錯的結(jié)果。
繼 2018 年谷歌的 BERT 模型獲得巨大成功之后，在純文本之外的任務(wù)上也有越來越多的研究人員借鑒了 BERT 的思維，開發(fā)出各種語音、視覺、視頻融合的 BERT 模型。
雷鋒網(wǎng) AI 科技評論曾專門整理并介紹了多篇將BERT應(yīng)用到視覺/視頻領(lǐng)域的重要論文，其中包括最早的VideoBERT以及隨后的ViLBERT、VisualBERT、B2T2、Unicoder-VL、LXMERT、VL-BERT等。其中VL-BERT是由來自中科大、微軟亞研院的研究者共同提出的一種新型通用視覺-語言預(yù)訓(xùn)練模型。繼語言BERT之后，視覺BERT隱隱成為一種新的研究趨勢。
近期，來自微軟的Bing 多媒體團(tuán)隊(duì)在arXiv上也同樣發(fā)表了一篇將BERT應(yīng)用到視覺中的論文《ImageBERT: Cross-modal Pre-training with Large-scale Weak-supervised Image-Text Data》
雷鋒網(wǎng)提供論文鏈接：https://arxiv.org/abs/2001.07966v1
在這篇文章中，作者提出了一種新的視覺語言預(yù)訓(xùn)練模型ImageBERT，并從網(wǎng)絡(luò)上收集了一個大型的弱監(jiān)督圖像-文本數(shù)據(jù)集LAIT，包含了 10M（1千萬）的 Text-Image pairs，這也是目前最大的一個數(shù)據(jù)集。利用ImageBERT模型和LAIT數(shù)據(jù)集進(jìn)行預(yù)訓(xùn)練，在MSCOCO和Flicker30k上進(jìn)行文本到圖像、圖像到文本的檢索任務(wù)上獲得了不錯的結(jié)果。
隨著Transformer的提出并廣泛應(yīng)用于跨模態(tài)研究，近一年以來，各項(xiàng)任務(wù)上獲得的結(jié)果被推向了一個新的“珠穆朗瑪峰”。雖然幾乎所有最新的工作都是基于Transformer，但這些工作在不同的方面各有不同。
模型架構(gòu)的維度：
BERT是面向輸入為一個或兩個句子的 NLP 任務(wù)的預(yù)訓(xùn)練模型。為了將 BERT 架構(gòu)應(yīng)用于跨模態(tài)任務(wù)中，現(xiàn)在已有諸多處理不同模態(tài)的方法。ViLBERT和LXMERT 先分別應(yīng)用一個單模態(tài)Transformer到圖像和句子上，之后再采用跨模態(tài)Transformer來結(jié)合這兩種模態(tài)。其他工作如VisualBERT， B2T2，Unicoder-VL， VL-BERT， Unified VLP，UNITER等等，則都是將圖像和句子串聯(lián)為Transformer的單個輸入。很難說哪個模型架構(gòu)更好，因?yàn)槟Ｐ偷男阅芊浅Ｒ蕾囉谥付ǖ膱鼍啊?/p>
圖像視覺標(biāo)記維度：
最近幾乎所有的相關(guān)論文都將目標(biāo)檢測模型應(yīng)用到圖像當(dāng)中，同時將經(jīng)檢測的感興趣區(qū)(ROIs) 用作圖像描述符，就如語言標(biāo)記一般。與使用預(yù)訓(xùn)練的檢測模型的其他工作不同，VL-BERT 結(jié)合了圖像-文本聯(lián)合嵌入網(wǎng)絡(luò)來共同訓(xùn)練檢測網(wǎng)絡(luò)，同時也將全局圖像特征添加到模型訓(xùn)練中。
可以發(fā)現(xiàn)，基于區(qū)域的圖像特征是非常好的圖像描述符，它們形成了一系列可直接輸入到 Transformer 中的視覺標(biāo)記。
預(yù)訓(xùn)練數(shù)據(jù)維度：
與可以利用大量自然語言數(shù)據(jù)的預(yù)訓(xùn)練語言模型不同，視覺-語言任務(wù)需要高質(zhì)量的圖像描述，而這些圖像描述很難免費(fèi)獲得。Conceptual Captions 是最為廣泛應(yīng)用于圖像-文本預(yù)訓(xùn)練的數(shù)據(jù)，有 3 百萬個圖像描述，相對而言比其他的數(shù)據(jù)集都要大。UNITER 組合了四個數(shù)據(jù)集（Conceptual Captions，SBU Captions，Visual Genome， MSCOCO），形成了一個960萬的訓(xùn)練語料庫，并在多個圖像-文本跨模態(tài)任務(wù)上實(shí)現(xiàn)了最佳結(jié)果。LXMERT將一些VQA訓(xùn)練數(shù)據(jù)增添到預(yù)訓(xùn)練中，并且在VQA任務(wù)上也獲得了最佳結(jié)果。
我們可以發(fā)現(xiàn)，數(shù)據(jù)的質(zhì)量和大小對于模型訓(xùn)練而言至關(guān)重要，研究者們在設(shè)計新的模型時應(yīng)該對此給予更大的關(guān)注。
基于語言模型的BERT，可以使用無限的自然語言文本，例如BooksCorpus或Wikipedia；與之不同，跨模態(tài)的預(yù)訓(xùn)練需要大量且高質(zhì)量的vision-language對。
目前最新的跨模態(tài)預(yù)訓(xùn)練模型常用的兩個數(shù)據(jù)集分別是：
The Conceptual Captions (CC) dataset：包含了3百萬帶有描述的圖像，這些圖像是從網(wǎng)頁的Alt-text HTML屬性中獲取的；
SBU Captions：包含了1百萬用戶相關(guān)標(biāo)題的圖像。
但這些數(shù)據(jù)集仍然不夠大，不足以對具有數(shù)億參數(shù)的模型進(jìn)行預(yù)訓(xùn)練（特別是在將來可能還會有更大的模型）。
為此，作者設(shè)計了一種弱監(jiān)督的方法（如下圖所示），從Web上收集了一個大規(guī)模的圖像文本數(shù)據(jù)集。
弱監(jiān)督數(shù)據(jù)收集流程
先是從網(wǎng)絡(luò)上收集數(shù)億的網(wǎng)頁，從中清除掉所有非英語的部分，然后從中收集圖片的URLs，并利用HTML 標(biāo)記和DOM樹特征檢測出主要圖片（丟棄非主要圖片，因?yàn)樗鼈兛赡芘c網(wǎng)頁無關(guān)）。
隨后僅保留寬度和高度均大于300像素的圖片，并將一些色情或淫穢內(nèi)容的圖片以及一些非自然的圖片丟棄。
針對剩下的圖片，將HTML中用戶定義元數(shù)據(jù)（例如Alt、Title屬性、圖片周圍文本等）用作圖像的文本描述.
為了確保文字和圖片在語義上是相關(guān)的，作者利用少量image-text監(jiān)督數(shù)據(jù)，訓(xùn)練了一個弱image-text語義模型來預(yù)測
LAIT數(shù)據(jù)集中的樣本
如上圖所示，ImageBERT模型的總體架構(gòu)和BERT類似，都采用了Transformer作為最基礎(chǔ)的架構(gòu)。不同之處在于將圖像視覺的標(biāo)記和問題標(biāo)注作為輸入。注意其中圖像視覺標(biāo)記是從Faster-RCNN模型提取的ROL特征。
通過一層嵌入層將文本和圖像編碼成不同的嵌入，然后將嵌入傳送到多層雙自我注意Transformer中來學(xué)習(xí)一個跨模態(tài)Transformer，從而對視覺區(qū)域和文字標(biāo)記之間的關(guān)系進(jìn)行建模。
1）嵌入建模
整個嵌入建模分為三個部分：語言嵌入、圖像嵌入、序列位置和片段嵌入。
在語言嵌入模塊中采用了與BERT相似的詞預(yù)處理方法。具體而言，是用WordPiece方法將句子分成（標(biāo)記）n個子詞{w0,...,wn-1}。一些特殊的標(biāo)記，例如CLS和SEP也被增添到標(biāo)記的文本序列里。每個子詞標(biāo)記的最終嵌入是通過組合其原始單詞嵌入、分段嵌入和序列位置嵌入來生成的。
與語言嵌入類似，圖像嵌入也是通過類似的過程從視覺輸入中產(chǎn)生的。用Faster-RCNN從 o RoIs中提取特征（記為{r0,...ro-1}），從圖像中提取特征，從而讓這兩個特征代表視覺內(nèi)容。檢測到的物體對象不僅可以為語言部分提供整個圖像的視覺上下文（visual contexts），還可以通過詳細(xì)的區(qū)域信息與特定的術(shù)語相關(guān)聯(lián)。另外，還通過將對象相對于全局圖像的位置編碼成5維向量來向圖像嵌入添加位置嵌入。5維向量表示如下：
其中，(xtl,ytl)以及(xbr,ybr)分別代表邊界框的左上角和右下角坐標(biāo)。5維向量中的第五個分向量相對于整個圖像的比例面積。
另外，物體特征和位置嵌入都需要通過語言嵌入投影到同一維度。e(i)代表每個圖像的RoI。其計算通過加總對象嵌入、分段嵌入、圖像位置嵌入以及序列位置嵌入獲得。這意味著每個嵌入被投影到一個向量之中，然后用同樣的嵌入大小作為Transformer 隱藏層的尺寸，最后采用正則化層。
在序列位置和片段嵌入中，因?yàn)闆]有檢測到Rol的順序，所以其對所有的視覺標(biāo)記使用固定的虛擬位置，并且將相應(yīng)的坐標(biāo)添加到圖像嵌入中。
2）多階段預(yù)訓(xùn)練
不同的數(shù)據(jù)集來源不同，所以其數(shù)據(jù)集質(zhì)量也就不同。為了充分利用不同類型的數(shù)據(jù)集，作者提出了多階段預(yù)訓(xùn)練框架。如下圖所示。
其主要思想是先用大規(guī)模域外數(shù)據(jù)訓(xùn)練預(yù)先訓(xùn)練好的模型，然后再用小規(guī)模域內(nèi)數(shù)據(jù)訓(xùn)練。在多階段預(yù)訓(xùn)練中，為了有順序地利用不同種類的數(shù)據(jù)集，可以將幾個預(yù)訓(xùn)練階段應(yīng)用到相同的網(wǎng)絡(luò)結(jié)構(gòu)。
更為具體的，在ImageBERT模型中使用兩階段的預(yù)訓(xùn)練策略。第一個階段使用LAIT數(shù)據(jù)集，第二個階段使用其他公共數(shù)據(jù)集。注意，兩個階段應(yīng)使用相同的訓(xùn)練策略。
3）預(yù)訓(xùn)練任務(wù)
在模型預(yù)訓(xùn)練過程中，設(shè)計了四個任務(wù)來對語言信息和視覺內(nèi)容以及它們之間的交互進(jìn)行建模。四個任務(wù)分別為：掩碼語言建模（Masked Language Modeling）、掩碼對象分類（Masked Object Classification）、掩碼區(qū)域特征回歸（Masked Region Feature Regression）、圖文匹配（Image-Text Matching）。
掩碼語言建模簡稱MLM，在這個任務(wù)中的訓(xùn)練過程與BERT類似。并引入了負(fù)對數(shù)似然率來進(jìn)行預(yù)測，另外預(yù)測還基于文本標(biāo)記和視覺特征之間的交叉注意。
掩碼對象分類簡稱MOC，是掩碼語言建模的擴(kuò)展。與語言模型類似，其對視覺對象標(biāo)記進(jìn)行了掩碼建模。并以15%的概率對物體對象進(jìn)行掩碼，在標(biāo)記清零和保留的概率選擇上分別為90%和10%。另外，在此任務(wù)中，還增加了一個完全的連通層，采用了交叉熵最小化的優(yōu)化目標(biāo)，結(jié)合語言特征的上下文，引入負(fù)對數(shù)似然率來進(jìn)行預(yù)測正確的標(biāo)簽。
掩碼區(qū)域特征回歸簡稱MRFR，與掩碼對象分類類似，其也對視覺內(nèi)容建模，但它在對象特征預(yù)測方面做得更精確。顧名思義，該任務(wù)目的在于對每個掩碼對象的嵌入特征進(jìn)行回歸。在輸出特征向量上添加一個完全連通的圖層，并將其投影到與匯集的輸入RoI對象特征相同的維度，然后應(yīng)用L2損失函數(shù)來進(jìn)行回歸。
值得注意的是，上述三個任務(wù)都使用條件掩碼，這意味著當(dāng)輸入圖像和文本相關(guān)時，只計算所有掩碼損失。
在圖文匹配任務(wù)中，其主要目標(biāo)是學(xué)習(xí)圖文對齊（image-text alignment）。具體而言對于每個訓(xùn)練樣本對每個圖像隨機(jī)抽取負(fù)句（negative sentences），對每個句子隨機(jī)抽取負(fù)圖像（negative images），生成負(fù)訓(xùn)練數(shù)據(jù)。在這個任務(wù)中，其用二元分類損失進(jìn)行優(yōu)化。
4）微調(diào)任務(wù)
經(jīng)過預(yù)訓(xùn)練，可以得到一個“訓(xùn)練有素”的語言聯(lián)合表征模型，接下來需要對圖文檢索任務(wù)模型進(jìn)行微調(diào)和評估，因此本任務(wù)包含圖像檢索和文本檢索兩個子任務(wù)。圖像檢索目的是給定輸入字幕句能夠檢索正確的圖像，而圖像文本檢索正好相反。經(jīng)過兩個階段的預(yù)訓(xùn)練后，在MSCoCO和Flickr30k數(shù)據(jù)集上對模型進(jìn)行了微調(diào)，在微調(diào)過程中，輸入序列的格式與預(yù)訓(xùn)練時的格式相同，但對象或單詞上沒有任何掩碼。另外，針對不同的負(fù)采樣方法提出了兩個微調(diào)目標(biāo)：圖像到文本和文本到圖像。
為了使得提高模型效果，還對三種不同的損失函數(shù)進(jìn)行了實(shí)驗(yàn)，這三種損失函數(shù)分別為：二元分類損失、多任務(wù)分類損失、三元組損失（Triplet loss）。關(guān)于這三種微調(diào)損失的組合研究，實(shí)驗(yàn)部分將做介紹。
針對圖像-文本檢索任務(wù)，作者給出了零樣本結(jié)果來評估預(yù)訓(xùn)練模型的質(zhì)量和經(jīng)過進(jìn)一步微調(diào)后的結(jié)果。下面是在 MSCOCO 和Flickr30k 數(shù)據(jù)集的不同設(shè)置下，對ImageBERT模型和圖像檢測和文本檢索任務(wù)上其他最先進(jìn)的方法進(jìn)行的比較。
1）評估預(yù)訓(xùn)練模型
如前面所提到，模型經(jīng)過了兩次預(yù)訓(xùn)練。首先是在 LAIT 數(shù)據(jù)集上，采用從基于BERT 的模型初始化的參數(shù)對模型進(jìn)行了預(yù)訓(xùn)練；然后又在公開數(shù)據(jù)集（Conceptual Captions， SBU Captions）上對模型進(jìn)行二次預(yù)訓(xùn)練。具體過程和實(shí)驗(yàn)設(shè)置請參考論文。
在沒有微調(diào)的情況下，作者在Flickr30k和MSCOCO測試集上對預(yù)訓(xùn)練模型進(jìn)行了評估，如下：
零樣本結(jié)果如表 1 所示，我們可以發(fā)現(xiàn)，ImageBERT預(yù)訓(xùn)練模型在MSCOCO 獲得了新的最佳結(jié)果，但在Flickr30k數(shù)據(jù)集上卻比 UNITER模型的表現(xiàn)稍差。
在微調(diào)后，ImageBERT模型獲得了有競爭力的結(jié)果，相關(guān)情況在表2 部分進(jìn)行說明。值得一提的是，相比于其他僅有一個預(yù)訓(xùn)練階段的方法，這種多階段的預(yù)訓(xùn)練策略在預(yù)訓(xùn)練期間學(xué)到了更多有用的知識，因而能夠有助于下游任務(wù)的微調(diào)階段。
2）評估微調(diào)模型
在檢索任務(wù)上微調(diào)后的最終結(jié)果如表2 所示。我們可以看到，ImageBERT模型在Flickr30k 和 MSCOCO（同時在 1k和 5k的測試集）上都實(shí)現(xiàn)了最佳表現(xiàn)，并且超越了所有的其他方法，從而證明了本文所提的面向跨模態(tài)聯(lián)合學(xué)習(xí)的 LAIT 數(shù)據(jù)和多階段預(yù)訓(xùn)練策略的有效性。
3）消融實(shí)驗(yàn)
作者也在 Flickr3k 數(shù)據(jù)集上對預(yù)訓(xùn)練數(shù)據(jù)集的不同組合、全局視覺特征的顯示、不同的訓(xùn)練任務(wù)等進(jìn)行了消融實(shí)驗(yàn)，以進(jìn)一步研究ImageBERT模型的架構(gòu)和訓(xùn)練策略。
預(yù)訓(xùn)練數(shù)據(jù)集
作者使用不同數(shù)據(jù)集的組合來進(jìn)行預(yù)訓(xùn)練實(shí)驗(yàn)。結(jié)果如表3所示。CC表示的僅在 Conceptual Captions 數(shù)據(jù)集上進(jìn)行預(yù)訓(xùn)練；SBU 表示僅在 SBU Captions數(shù)據(jù)集上進(jìn)行預(yù)訓(xùn)練；LAIT+CC+SBU表示使用LAIT, Conceptual Caption 和 SBU Captions的組合數(shù)據(jù)集進(jìn)行預(yù)訓(xùn)練；LAIT → CC+SBU 表示使用 LAIT 來完成第一階段的預(yù)訓(xùn)練，之后使用 Conceptual Captions和SBU Captions 數(shù)據(jù)集來做第二階段的預(yù)訓(xùn)練。
可以看到，用多階段的方法來使用三種不同的域外數(shù)據(jù)集，獲得了比其他方法明顯更好的結(jié)果。
全局圖像特征
值得注意的是，檢測的ROIs可能并不包含整個圖像的所有信息。因此，作者也嘗試將全局圖像特征添加到視覺部分。文章使用了三個不同的CNN 模型（DenseNet，Resnet， GoogleNet）從輸入圖像上提取全局視覺特征，然而卻發(fā)現(xiàn)并非所有的指標(biāo)都會提高。結(jié)果如表4的第1部分所示。
預(yù)訓(xùn)練損失
作者也將由UNITER引起的MRFR損失添加到預(yù)訓(xùn)練中，結(jié)果在零樣本結(jié)果上獲得略微提高，結(jié)果如表4 的第2 部分所示。這意味著增加一個更難的任務(wù)來更好地對視覺內(nèi)容進(jìn)行建模，有助于視覺文本聯(lián)合學(xué)習(xí)。
圖像中的目標(biāo)數(shù)量 (RoIs)
為了理解ImageBERT模型的視覺部分的重要性，作者基于不同的目標(biāo)數(shù)量進(jìn)行了實(shí)驗(yàn)。如表4的第4部分所示，ImageBERT模型在目標(biāo)最少（目標(biāo)數(shù)量與ViLBERT一樣）的情況下，在檢索任務(wù)上并沒有獲得更好的結(jié)果。
可以得出結(jié)論，更多的目標(biāo)確實(shí)能夠幫助模型實(shí)現(xiàn)更好的結(jié)果，因?yàn)楦嗟?RoIs 有助于理解圖像內(nèi)容。
微調(diào)損失
針對在第4部分所提到的三項(xiàng)損失，作者嘗試在微調(diào)期間進(jìn)行不同的組合。如表4的第4 部分所示，模型通過使用二元交叉熵?fù)p失（Binary Cross-Entropy Loss），本身就能在圖像-文本檢索任務(wù)上獲得最佳的微調(diào)結(jié)果。
據(jù)AI科技評論了解，事實(shí)上ImageBERT模型與以前的視覺-語言模型（例如ViLBERT、VL-BERT、UNITER、LXMERT等）相比，模型本身區(qū)別并不是很大。 但值得重視的是他們收集的一個新的數(shù)據(jù)集，這個數(shù)據(jù)集在數(shù)量上是目前最大的vision-language數(shù)據(jù)集；另外他們進(jìn)行了兩步的預(yù)訓(xùn)練（首先是在LAIT進(jìn)行預(yù)訓(xùn)練，然后是在Conceptual Caption進(jìn)行預(yù)訓(xùn)練）。
這兩點(diǎn)使他們獲得了還不錯的性能。不過這篇文章僅對圖像檢索任務(wù)進(jìn)行了測試，而沒有進(jìn)行例如Captioning, VQA, VCR, grounding等視覺-語言任務(wù)的實(shí)驗(yàn)。 有趣的一點(diǎn)是，這篇文章在一定程度上表明了，預(yù)訓(xùn)練中數(shù)據(jù)集的順序?qū)π阅苡泻艽蟮挠绊憽?/p>
際計算機(jī)協(xié)會嵌入式網(wǎng)絡(luò)傳感系統(tǒng)旗艦會議(ACM SenSys)“面向多模態(tài)大模型物聯(lián)網(wǎng)數(shù)據(jù)集”學(xué)術(shù)研討會將于2024年11月4日至7日在杭州舉行，本次學(xué)術(shù)研討會由中國工業(yè)互聯(lián)網(wǎng)研究院、香港科技大學(xué)和北京郵電大學(xué)共同舉辦。
ACM SenSys (ACM Conference on Embedded Networked Sensor Systems) 是國際計算機(jī)物聯(lián)網(wǎng)領(lǐng)域頂級會議，具有較大學(xué)術(shù)影響力，是清華大學(xué)計算機(jī)學(xué)科群推薦學(xué)術(shù)會議和期刊列表（TH-CPL）A類會議。本次研討會主題為面向多模態(tài)大模型的物聯(lián)網(wǎng)數(shù)據(jù)集，主要針對目前大模型在物聯(lián)網(wǎng)、工業(yè)互聯(lián)網(wǎng)等領(lǐng)域的研究趨勢，征集面向物聯(lián)網(wǎng)、工業(yè)互聯(lián)網(wǎng)數(shù)據(jù)語料應(yīng)用的研究論文，旨在推動大模型在云邊端側(cè)的應(yīng)用與發(fā)展。
論文經(jīng)過評審錄用后將會收錄在ACM論文集（EI檢索），優(yōu)秀論文會被推薦至SCI期刊。歡迎國內(nèi)外研究人員積極投稿!
論文提交截至日期：2024年9月4日
論文接受通知：2024年10月2日
ACM Sensys 2024：https://sensys.acm.org/2024/
學(xué)術(shù)研討會：https://jwwthu.github.io/SenSys2024.html
聯(lián)系人及電話：劉女士 15725228058
聯(lián)系郵箱：liuxiaohui@china-aii.com
有些知識點(diǎn)，比如說Web Components, 自己平時根本用不到，如果不刻意學(xué)習(xí)和了解，自己的知識體系就會產(chǎn)生盲區(qū)，可是每個人的知識盲區(qū)那么多，掃的過來嘛。對于這一點(diǎn)，我們要抱有積極的心態(tài)，少除一個就少一個。可是要掃除的技術(shù)盲區(qū)那么多，為什么要優(yōu)先選擇掃除它？這一點(diǎn)看個人偏好，沒有標(biāo)準(zhǔn)答案。但有一個大方向是確定的，如果想在技術(shù)的道路上走得更遠(yuǎn)，就得不斷清除阻礙自己前行的障礙拓寬自己的技術(shù)視野。廢話不多說了，現(xiàn)在我們進(jìn)入今天的主題。
Web Components 是一組標(biāo)準(zhǔn)，用于創(chuàng)建可重用的、封裝良好的自定義元素，能夠與標(biāo)準(zhǔn)的 HTML 元素?zé)o縫集成。Web Components 使開發(fā)者能夠定義自己的 HTML 標(biāo)簽，這些標(biāo)簽具有獨(dú)立的樣式和行為，從而增強(qiáng)了組件的可復(fù)用性和模塊化程度。Web Components 由以下三項(xiàng)技術(shù)組成：
Custom Elements（自定義元素） ：
Shadow DOM（影子 DOM） ：
HTML Templates（HTML 模板） ：
Web Components技術(shù)是一組讓開發(fā)者能夠創(chuàng)建可重用的、封裝良好的自定義HTML元素的標(biāo)準(zhǔn)。使開發(fā)者能夠創(chuàng)建高度復(fù)用、獨(dú)立、封裝良好的組件，從而提高開發(fā)效率和代碼質(zhì)量。下面是一些典型的場景：
許多公司和團(tuán)隊(duì)使用Web Components來構(gòu)建設(shè)計系統(tǒng)和組件庫。這些系統(tǒng)和庫允許在不同項(xiàng)目中復(fù)用一致的UI組件，從而保持設(shè)計的一致性和開發(fā)的高效性。如Salesforce的Lightning Web Components、Ionic Framework中的Stencil。
Web Components可以在不同的前端框架（如React、Angular、Vue）中無縫使用。這使得開發(fā)者能夠創(chuàng)建獨(dú)立于框架的組件，從而提高組件的復(fù)用性。在一個項(xiàng)目中使用React構(gòu)建大部分頁面，同時使用Web Components構(gòu)建特定的獨(dú)立組件，比如日期選擇器或地圖。
在微前端架構(gòu)中，不同團(tuán)隊(duì)可以獨(dú)立開發(fā)、部署和維護(hù)前端應(yīng)用的不同部分。Web Components使得這些獨(dú)立的部分可以以組件的形式集成到一個整體的應(yīng)用中，而不會互相干擾。如一個電商網(wǎng)站的不同模塊（如購物車、支付、用戶評論）由不同團(tuán)隊(duì)開發(fā)，并以Web Components的形式集成。
Web Components非常適合構(gòu)建可以嵌入到任意網(wǎng)頁中的小部件和插件，比如聊天窗口、表單驗(yàn)證、廣告模塊等。這些小部件通常需要高度的封裝性和獨(dú)立性，以避免與宿主頁面的沖突。如第三方客服聊天窗口、嵌入式視頻播放器。
創(chuàng)建數(shù)據(jù)可視化組件，如圖表、地圖、數(shù)據(jù)表等，這些組件可以獨(dú)立于具體的應(yīng)用環(huán)境，在不同的項(xiàng)目中重用。如使用D3.js或其他圖表庫創(chuàng)建的自定義元素，用于顯示動態(tài)數(shù)據(jù)圖表。
構(gòu)建復(fù)雜且可復(fù)用的表單控件，如日期選擇器、顏色選擇器、富文本編輯器等。這些控件可以被封裝為自定義元素，便于在不同表單中復(fù)用。如一個自定義的富文本編輯器，可以用于博客系統(tǒng)、內(nèi)容管理系統(tǒng)等多個場景。
在開發(fā)大型Web應(yīng)用時，使用Web Components可以實(shí)現(xiàn)組件化開發(fā)，使得應(yīng)用結(jié)構(gòu)更清晰，組件更易于測試和維護(hù)。如在線文檔編輯器中的各種工具欄和編輯器組件，每個都封裝為獨(dú)立的Web Component。
模態(tài)對話框是Web應(yīng)用中常見的UI組件，可以用于顯示重要的消息、表單或確認(rèn)對話框。我們通過用web components技術(shù)創(chuàng)建一個自定義的模態(tài)對話框組件，演示一下web components的使用方法。
將模板和自定義元素的定義放在一個JavaScript文件 my-modal.js中。
// 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">內(nèi)容區(qū)域</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button id="close-button">關(guān)閉</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);在HTML文件中通過 <script> 標(biāo)簽引入上述JavaScript文件，并使用自定義的模態(tài)對話框組件的插槽功能定制內(nèi)容。
<!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">自定義內(nèi)容區(qū)域</p>
<div slot="footer">
<button id="footer-close-button">關(guān)閉按鈕</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>至此，我們實(shí)現(xiàn)了一個功能完整的模態(tài)對話框組件，并且能夠在不同的頁面中復(fù)用。
使用web components開發(fā)了一個模態(tài)框之后，我們發(fā)現(xiàn)Web Components的一些不方便之處，比如說template的定義無法單獨(dú)寫在一個html文件中，必須用模版字符串包裹起來，不優(yōu)雅。另外，我們習(xí)慣使用框架組件之后，發(fā)現(xiàn)Web Component和原生dom開發(fā)一樣，不支持響應(yīng)式數(shù)據(jù)，api相對繁瑣等。這可能是web components不是特別熱門的原因。可是有一種場景，特別適合用web components。就是一些很復(fù)雜的跨開發(fā)框架的組件，比如說日歷組件，富文本編輯器，復(fù)雜的圖標(biāo)和表單等。總體說來，web components還是有用武之地的。有沒有感覺，多了解一項(xiàng)技術(shù)，開發(fā)的時候就多了一分靈活性，所以說技多不壓身。
手把手教你用Web Components開發(fā)一個跨框架的模態(tài)框
原文鏈接：https://juejin.cn/post/7371319684842340363
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
