<listing id="5jjfd"><ruby id="5jjfd"><address id="5jjfd"></address></ruby></listing>
<var id="5jjfd"><video id="5jjfd"></video></var>
<var id="5jjfd"><video id="5jjfd"></video></var><menuitem id="5jjfd"><strike id="5jjfd"></strike></menuitem>
<var id="5jjfd"><strike id="5jjfd"><thead id="5jjfd"></thead></strike></var>
<var id="5jjfd"><video id="5jjfd"></video></var>
<ins id="5jjfd"><span id="5jjfd"><cite id="5jjfd"></cite></span></ins><cite id="5jjfd"><video id="5jjfd"><cite id="5jjfd"></cite></video></cite>
<ins id="5jjfd"></ins>
<var id="5jjfd"><video id="5jjfd"></video></var>
<var id="5jjfd"></var>
<var id="5jjfd"><span id="5jjfd"><menuitem id="5jjfd"></menuitem></span></var>
<cite id="5jjfd"><span id="5jjfd"></span></cite>
<var id="5jjfd"><video id="5jjfd"><menuitem id="5jjfd"></menuitem></video></var>
<cite id="5jjfd"></cite>
<var id="5jjfd"></var><var id="5jjfd"><video id="5jjfd"><thead id="5jjfd"></thead></video></var>
<var id="5jjfd"></var>

杭州網站設計:如何使用Web組件創建自己的HTML元素

2019.08.02 mf_web

178

Web組件目前正興奮地被稱為即將到來的“ 網絡開發的構造轉變 ”,承諾永久地重塑網頁設計前景。大型企業正在向前發展,將網絡組件變為現實。Google和Mozilla都已逐步推出原生瀏覽器支持。

你問的網頁組件是什么?杭州網站設計簡而言之,Web組件為您提供了一種創建自己的自定義HTML元素的方法,這些元素可以執行您需要的任何內容。您可以將所有內容整理成漂亮,整潔的小型自定義HTML元素,而不是使用詳細標記,長腳本和重復代碼來加載您的網站。

了解Web組件

了解Web組件如何允許自定義HTML元素的最簡單方法是首先查看我們已經從HTML5中了解的現有元素:<video>標記。使用此元素,您只需幾行代碼即可放置視頻,例如:

您可能只看到上面的幾行HTML,但這里是<video>元素在幕后的真實情況:

默認情況下,瀏覽器隱藏所有詳細的代碼,因此您不需要查看它或擔心在您想要放置視頻時編寫它。你只重擊在你<video>和<source>標簽,你是啟動和運行。 

以前,只有瀏覽器供應商才能以這種方式創建元素。但想象一下,如果您可以將自己的相同方法用于其他類型的內容嗎? 

以圖片幻燈片為例。通常,您需要幾輪帶有特定類名稱的嵌套div來處理幻燈片包裝,包裝每張幻燈片以及添加標題和縮略圖。您還需要通過一些內聯jQuery / JavaScript為幻燈片轉換效果設置任何整體幻燈片選項。

如果你可以跳過所有這些而只是使用:

1
2
3
4
<slide-show transition="fade">
<slide src="slideone.jpg" thumb="slideone_thumb.jpg" caption="Look at this image">
<slide src="slidetwo.jpg" thumb="slidetwo_thumb.jpg" caption="Look at this other image">
</slide-show>

使用Web組件,這正是您可以做的。 

創建自己的HTML元素

如果您想提供一種簡潔,易于與放置內容的方法進行交互,否則這些內容會變得臃腫和笨拙,您可以繼續創建自己的Web組件。

Web組件也可以輕松共享,因此當開發人員加入時,您可以輕松獲取最常見項目要求的預構建Web組件。我們已經看到自由共享的組件從   語音識別中彈出來。 

以  展示建設者 ..

讓我們來看看Web組件幕后的內容。

是什么使Web組件

目前存在的Web組件由四部分組成:

  • 自定義元素

  • 影子DOM

  • 模板

  • HTML導入

自定義元素

自定義元素正是它們聽起來的樣子:可以命名為您選擇的任何元素,并以您想要的任何方式操作。當我以任何方式說什么時,我的意思是。例如,我提出了<x-gangnam-style>元素:

現場演示 - 將鼠標懸停在欄上

自定義元素以最簡單的形式聲明,如下所示:

1
2
3
<element name="x-gangnam-style">
...
</element>

創建自定義元素時,可以從頭開始完成,也可以擴展現有的HTML元素(<button>例如),并為其提供所需的修改功能或演示文稿。

1
2
3
<element name="custom-button" extends="button">
...
</element>

注意:值得指出的是,由于并發癥,該<element>標簽在2013年已被棄用。它可能會產生回報,但與此同時還有polyfill選項,我們將在稍后討論。感謝Addy Osmani  指出這一點!

暗影DOM

Shadow DOM實際上是Web組件工作方式的核心方面。之前,我們查看了HTML5 <video> 元素,并展示了盡管只看到幾行代碼,但實際上默認隱藏了相當多的代碼。隱藏代碼所在的地方稱為“Shadow DOM”。

瀏覽器供應商多年來一直使用這個shadow DOM來本地實現輸入,音頻,視頻等元素。通過Web組件,任何開發人員現在都可以使用它。

