iT邦幫忙

DAY 5
1

你不能不知道的Polymer開發實戰系列 第 5

Polymer 自定HTML標籤-GoogleMap三重奏(上)

今日目標: 動手打造自己專屬的HTML標籤

[線上執行範例] [程式碼]

google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌,分別街道+衛星圖、街道圖、衛星圖 三種方式,使用者操作其中一個地圖都將同步定位顯示到另外兩個地圖。

蠻有趣的,不過想不到什麼情況會用到,純粹拿來當包元件練功吧~XD

HTML標籤

<google-map-x3 latitude="22.605153" longitude="120.301125">
</google-map-x3>

一、使用方式

在html裡面載入platform.js,就可以使用WebComponent。

用 link rel="import" 方式載入 google-map-x3.html 這個元件

使用 <google-map-x3 /> 這個標簽

   <script src="bower_components/platform/platform.js"></script>
   <link rel="import"href="elements/google-map-x3.html">
 

 
   <h1>Google Map三重奏</h1>

   <google-map-x3 latitude="22.605153" longitude="120.301125">
   </google-map-x3>
 

二、了解Polymer元件包裝方式

首先建立一個html檔案,通常該html檔案的名稱就是標籤的名稱。例如今天練功的元件叫做 <google-map-x3> ,所以html檔案的名稱就是 google-map-x3.html,也就是說寫一個元件基本上就是寫一個html檔案

google-map-x3.html 內容結構如下

<link rel='import' ...>  ← 用來載入其他元件

<polymer-element> ← 包裝元件的根結點

 <template>  ← 將取代自定標籤位置放到DOM (Shadow DOM)

   .

   .

   .

 </template>

 <script>

    Polymer('google-map-x3', { ...} ); ← 實作元件的方法與屬性

 </script>

</polymer-element>

<link rel='import' ...> ← 用來載入其他元件

每個自定元件,最少最少都要用link引入 polymer.html 這個最基本的元件,為什麼呢? 看看Polymer原始碼就清楚了 (第10,12行)

原來就是載入 layout.html 用來提供網頁佈局的功能、以及載入 polymer.js ,polymer.js 是什麼? 所以官網那張圖又可以派上用場了

如果自定的元件需要載入javascript的話,也可以直接用 <script src=..>引入使用。

<polymer-element> ← 包裝元件的根結點

一個自定元件的html檔案通常只放一個元件,也就是只會看到一個<polymer-element>標籤,元件就是用 <polymer-element> 標籤來定義。不過html檔案裡面也能同時有多個元件,如果元件有相依性,或許就可以考慮放在一起,那麼一個自定元件的html檔案就會有多個 <polymer-element>標籤。

<template> ← 將取代自定標籤位置放到DOM (Shadow DOM)

在<template>標籤內的html語法,就是將來這自定元件的畫面長相,在真正使用的runtime時,polymer會將自定標籤轉成用template裡面的html代替,並且插入到DOM中自定標籤的肚子裡。不過如果只是這樣,那自定元件所定義的css,不就會影響到使用元件本身的網頁了嗎?

WebComponent的強大,就在於從瀏覽器原生支援方式來實作,所以可以實現完全封裝,這個封裝的方式就叫做 ShadowDOM,我們來看看使用這元件時,HTML DOM的長相

然後補充一下,Polymer的強大,就在於瀏覽器如果還沒支援ShadowDOM,會自動透過platform.js把這問題處理掉。前幾個月Apple將Safari原本支援ShadowDOM拿掉,在HackerNew會引起軒然大波,甚至還有暗黑說法這是因為Apple報復Google Chrome後來不用WebKit,改推出了Blink核心的反擊。哈,離題了,回來看看Shadow DOM,借W3C ShadowDOM的圖來說明一下

Shadom很值得之後找一天好好介紹一下,這裡我們先繼續今天的實戰

<script>

   Polymer('google-map-x3', { ...} ); ← 實作元件的方法與屬性

</script>

呼叫Polymer方法,第一個傳入參數定義目前的元件標籤名字,為了和目前既有的HTML標簽有所區隔,規定自定標籤一定要加上 - 這符號,第二個傳入參數則是定義此元件的方法及屬性。

接下來說明元件完整程式碼

<待續...>

附註

Polymer包裝的元件有很多種說法,例如 WebComponent、Custom Element、HTML標籤、自訂元件在這裡都是指相同的東西


上一篇
Polymer 元件應用
下一篇
Polymer 自定HTML標籤-GoogleMap三重奏(下)
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言