使用 Polymer 構建你的前端應用

時間 2019-12-08

標籤使用 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 Imports 等 Web 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

引入 Polymer 核心組件，polymer.html
使用<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>

你能夠在這裏查看Polymer的 API 。框架

使用自定義的 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-elements和paper-elements。

更多功能

Shadow DOM

在Polymer可使用Shadow DOM從模板中分離視圖內容，建立一個使用Shadow DOM的template十分簡單，使用 <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表達式，基礎支持有：

標示符和路徑。好比：foo 、match.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表達式，跟 Angular 的Filter有些相似。詳見

數據綁定

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 官方博客，是團隊小夥伴在開發過程當中的學習與分享，如需轉載，請註明出處與做者哦 !

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。