前端组件化的未来
隨著 2013 Google I/O 大會的召開,前端開發者迎來了又一大波技術革新。WebApp 風生水起,在 W3C 最新的規范《Introduction to Web Components》中,帶來了一些新的特性:
- HTML模板(Templates)
- Shadow DOM([譯]什么是Shadow Dom?)
- HTML Imports(組件引入)
- Custom Elements(自定義元素)
- Web Animations
- Pointer Events
- <style scoped>(范圍樣式)
Polymer 的曙光
原惠普 Palm webOS 開發團隊加盟?Google 后, 帶來了全新的?Polymer.js?,它代表了下一代 Web 組件的方向:一切皆組件、盡量減少代碼量、盡量減少框架限制。Polymer?正是基于Web Components?打造的一款前端利器,它的架構大致如下:
如何使用它呢?
- 克隆「polymer-all」到你本地開發目錄
git clone git://github.com/Polymer/polymer-all.git --recursive - 確保本地服務器已經開啟
- 引入「polymer-all/polymer/polymer.js」到你的頁面
<script src="polymer.js"></script> - 開始閱讀入門指南
- 學習如何使用 Polymer 快速搭建Web組件
- 玩轉?toolkit-ui 的示例(必須在Web服務器上運行)
- 加入郵件列表!提出問題等待作者反饋
- 使用最新版的 Chrome Canny,在 Chrome://flags 中開啟「啟用實驗性 WebKit 功能」
- 在調試工具設置中可開啟「Show Shadow DOM」
- 打開?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
以上
一絲
總結
- 上一篇: vcf文件(call variants得
- 下一篇: 连云港到西安多少公里