设计观点View
作者头像

前端组件化的未来

【一丝冰凉】 /2013-05-24/已有人看过/前端技术

随着 2013 Google I/O 大会的召开,前端开发者迎来了又一大波技术革新。WebApp 风生水起,在 W3C 最新的规范《Introduction to Web Components》中,带来了一些新的特性:uXG上海云路网络科技有限公司

  1. HTML模板(Templates)uXG上海云路网络科技有限公司
  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 打造的一款前端利器,它的架构大致如下:uXG上海云路网络科技有限公司
uXG上海云路网络科技有限公司

uXG上海云路网络科技有限公司

如何使用它呢?

  1. 克隆「polymer-all」到你本地开发目录uXG上海云路网络科技有限公司
    git clone git://github.com/Polymer/polymer-all.git --recursive
  2. 确保本地服务器已经开启
  3. 引入「polymer-all/polymer/polymer.js」到你的页面uXG上海云路网络科技有限公司
    <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/ 如果运行正常说明

打开后我们可以看到这样的一个演示工具:uXG上海云路网络科技有限公司

uXG上海云路网络科技有限公司

选中一个组件,点击<> 按钮可以查看源代码,包含 Shadow DOM:uXG上海云路网络科技有限公司

uXG上海云路网络科技有限公司

Windows 版本的 Chrome 貌似还有些 BUG,右侧功能不能正常使用,用 Mac 的高富帅优越感顿时暴涨啊。uXG上海云路网络科技有限公司

组件的合并,动画事件的绑定,更多好玩的功能等你来发现。uXG上海云路网络科技有限公司

还可以看看 Google I/O 的视频:Web Components in Action – Google I/O 2013(Web 组件在行动)uXG上海云路网络科技有限公司

当然,Polymer.js 目前还处于初期阶段,很多东西还未完善,标准也在不断地修订。同时,应用于移动平台也是 Polymer 的核心目标之一,Sandbox 工具目前支持简单的响应式,后期会添加更多的响应式特性。uXG上海云路网络科技有限公司

其他资料:

以上uXG上海云路网络科技有限公司
一丝uXG上海云路网络科技有限公司