Polymer 1.0 升級指南

在最近結束的 Google IO 2015，Google 釋出了期待已久的 Polymer 1.0，並宣佈可用於生產環境，使用 Polymer 庫的人們還在使用開發預覽版，本文將做為一個指南，指導將現在應用遷移到 Polymer最新版本。

關於 v1.0 一些重要的注意事項：

1. 它不相容 version 0.5，上一個版本和存活至今的最老版本。
2. 新版主要關注效能和效率，庫的總量大幅縮減。
3. 從底層徹底重建之後，開發人員可以使用它更容易更快地設計自定義元素，更像是標準的 DOM 元素。
4. 與上一個版本相比內部基準測試顯示 v1.0 在 Chrome 上快 3 倍，在 Safari 上快 4 倍。

安裝最新版本 Polymer 的步驟與這篇文章中的完全相同，如果想升級已安裝的 Polymer，定位到 Polymer 的目錄並在終端中執行下面的命令：

$ bower update

要知道非常重要的一點，這個操作會破壞現有的 Polymer 應用，就像之前提到的，兩個不同版本的 Polymer 是互不相容的。因此，建議在一個單獨的目錄下安裝全新的 Polymer。為解釋自 v0.5 版本以來的變化，我們引用我之前寫在 SitePoint 上的文章裡關於信用卡圖表自定義元素的例子來展示兩個版本間的不同。

Polyfilling 不支援瀏覽器

新版本的 Polymer 不再需要包含在 webcomponents.js 庫裡面的 shadow DOM 的 polyfill，取而代之的是使用一個更小的叫 webcomponents-lite.js 的庫來 polyfill 舊的瀏覽器。

0.5版本：

<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>

1.0版本

<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

這個”輕量級”的版本較之前的內容增加大約 80kb，當遇到效能瓶頸的時候這些改變將變得非常有意義。

定義自定義元素

<polymer-element>;標籤已被儲存自定義元素規定的<dom-module>標籤所替換。自定義的元素現在由<dom-module>標籤的 id 屬性標識。自定義元素的規則仍然不變。

0.5版本：

<polymer-element name="credit-card">
  ...
</polymer-element>

1.0版本：

<dom-module id="credit-card">
  ...
</dom-module>

註冊自定義元素

在此之前，我們可以通過簡單的呼叫 Polymer()建構函式註冊自定義元素。如果<script>標籤在<polymer-element>標籤中，指定自定義元素名稱是可選的。在這個版本中，自定義元素現在可以在原始碼中使用關鍵詞 is 來註冊。

0.5版本：

Polymer('credit-card', {});

1.0版本：

Polymer({
  is: 'credit-card'
});

is 的值必須與自定義元素的 <dom-module> 標籤的 id 屬性相匹配，這一點與以前的版本不同，它是不可選的。
<script>標籤可以被放在 <dom-module> 元素的內部或者外部，但 <dom-module> 元素的模板必須在呼叫 Polymer constructor 之前解析。

自定義元素屬性

任何屬於<polymer-element>標籤的現在都應該根據資料型別定義為 properties 物件。

版本0.5：

<polymer-element name='credit-card' attributes='amount'>

版本1.0：

Polymer({
  is: 'credit-card',
  properties: {
    amount: {
      type: Number
    }
  }

自定義元素樣式

現在元素樣式定義在<template>標籤外邊。

版本0.5:

<polymer-element name="credit-card" attributes="amount">
  <template>
    <style>
      ...
    </style>
  </template>
</polymer-element>

版本1.0：

<dom-module id="credit-card">
  <style>
    ...
  </style>

  <template>
    ...
  </template>
</dom-module>

外部樣式表支援使用 HTML Imports。

資料繫結

Polymer 1.0 版本提供了二種型別的資料繫結：

• 二對中括號建立一個單向繫結。資料流是向下的，宿主向子應用，並且繫結決不會修改宿主屬性。
• 二對大括號建立一個自動繫結，資料流是單向或者雙向的。取決於目標屬性配置是否為雙向繫結。

在這個 release 版本中，繫結必須替換一個結點的所有文字內容，或者某個屬性的所有值。所以是不支援字串連結操作的。對於屬性值，建議使用計算繫結來代替字串連結。

版本0.5：

<input type="submit" value="Donate {{amount}}">

版本1.0：

<template>
  <input type="submit" value="[[computeValue(amount)]]">
</template>

Polymer({
  is: "inline-compute",
  computeValue: function(amount) {
    return 'Donate ' + amount;
  }
});

注意一個結點中繫結標示兩側不能包含任意空白符。

新的 shady DOM

Polymer v0.5 使用 shadow DOM 給開發人員提供一個更簡單的元素介面，並通過隱藏子樹後面的影子根來抽象複雜性。這是最基本形式的封裝，它工作在瀏覽器中並提供 shadow DOM。

對於瀏覽器來說，它是不能提供 shadow DOM 的，像本地 shadow DOM 那樣實現一個多邊形填充是困難的，通常這會比本地實現慢，還會需要更多的程式碼。正是這些原因， Polymer 團隊決定拿走 shadow DOM 填充，並用本地 DOM，用較輕版本構建來支援更小的 shadow DOM。

要注意的是 shady DOM 和 shadow DOM 是相互相容的，這意味著 shady DOM 的 API 使用瀏覽器中有效的本地的shadow DOM，而在不支援的瀏覽器中就會回到 shady DOM。

總結

把你的應用升級到 Polymer v1.0 可能是一個痛苦緩慢過程，這取決於你的應用靈活性，但是這種升級會在更快的載入時間和更小的負載方面帶來巨大的好處。官方遷移向導是有效的，在 Polymer 專案網站上涵蓋了一大堆對內部 API 的改變，這些變更的層次很深，因此需要仔細檢查。

另外，Chuck Horton 已經建立了一個 Github 倉庫，叫做 Road to Polymer 1.0，它提供了一個程式碼轉換工具讓你的程式碼從 v0.5 升級到 v1.0。如果你不想手動做一些更好的改變，它可以幫助你的程式碼遷移。