178
Web組件目前正興奮地被稱為即將到來的“ 網絡開發的構造轉變 ”,承諾永久地重塑網頁設計前景。大型企業正在向前發展,將網絡組件變為現實。Google和Mozilla都已逐步推出原生瀏覽器支持。
你問的網頁組件是什么?杭州網站設計簡而言之,Web組件為您提供了一種創建自己的自定義HTML元素的方法,這些元素可以執行您需要的任何內容。您可以將所有內容整理成漂亮,整潔的小型自定義HTML元素,而不是使用詳細標記,長腳本和重復代碼來加載您的網站。
了解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組件,這正是您可以做的。
如果您想提供一種簡潔,易于與放置內容的方法進行交互,否則這些內容會變得臃腫和笨拙,您可以繼續創建自己的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 指出這一點!
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導入允許您采用上述所有內容并實際使其在您的頁面上運行。Web組件在外部HTML文件中定義,因此需要導入該文件才能使自定義元素起作用。HTML導入通過<link>標記來處理,您可以通過標記導入外部CSS文件。
例如,在使用<x-gangnam-style>Web組件之前,您必須導入定義它的HTML文件,如下所示:
1 | <link rel="import" href="/components/x-gangnam-style.html"> |
潛在客戶首先使用它們的想法非常吸引人,但目前瀏覽器支持還不可行。目前的支持狀態如下:
原生支持正在為Chrome,Opera和Firefox實施,但尚未完成。IE和Safari還沒有公布他們的計劃,但是考慮到大多數 瀏覽器最終將支持Web組件,其他瀏覽器可能會效仿。
現在,如果您想開始使用Web組件,則需要使用其中一個可用的polyfill。好消息是兩個最流行的解決方案是由Google和Mozilla創建的,因此我們可以期待看到與本機支持最終運營方式的一致性。
很難不傾向于使用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。
X-Tags是由Mozilla創建的JavaScript庫,目前,它比Polymer更具優勢,因為它的瀏覽器支持范圍更廣。如果這是您的主要考慮因素,X-Tags可能是您的首選。
Firefox 5+桌面和移動
Chrome 4+
Chrome Android 2.1+
Safari 4+桌面和移動設備
IE9 +
Opera 11+桌面和移動設備
現在,如果您需要支持IE8,那么遺憾的是,Web組件可能不適合您,因為可用的polyfill支持IE9 +。估計IE8用戶大約在2.1% 到3.82%之間,但當然如果你自己的統計數據有所不同,那么你必須對你的瀏覽器支持應該延伸多久做出判斷。
您可以準備過渡到使用Web組件的一種可能方法是暫時使用Ember.js或AngularJS 。兩者都有自己的組件創建系統,并且都承諾在完全可用時轉換為利用本機Web組件代碼。
杭州網站設計我希望您喜歡閱讀這些Web組件的概述以及您應該關注的原因!還有很多內容可以深入研究,但是考慮到這些基礎知識,我們有很多機會可以獲得有關實際構建自定義Web組件的教程。你怎么看?在什么情況下你會看到自己使用它們?
關鍵詞
熱門分享
最新文章
2019.09.09
杭州公司網站建設:分析需要緊急修改的網站類型
2019.09.09
杭州高端網站建設:分享網建成功的語句
2019.09.09
網站設計杭州:官方網站對公司有什么影響?
2019.09.09
杭州網站制作公司:公眾對不同顏色的反應如何?
2019.09.09
杭州網站建設代理商:分享不同的網頁導航
2019.09.09
杭州網站推廣公司:分享幾個政變來快速提升主頁的高端視覺感受
2019.09.09
杭州公司網站制作:對企業成立的五個原因的簡單分析
2019.09.09
杭州建設網站:對營銷網站關鍵點的總結
2019.09.09
網站推廣杭州:關注客戶的簡單理論的重要性
2019.09.09
杭州網站優化:對“做網站”的很多誤區和誤解
隨機推薦
2019.07.27
杭州網站制作:如何在企業產品中實現良好的企業用戶體驗
2019.06.28
關于小程序的10個小問題!
2019.07.27
杭州網站建設:用戶體驗設計師應該知道的最佳實踐
2019.07.22
在哪里學習VR(虛擬現實)
2019.07.25
如何制作一個好的原型?你必須知道五個原型特征
2019.01.03
濱江定制網站建設:企業在選擇網頁設計模板時應注意的十件事
2018.11.20
杭州企業網站建設:25個不尋常和有趣的網站
2019.01.02
西湖網站設計建設:互聯網崛起與網站的發展
2018.06.07
杭州網站建站:用戶喜歡什么樣的網站
2019.07.23
Web輔助功能清單