隨著 2013 Google I/O 大會的召開，前端開發者迎來了又一大波技術革新。WebApp 風生水起，在 W3C 最新的規范《Introduction to Web Components》中，帶來了一些新的特性：

1. HTML模板（Templates）
2. Shadow DOM（[譯]什么是Shadow Dom？）
3. HTML Imports（組件引入）
4. Custom Elements（自定義元素）
5. Web Animations
6. Pointer Events
7. <style scoped>(范圍樣式)

Polymer 的曙光

原惠普 Palm webOS 開發團隊加盟?Google 后， 帶來了全新的?Polymer.js?，它代表了下一代 Web 組件的方向：一切皆組件、盡量減少代碼量、盡量減少框架限制。Polymer?正是基于Web Components?打造的一款前端利器，它的架構大致如下：

如何使用它呢？

1. 克隆「polymer-all」到你本地開發目錄
   

   git clone git://github.com/Polymer/polymer-all.git --recursive

2. 確保本地服務器已經開啟
3. 引入「polymer-all/polymer/polymer.js」到你的頁面
   

   <script src="polymer.js"></script>

4. 開始閱讀入門指南
5. 學習如何使用 Polymer 快速搭建Web組件
6. 玩轉?toolkit-ui 的示例（必須在Web服務器上運行）
7. 加入郵件列表！提出問題等待作者反饋
8. 使用最新版的 Chrome Canny，在 Chrome://flags 中開啟「啟用實驗性 WebKit 功能」
9. 在調試工具設置中可開啟「Show Shadow DOM」
10. 打開?http://127.0.0.1/projects-all/projects/Sandbox/?如果運行正常說明

打開后我們可以看到這樣的一個演示工具：

選中一個組件，點擊<> 按鈕可以查看源代碼，包含 Shadow DOM：

Windows 版本的 Chrome 貌似還有些 BUG，右側功能不能正常使用，用 Mac 的高富帥優越感頓時暴漲啊。

組件的合并，動畫事件的綁定，更多好玩的功能等你來發現。

還可以看看?Google I/O 的視頻：Web Components in Action – Google I/O 2013（Web 組件在行動）

當然，Polymer.js 目前還處于初期階段，很多東西還未完善，標準也在不斷地修訂。同時，應用于移動平臺也是?Polymer 的核心目標之一，Sandbox?工具目前支持簡單的響應式，后期會添加更多的響應式特性。

其他資料：

• Polymer 官網：http://www.polymer-project.org
• GitHub 地址：https://github.com/polymer/polymer

以上
一絲

總結

以上是生活随笔為你收集整理的前端组件化的未来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。