一般的想法是你在標記放置期間獲取所有不需要看到的代碼,并在Shadow DOM中隱藏它,這樣它就不會妨礙它。這使您只需處理相關信息,例如使用<video>元素時的高度,寬度和源文件位置。

使用Shadow DOM最酷的事情之一就是每個實例都是它自己的小自包含世界。因此,如果您在元素中包含樣式和腳本,則它們不會意外泄漏并影響頁面上的任何其他內容。 

相反,頁面上其他地方的CSS和JavaScript不會影響您的Web組件,除了您可能專門創建的樣式掛鉤以允許外部CSS定位。所有這一切都意味著不再擔心命名空間的ID和類名以避免沖突。

如果你想看看影子DOM的樣子,那很簡單。確保您正在運行Chrome的最新安裝,打開開發工具,單擊齒輪圖標以打開設置,然后選中標記為顯示用戶代理陰影DOM的框:

然后,當您使用shadow DOM檢查任何元素時,您將看到其完整代碼。通過檢查<x-gangnam-style>帶有和不帶有陰影DOM 的元素來試試:http:  //html5-demos.appspot.com/gangnam

對于影子DOM的完整綱要,請查看:  Shadow DOM簡介

模板

我們已經介紹了自定義元素如何只關注相關信息,而所有剩余代碼都在shadow DOM中被隱藏。Web組件中的模板包含剩余代碼的所有表示元素。

作為定義標記<template>...</template>放置的Web組件的代碼的一部分,在這些標記之間包含組件所需的任何HTML和CSS。

例如,查看創建<x-gangnam-style>Web組件的代碼。它的開始<template>標記位于第4行,其結束</template>標記位于第201行。在這些標記之間,您將看到負責創建定位和動畫的所有CSS,以及放置所涉及的每個圖像的HTML。 

HTML導入

HTML導入允許您采用上述所有內容并實際使其在您的頁面上運行。Web組件在外部HTML文件中定義,因此需要導入該文件才能使自定義元素起作用。HTML導入通過<link>標記來處理,您可以通過標記導入外部CSS文件。

例如,在使用<x-gangnam-style>Web組件之前,您必須導入定義它的HTML文件,如下所示:

1
<link rel="import" href="/components/x-gangnam-style.html">

瀏覽器支持和Polyfill

潛在客戶首先使用它們的想法非常吸引人,但目前瀏覽器支持還不可行。目前的支持狀態如下:

http://jonrimmer.github.io/are-we-componentized-yet/

原生支持正在為Chrome,Opera和Firefox實施,但尚未完成。IE和Safari還沒有公布他們的計劃,但是考慮到大多數  瀏覽器最終將支持Web組件,其他瀏覽器可能會效仿。

現在,如果您想開始使用Web組件,則需要使用其中一個可用的polyfill。好消息是兩個最流行的解決方案是由Google和Mozilla創建的,因此我們可以期待看到與本機支持最終運營方式的一致性。

Google的聚合物

很難不傾向于使用Polymer,  因為Chrome現在是使用最廣泛的瀏覽器,您可能會考慮在開發過程中考慮如何將Google組件代碼編入索引。

Polymer附帶了一個完整的預構建Web組件庫。它包括功能導向的“ 聚合物核心元素 ”和面向設計的“ 紙元素”。

使用Polymer創建自定義元素時,而不是使用<element name="...">您使用  的格式  <polymer-element name="...">。

聚合物將自己描述為處于“開發者預覽”狀態,而不是絕對生產就緒,但他們也說 

...盡管標簽很多人已經在生產中使用聚合物取得了成功。

瀏覽器支持

  • Chrome Android

  • 加納利

  • 火狐

  • IE 10+

  • Safari 6+

  • 移動Safari

如果你需要迎合IE9,估計它占據了  1.9%  到  5.11%  的市場份額,不幸的是你對Polymer來說運氣不好。但是,您仍然可以使用Mozilla的X-Tags。

Mozilla的X-Tags

X-Tags是由Mozilla創建的JavaScript庫,目前,它比Polymer更具優勢,因為它的瀏覽器支持范圍更廣。如果這是您的主要考慮因素,X-Tags可能是您的首選。

瀏覽器支持

  • Firefox 5+桌面和移動

  • Chrome 4+

  • Chrome Android 2.1+

  • Safari 4+桌面和移動設備

  • IE9 +

  • Opera 11+桌面和移動設備

IE8支持

現在,如果您需要支持IE8,那么遺憾的是,Web組件可能不適合您,因為可用的polyfill支持IE9 +。估計IE8用戶大約在2.1%  到3.82%之間,但當然如果你自己的統計數據有所不同,那么你必須對你的瀏覽器支持應該延伸多久做出判斷。

Ember.js和AngularJS組件

您可以準備過渡到使用Web組件的一種可能方法是暫時使用Ember.js或AngularJS  。兩者都有自己的組件創建系統,并且都承諾在完全可用時轉換為利用本機Web組件代碼。

結論

杭州網站設計我希望您喜歡閱讀這些Web組件的概述以及您應該關注的原因!還有很多內容可以深入研究,但是考慮到這些基礎知識,我們有很多機會可以獲得有關實際構建自定義Web組件的教程。你怎么看?在什么情況下你會看到自己使用它們?

關鍵詞

最新案例

聯系電話 400-6065-301

留言

三级黄影片大全性爱视频 - 视频 - 在线播放 - 影视资讯 - 福利社