摘要：Polymer是由原Palm webOS開發Enyo框架的團隊加盟Google后打造的，基于Shadow DOM、Custom Elements、MDV等最新瀏覽器特性，支持Web Components。

今年的Google I/O大會，絕對是一場為開發者所準備的盛會，發布多個軟件產品與服務，并且主要以發布平臺和服務為主，比如讓Android開發者稱贊的Android Studio、推出Google Play Game服務、對地圖進行重大升級等。而在Web平臺領域，Google則發布了最新的Web UI庫Polymer。

Polymer基于Shadow DOM、Custom Elements、MDV等最新瀏覽器特性，代表了下一代Web框架的方向：一切皆組件、盡量減少代碼量、盡量減少框架限制。由加盟Google的原Palm webOS開發團隊打造。

 

架構圖

快速入門

1.把項目拷貝到解決方案的根目錄文件夾中，參考 Get the code。

1
git clone git://github.com/Polymer/polymer.git --recursive
2.啟動Web服務器

3.在主頁面引用polymer.js

1
<script src="Polymer/polymer.js"></script>
4.閱讀開始指南

5.學習如何使用Polymer內核快速搭建Web組件

6.玩轉toolkit-ui示例（必須在Web服務器上運行）

7.加入mailing list，提問并且得到相應地回復。

Polymer內核

Polymer內核代碼由polymer.js這個文件提供，其提供了一個薄層代碼來表示Polymer選項，并且提供了所有組件使用的糖。

  1. 組件聲明

    2. Web組件聲明代碼如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    <element name="tag-name">
    <template>
    <!-- shadow DOM here -->
    </template>
    <script>
    // lifecycle setup here
    </script>
    </element>

    在該組件中添加Polymer.register生命周期來初始化組件的<script>塊，如下所示：

    1
    2
    3
    4
    5
    6
    7
    8
    <font face="Menlo, Monaco, monospace, sans-serif"><element name="tag-name">
      <template>
        <!-- shadow DOM here -->
      </template>
      <script>
        Polymer.register(this);
      </script>
    </element></font>

  2. 元素初始化

    3. 第一個參數Polymer.register是引用到<element>元素里的，因為腳本在element標記里運行，所以參數就設為“this”。

    你可以提供第二個對象參數到Polymer.register里去定義對象原型，在下面的代碼里，該組件初始化了一個message屬性和ready方法。

    1
    2
    3
    4
    5
    6
    Polymer.register(this, {
    message: "Hello!",
    ready: function() {
    // component is ready now, we can do stuff
    }
    });

目前，Polymer還處于初期階段，它和其他框架一樣，盡可能地擁抱HTML。它的目標是通過使用像Custom Elements和Shadow DOM這些新興的Web標準的少量獨立polyfill發展Web平臺。此外，應用于移動平臺也是其中的核心目標之一。Polymer開發團隊正在研究響應式組件，讓其可以正確無誤地在臺式機、平板電腦、手機上進行自動化配置。

當然，Polymer的誕生也意味著Google現在有三個相互競爭的Web應用開發庫：Polymer、Dart（也具有UI開發功能）和AngularJS。

對于Polymer，開發者有哪些話要說呢？讓我們一起來看下：

清風一二兩：Palm webOS用另一種方式重生？

三合一趙：Enyo的Google版~換湯不換藥~

劉晗的微博：在HTML領域離標準太遠自己搞一套，出路不大。特別是像這種綁定機制，貌似理念是MVC，但MVC這種東西做簡單頁面還行。

eldude：聲明性質、封裝、數據綁定、屬性和事件驅動API這些都是數量級的，要比現有JavaScript/HTML UI組件簡單。

neilk：這個框架看起來非常酷，但“built by Google”有點用詞不當，像Closure或Angular、Polymer等這些都Google內部使用的技術，在經過千錘百煉后才像面向公眾，因此稱作 "technologies by Googlers"更為合適。

相關資料

Polymer主頁： http://www.polymer-project.org/

項目主頁上的FAQ描述比較清晰： http://www.polymer-project.org/faq.html 

架構圖： http://www.polymer-project.org/images/architecture-diagram.svg?20130516

GitHub： https://github.com/polymer/polymer 

本文為CSDN編譯整理，未經允許不得轉載，如需轉載請聯系market#csdn.net(#換成@)