前端组件化的未来

随着 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 工具目前支持简单的响应式,后期会添加更多的响应式特性。

其他资料:

以上
一丝


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流