隨著 2013 Google I/O 大會(huì)的召開，前端開發(fā)者迎來了又一大波技術(shù)革新。WebApp 風(fēng)生水起，在 W3C 最新的規(guī)范《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 開發(fā)團(tuán)隊(duì)加盟?Google 后， 帶來了全新的?Polymer.js?，它代表了下一代 Web 組件的方向：一切皆組件、盡量減少代碼量、盡量減少框架限制。Polymer?正是基于Web Components?打造的一款前端利器，它的架構(gòu)大致如下：

如何使用它呢？

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

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

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

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

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

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

選中一個(gè)組件，點(diǎn)擊<> 按鈕可以查看源代碼，包含 Shadow DOM：

Windows 版本的 Chrome 貌似還有些 BUG，右側(cè)功能不能正常使用，用 Mac 的高富帥優(yōu)越感頓時(shí)暴漲啊。

組件的合并，動(dòng)畫事件的綁定，更多好玩的功能等你來發(fā)現(xiàn)。

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

當(dāng)然，Polymer.js 目前還處于初期階段，很多東西還未完善，標(biāo)準(zhǔn)也在不斷地修訂。同時(shí)，應(yīng)用于移動(dòng)平臺(tái)也是?Polymer 的核心目標(biāo)之一，Sandbox?工具目前支持簡單的響應(yīng)式，后期會(huì)添加更多的響應(yīng)式特性。

其他資料：

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

以上
一絲

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。