2015/01/04

初探Polymer


Polymer是由Google開發的JavaScript Library, 網頁開發者可以使用Polymer建立自訂的HTML元件, 並將CSS及JavaScript封裝於其中, 實現網頁開發的模組化。

由上例可見到自訂的my-ele元件，在網頁瀏覽器中有欄框, 圓角, 陰影...等樣式，但是在網頁瀏覽器中只有簡單的兩行資料。
Polymer支援大部分常用的瀏覽器，要注意的是IE必須使用10以上的版本才支援。請參考： https://www.polymer-project.org/resources/compatibility.html
以下將一步一步介紹如何使用Polymer。

1. 安裝Polymer：

由zip檔安裝Polyer是最簡潔的方式。
下載並解壓縮後，可以看到其中有個bower_components資料夾，裡面即包含了所有需要用到的Polymer程式碼。

2. 建立專案資料夾

建立ㄧ個專案資料夾，放置Polymer以及範例程式。 該資料夾內容如下圖：

bower_components為方才下載的Polymer程式碼。
elements則用來放置自訂的HTML元件。
index.html則為網頁首頁，使用自訂好的HTML元件來呈現網頁。

3. 建立自訂HTML元件

於elements資料夾中建立my-ele.html, 範例如下：
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-ele" noscript>
<template>
<style>
  :host { 
    float:left;
    padding:10px;
    margin:10px;
    box-shadow:2px 2px 2px inset;
    border:5px lightblue solid;
    background-color: lightyellow;
    border-radius:10px;
  }
  ::content name { font-weight:bold; font-size:1.5em; }
  ::content desc { font-style:italic; }
</style>   
<content select="name"></content>
<hr />
<content select="desc"></content>   
</template>
</polymer-element>
首先, 使用link標籤引入Polymer程式碼。接著, 使用polymer-element標籤的name屬性, 定義此自訂的HTML元件的名稱為my-ele (Polymer官方文件提及，自訂的HTML元件名稱必須有"-"符號1)。
而template標籤則用以定義自訂元件的內容及樣式。以下簡單介紹其中的content標籤與style標籤。

content標籤

當其他HTML頁面使用了my-ele標籤時，my-ele元件可以透過content標籤取得其內容，並將資料填入指定的位置，舉例來說：
    <!-- index.html中部分內容 -->
    ...
    <my-ele>                            
        <name>MyNameA</name>        
        <desc>MyDescAAA</desc>      
    </my-ele>
    ...

    <!-- my-ele中部分內容 -->
    ...
    <content select="name"></content> <!-- 內容將填入：MyNameA -->
    <content select="desc"></content> <!-- 內容將填入：MyDescAAA -->
    ...
透過content標籤，可以自訂my-ele真正顯示的內容。

style標籤

而style標籤用以定義元件CSS樣式。此處CSS寫法與一般寫法無異，但只作用於my-ele.html中。此外，還多了幾個選擇器：

::host選擇器

::host選擇器的樣式，將套用至my-ele元件本身。
    <!-- index.html中部分內容 -->
    <my-ele>        <!-- my-ele將套用::host樣式 -->
        <name>...</name>        
        <desc>description...</desc>     
    </my-ele>

::content選擇器

::content選擇器的樣式，將套用至content標籤中。
    <!-- index.html中部分內容 -->
    <my-ele>                            
        <name>...</name>    <!--name標籤將套用::content name樣式 -->
        <desc>description...</desc>     
    </my-ele>

4.使用自訂元件

建立index.html, 並使用my-ele元件，範例如下：
<!DOCTYPE html>
<html>
<head>
    <!-- 載入Polymer -->
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <!-- 載入自訂的HTML元件 -->
    <link rel="import" href="elements/my-ele.html">
</head>
<body>
    <my-ele>  <!-- 自訂的HTML元件 -->
        <name>Myles</name>
        <desc>test test test</desc>
    </my-ele>

    <my-ele>  <!-- 自訂的HTML元件 -->
        <name>Michael</name>
        <desc>123456 123456</desc>
    </my-ele>
</body>
</html>
接著，再以瀏覽器打開index.html即可看到結果。

結語

使用自訂元件將樣式, 內容等細節隱藏封裝，便是Polymer的核心概念。事實上，除了樣式與內容外，Polymer也允許在自訂元件中撰寫script，讓網頁的開發更有彈性。此外，Polymer也提供helper method像是import或是mixin幫助網頁的開發。在眾多的JavaScript Framework中不為失一個好選擇。惟Polymer本質上仍大量使用HTML, CSS與JavaScript，在不熟悉的HTML, CSS, JavaScrip的情況下，使用Polymer開發並無太大助益。

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)