2021av天堂网手机版,97精品久久久久中文字幕,97免费人妻无码视频

x-tag是一個(gè)小的JavaScript庫(kù)，可以簡(jiǎn)化自定義，可重複使用的HTML元素的創(chuàng)建。它是Web組件套件的一部分，其中還包括陰影DOM，HTML模板和自定義元素。 X-TAG在Web開(kāi)發(fā)中很重要，因?yàn)樗试S開(kāi)發(fā)人員創(chuàng)建自己的HTML元素，封裝其代碼並保持其代碼庫(kù)清潔和可維護(hù)。它還促進(jìn)了代碼重用，它可以大大加快開(kāi)發(fā)過(guò)程。

xtag.register（'my-element'，{

}）;

首頁(yè)

web前端

css教學(xué)

用X-TAG構(gòu)建自定義的Web組件

Christopher Nolan

Feb 23, 2025 am 08:26 AM

Building Custom Web Components with X-Tag

用X-TAG構(gòu)建自定義的Web組件

鑰匙要點(diǎn)

X-TAG提供了一個(gè)緊湊的，功能豐富的接口，用於快速Web組件開(kāi)發(fā)，主要關(guān)注自定義元素API。
> 與聚合物相比，
>

> X-TAG是一個(gè)由Microsoft支持的開(kāi)源，JavaScript庫(kù)，它包裝了W3C標(biāo)準(zhǔn)Web組件API家族，以提供一個(gè)緊湊的，功能豐富的界面，用於快速組件開(kāi)發(fā)。 X-TAG為所有Web組件API（自定義元素，陰影DOM，模板和HTML Imports）提供功能掛鉤，但它僅需要自定義元素支持才能操作。在沒(méi)有本機(jī)自定義元素支持的情況下，X-TAG使用一組與Google聚合物框架共享的多填充。

>換句話說(shuō)，X-TAG是Microsoft對(duì)Google的聚合物是什麼。他們倆唯一常見(jiàn)的是基礎(chǔ)多填充，它可以支持非支撐瀏覽器中的Web組件。

x-tag與聚合物有何不同？聚合物將所有四種Web組件技術(shù)組合在一起，即HTML導(dǎo)入，自定義元素，Shadow DOM和HTML模板中的單個(gè)軟件包。它為開(kāi)發(fā)人員提供了易於使用的API，用於構(gòu)建自定義Web組件。另一方面，X-TAG僅提供自定義元素API來(lái)構(gòu)建自定義Web組件。當(dāng)然，您還可以與X-Tag庫(kù)一起使用其他Web組件API。
> Mozilla項(xiàng)目不是X-Tag嗎？

是的，但是現(xiàn)在不再是。經(jīng)過(guò)一番挖掘，我設(shè)法發(fā)現(xiàn)X-Tag項(xiàng)目的原始開(kāi)發(fā)人員Daniel Buchner曾在Mozilla創(chuàng)建圖書(shū)館時(shí)在Mozilla工作。但是從那以後，他搬到了微軟並繼續(xù)該項(xiàng)目。此外，他是前莫濟(jì)式的幫助，是圖書(shū)館的唯一貢獻(xiàn)者。因此，它現(xiàn)在是一個(gè)由前莫油創(chuàng)立的Microsoft支持的項(xiàng)目。

開(kāi)始使用X-Tag

開(kāi)始

>在本文中，我們將使用X-TAG庫(kù)構(gòu)建自定義元素，以使用以下標(biāo)記嵌入Google Map Street視圖：

<span><span><span><google-map</span> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></span><span><span></google-map</span>></span></span>

自定義元素將具有兩個(gè)屬性，即緯度和經(jīng)度，以指定位置的坐標(biāo)。由於這些屬性是可選的，因此我們還將為每個(gè)屬性分配每個(gè)屬性，以防開(kāi)發(fā)人員未能在標(biāo)記中定義它們。

。

讓我們首先在我們的文檔的中包括x-tag javaScript庫(kù)。

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script</span> src<span>="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</span>></span><span><span></script</span>></span>
</span>  <span><span><span></head</span>></span>
</span>  <span><span><span><body</span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script</span>></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></script</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

>在文檔的中包括x-tag庫(kù)很重要。這樣就可以在渲染引擎遇到我們將在內(nèi)使用的自定義元素標(biāo)記之前完全下載和解析。

定義自定義元素

