使用 Polymer 構建你的前端應用

初識

Polymer 是在 Google I/O 2013 發佈的一個新的 Web UI 框架。Polymer的核心原則是 「Everything is an element」。它是一款實用、基於事件驅動、封裝性和互操做性強的 Web UI 開發框架。javascript

在瞭解 Polymer 以前,若是你沒有了解過 Web Components ,推薦去了解下 Web Components 規範。能夠經過 Web Components Wiki瞭解,Polymer 用到的有 Shadom Dom,Custom Elements,HTML ImportsWeb Components 技術。html

安裝 Polymer

Polymer 提供幾種方式安裝源碼。java

  • Bower 安裝,推薦使用此方法安裝。若是您對bower不熟悉,能夠自行Google瞭解。若是已經安裝bower,可使用命令直接安裝:bower install --save Polymer/polymergit

  • 直接下載zip包,zip下載地址github

  • GitHub Polymer源碼,Polymer連接web

構建本身的 Polymer 應用

建立一個 Polymer 元素

Polyer支持建立自定義元素,在外部看來就像其餘的 DOM 元素,可是在內部,提供便利的數據綁定和其餘豐富的功能,使用更加少的代碼,構建複雜的應用。
建立一個新的 Polyer 元素,須要:express

  1. 引入 Polymer 核心組件,polymer.html
  2. 使用<polymer-element>聲明自定義元素

下面例子,將建立一個名字爲 my-element 的元素:數組

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element">
    <template>
        <span>This is element content</span>
    </template>
    <script>
      Polymer({ ready: function() {
        //...
      }})
    </script>
</polymer-element>

Polymer元素主要由倆部分構成,<template><script>,其中<template>Polymer元素的HTML模板,<script>是模板對應的 javascript代碼。
注意到<script>標籤中的Polymer構造方法,Polymer構造方法是一個對document.registerElement的包裝,而且提供一些特殊的功能,好比數據綁定和事件映射,Polymer構造方法接受一個對象參數,定義該元素的prototype
有些 Polymer元素並不須要 javascript 代碼,可使用noscript屬性聲明:瀏覽器

<polymer-element name="my-element" noscript>
...
</polymer-element>

你能夠在這裏查看PolymerAPI框架

使用自定義的 Polymer 元素

定義好本身的 Polymer元素以後,就能夠經過import的方式引入它(經過import引入的文件,即便引入屢次,瀏覽器也只會請求一次。)。在 HTML代碼中引入自定義的元素而且使用它。首先須要引入 webcomponents.js依賴。

<!DOCTYPE html>
<html>
  <head>
    <script src="webcomponents.js"></script>
    <link rel="import" href="/elements/my-element/my-element.html">
  </head>
  <body>
    <my-element></my-element>
  </body>
</html>

遵循Everything is an element的原則,在HTML頁面中,咱們會不多看到須要寫一些 javascript代碼,這樣就使得HTML文件代碼看起來很清爽。

雖然上面例子看起來只有短短几行簡單的代碼,可是Polymer支持建立豐富的可複用的組件,其中Polymer官網就提供許多供使用和學習的基礎組件core-elementspaper-elements

更多功能

Shadow DOM

Polymer可使用Shadow DOM從模板中分離視圖內容,建立一個使用Shadow DOMtemplate十分簡單,使用 <content></content>來選擇須要替換的元素便可。

<polymer-element name="my-element" noscript>
  <template>
    <span>This is content: </span>
      <content select="q"></content>
  </template>
</polymer-element>

使用的時候,只須要在Polymer標籤內部嵌入Light DOM

<my-element>
  <q>Hello World</q> <!--Light DOM-->
</my-element>

佈局屬性

Polymer使用CSS Flexbox定義了一系列基礎佈局樣式。具體能夠點擊這裏查看
只須要簡單的在標籤上引入佈局屬性就能夠輕鬆使用。

<div horizontal layout>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

模板表達式

Polymer支持在模板中使用{{}}執行javascript表達式,基礎支持有:

  • 標示符和路徑。好比:foomatch.set.game
  • 數組訪問。好比:array[i]
  • 非邏輯。好比:!
  • 一元表達式。好比:+i,-a
  • 二進制操做。好比:+,-,*,/,%
  • 比較操做。好比:==,<,>,<=,>=,!=,===,!==
  • 邏輯比較。好比:foo && bar,foo || bar
  • 三元表達式。好比:a ? b : c
  • 分組。好比:(a + b) * (c + d)
  • 字符值(數字、字符,null,undefined)
  • 數組和對象。如:[foo, 1],{id: 1, foo: bar}
  • 函數。如:reverse(my_list)

Polymer 還支持如下表達式:

  • 計算表達式。能夠直接使用相似 {{a + b}}的方式,也可使用以下方式處理比較複雜的計算:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="my-element" >
    <template>
        <span>The result is {{result}}</span>
    </template>
    <script>
      Polymer({
        computed: {
            result: '1 + 100'
        }
      })
    </script>
</polymer-element>
  • 表達式 Scope詳見
  • Filter 表達式。使用{{expression | filterName }}執行 Filter表達式,跟 AngularFilter有些相似。詳見

數據綁定

Polymer 提供多種數據綁定方法。

  • 單模板實例。使用bind屬性綁定一個對象到模板實例,詳見

    <template>
          <template bind="{{person}}">
            He's name is {{name}}.
          </template>
    </template>

    還可使用as爲對象建立一個命名空間:

    <template>
          <template bind="{{person as p}}">
            He's name is {{p.name}}.
          </template>
    </template>
  • 模板迭代。使用repeat屬性迭代,詳見

    <template>
      <template repeat="{{user in users}}">
        {{user.name}}
      </template>
    </template>
  • 條件綁定
    使用if屬性有條件的綁定模板實例:

    <template>
          <template if="{{conditional}}">
             The conditional is true
          </template>
    </template>

Polymer不只提供以上的方式綁定數據,並且提供了不少其餘的方法,使得模板之間的複用十分便利。更多關於數據綁定能夠查看官網API

總結

Polymer擁有許多基礎模板和很強的組件模型。做爲一款還在成長中的Web UI框架,其不少設計思想值得學習和思考。


Coding 是個雲端開發協做平臺,極簡的一站式開發服務包括了項目協做,代碼託管,質量檢測,演示部署,代碼在線閱讀等功能。Coding 官方博客,是團隊小夥伴在開發過程當中的學習與分享,如需轉載,請註明出處與做者哦 !

相關文章
相關標籤/搜索