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
提供幾種方式安裝源碼。java
Bower 安裝,推薦使用此方法安裝。若是您對bower
不熟悉,能夠自行Google
瞭解。若是已經安裝bower
,可使用命令直接安裝:bower install --save Polymer/polymer
git
直接下載zip
包,zip下載地址。github
GitHub Polymer
源碼,Polymer連接。web
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
元素以後,就能夠經過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
。
在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>
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 官方博客,是團隊小夥伴在開發過程當中的學習與分享,如需轉載,請註明出處與做者哦 !