與聚合物不同，用X-TAG創(chuàng)建自定義元素的過(guò)程完全由JavaScript驅(qū)動(dòng)。 X-TAG庫(kù)提供了許多有用的方法，回調(diào)和屬性，以定義我們?cè)氐淖远x行為。一個(gè)用於創(chuàng)建具有X標(biāo)籤的自定義元素的典型骨架，如下所示：

內(nèi)容 - 通常，自定義元素可能需要一些其他標(biāo)記來(lái)進(jìn)行結(jié)構(gòu)或演示。這接受HTML字符串或多行注字符串，將標(biāo)記註入DOM。

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

>生命週期 - 這包含有用的回調(diào)方法，旨在針對(duì)自定義元素的生命週期中的不同階段。

配件 - 這為訪問(wèn)對(duì)象屬性，設(shè)置器和getters提供了一個(gè)常見(jiàn)的接口，並將它們與相應(yīng)的HTML屬性鏈接在一起。當(dāng)屬性鏈接到getter/setter時(shí)，它們的狀態(tài)始終保持同步。
方法 - 自定義元素可能需要一些自己的獨(dú)特方法來(lái)提供所需的功能。只需將方法對(duì)象添加到頂級(jí)XTAG.REGISTER（）定義對(duì)象，然後在其中包含所有用戶定義的方法。
>
基本思想是使用iframe嵌入Google地圖，並以以下格式指定SRC URL：
>
```
<google-map latitude="40.7553231" longitude="-73.9752458"></google-map>
```
>上面的代碼有效，但我們需要擺脫iframe.src中的硬編碼坐標(biāo)值，而是直接從自定義元素屬性來(lái)源。為此，我們將利用登錄對(duì)象，其中屬性名稱構(gòu)成密鑰。我們通過(guò)聲明屬性來(lái)將它們與HTML屬性鏈接：{}。
然後，我們可以在指定SRC URL時(shí)直接使用這些變量：
```
<!DOCTYPE html>
<html>
 <head>
 
 <script src="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"></script>
 </head>
 <body>
 
 
 <script>
 
 </script>
 </body>
</html>
```
應(yīng)用修飾觸摸
```
xtag.register('google-map', {

 content: '',

 lifecycle: {
 created : function(){ 
 /* Called when the custom element is created */ 
 },
 inserted : function(){ 
 /* Called when the custom element is inserted into the DOM */ 
 },
 removed : function(){ 
 /* Called when the custom element is removed from the DOM */ 
 },
 attributeChanged: function(attrName, oldValue, newValue){
 /* Called when the attribute of the custom element is changed */
 }
 },

 accessors : {},
 methods : {},
 events : {}
});
```
造型自定義元素類似於造型任何其他HTML標(biāo)籤。類，ID和屬性選擇器與自定義元素一起按預(yù)期工作。例如，我們將在新創(chuàng)建的
自定義元素中添加一個(gè)盒子陰影和邊界 - 拉迪烏斯。
>

使用自定義元素現(xiàn)在很簡(jiǎn)單，就像在
中包括以下標(biāo)記：
：
```
https://www.google.com/maps/embed/v1/streetview?key=<API_KEY>&location=<LATITUDE>,<LONGITUDE>
```
最終結(jié)果在下面的Codepen中可見(jiàn)：
>
>請(qǐng)參閱codepen上的sitepoint（@sitepoint）的pen x-tag
```
// Insert your API key here
var API_KEY = <API_KEY>;

xtag.register('google-map', {
 lifecycle: {
 created: function() { 
 var iframe = document.createElement('iframe');
 iframe.width = 600;
 iframe.height = 600;
 iframe.frameBorder = 0;
 iframe.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
 API_KEY + '&location=40.7553231,35.3434';
 this.appendChild(iframe);
 }
 }
});
```
自定義元素。

>儘管瀏覽器對(duì)Web組件的支持有點(diǎn)粗略，但是我們使用X-TAG庫(kù)與Polyfill的演示應(yīng)該在包括IE9及以上在內(nèi)的所有現(xiàn)代瀏覽器上使用。最終想法與聚合物相比，X-TAG提供了更簡(jiǎn)單的API來(lái)理解和實(shí)現(xiàn)自定義元素，這主要是由於聚合物缺乏複雜的功能。如果您打算保持設(shè)置輕巧和靈活，並且對(duì)其他Web組件API沒(méi)有好的用例，那麼X-TAG肯定是該工作的合適候選人。經(jīng)常詢問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）有關(guān)使用x-tag 構(gòu)建自定義Web組件的問(wèn)題
什麼是x-tag，為什麼在Web開(kāi)發(fā)中很重要？

x-tag是一個(gè)小的JavaScript庫(kù)，可以簡(jiǎn)化自定義，可重複使用的HTML元素的創(chuàng)建。它是Web組件套件的一部分，其中還包括陰影DOM，HTML模板和自定義元素。 X-TAG在Web開(kāi)發(fā)中很重要，因?yàn)樗试S開(kāi)發(fā)人員創(chuàng)建自己的HTML元素，封裝其代碼並保持其代碼庫(kù)清潔和可維護(hù)。它還促進(jìn)了代碼重用，它可以大大加快開(kāi)發(fā)過(guò)程。

> x-tag與其他Web組件庫(kù)有何不同？

x-tag是獨(dú)一無(wú)二的，它的簡(jiǎn)單性和易於使用。與其他圖書(shū)館不同，X-Tag不需要任何構(gòu)建步驟或轉(zhuǎn)介，而且足跡很小。它還具有簡(jiǎn)單，直觀的API，可以輕鬆定義自定義元素及其行為。此外，X-TAG與所有現(xiàn)代瀏覽器兼容，可以與其他庫(kù)和框架一起使用。
>我可以與其他JavaScript庫(kù)或框架一起使用X-TAG？它不會(huì)施加任何限製或特定的架構(gòu)模式，因此您可以輕鬆地將其集成到現(xiàn)有項(xiàng)目中。無(wú)論您是使用jQuery，React，Angular還是Vue.js，都可以使用X-TAG創(chuàng)建可以在您的應(yīng)用程序中重複使用的自定義元素。
>如何使用X-定義自定義元素標(biāo)籤？
用X-TAG定義自定義元素很簡(jiǎn)單。您只需調(diào)用XTAG.REGISTER函數(shù)，以自定義元素的名稱和定義其行為的對(duì)像傳遞。該對(duì)象可以包括生命週期方法，登錄器和事件處理程序。這是一個(gè)基本示例：
XTAG.REGISTER（'my-element'，{
> lifeCycle：{ create：function：function（）{ this.textContent ='hello ，world！'' ;
}
}
}）;

> x-tag中的生命週期方法是什麼？生命週期方法是在自定義元素生活的不同階段被調(diào)用的特殊方法。 X-TAG支持四種生命週期方法：創(chuàng)建，插入，刪除和屬性。這些方法允許您在創(chuàng)建元素，添加到DOM，從DOM中刪除或其中一個(gè)屬性更改時(shí)執(zhí)行特定的操作。
>
如何使用X-TAG處理事件？ >
X-TAG提供了一種處理自定義元素事件的簡(jiǎn)單方法。註冊(cè)元素時(shí)，您可以在事件對(duì)像中定義事件處理程序。例如，要處理單擊事件，您將執(zhí)行類似的操作：

xtag.register（'my-element'，{
evest：{ ??> console.log（'element clicked！'）;
}
}
}）;

我可以使用x-tag創(chuàng)建shadow dom元素？

是的，x-tag支持陰影元素的創(chuàng)建。這使您可以封裝元素的樣式和標(biāo)記，使其與文檔的其餘部分分開(kāi)。要?jiǎng)?chuàng)建陰影根，您可以在元素創(chuàng)建的生命週期方法內(nèi)使用this.createshadowroot（）方法。

我如何樣式我的自定義元素？

您只需樣式的自定義元素像其他任何HTML元素一樣，使用CSS。如果您的元素使用Shadow dom，則可以在陰影根內(nèi)包含一個(gè)
>我可以使用X-tag創(chuàng)建自定義表單元素嗎？
是的，是的，x-tag可以是用於創(chuàng)建自定義表單元素。但是，請(qǐng)記住，默認(rèn)情況下，自定義表單元素不會(huì)參與表單提交或約束驗(yàn)證。您將需要為這些功能提供自己的邏輯。

> x-tag是否仍維護(hù)和支持？

> > > > > > > >>
X-TAG無(wú)法積極維護(hù)X-TAG 。最後一個(gè)版本是在2017年。但是，圖書(shū)館穩(wěn)定，仍然可以在項(xiàng)目中使用。如果您遇到任何問(wèn)題或需要新功能，則可能需要自己實(shí)現(xiàn)它們或考慮使用其他庫(kù)。