Google的Polymer框架分析

作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs

在2013年的Google I/O大会上，Google公司提出了一个新的UI框架，名为Polymer。Google称Polymer框架代表着所有Web UI框架的未来。

一、Polymer框架

Polymer框架可以分为三个层次：
1. 基础层(platform.js)：是基本构建块。大多数情况下，即使不是全体，这些API终究都将成为本地浏览器的API。
2. 核心层(polymer.js)：实现基础层的帮助器。
3. 元素层：建立在核心层之上的UI组件或非UI组件。

二、基础层

基础层包含以下技巧：
1. DOM Mutation Oberservers和Object.observe()：用于观察DOM元素的变更，是纯JavaScript对象。
2. 指针事件：处理鼠标和触摸操纵，支撑所有的平台。
3. 阴影DOM：封装元素内的结构和样式，适合自定义元素。
4. 自定义元素：可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号，这是一种简略的命名空间标识，以区别于标准元素。
5. HTML导入：包自定义元素。这些包可能包含HTML、CSS和JavaScript。
6. 模型驱动的视图(MDV)：把数据直接绑定到HTML。
7. Web动画：一套同一的Web动画API。

每日一道理
试试看——不是像企鹅那样静静的站在海边，翘首企盼机会的来临，而是如苍鹰一般不停的翻飞盘旋，执著的寻求。试试看——不是面对峰回路转、杂草丛生的前途枉自嗟叹，而是披荆斩棘，举步探索。试试看——不是拘泥于命运的禁锢，听凭命运的摆布，而是奋力敲击其神秘的门扉，使之洞开一个新的天地。微笑着，去唱生活的歌谣。

3～5是Web Components，是网络组件模型。Web Components是Polymer框架的最重要的基础。
platform.js目前浏览器还没有提供，它仅有31KB巨细。

三、核心层和元素层

Polymer框架天生就偏向于本地HTML5。比如应用Polymer框架的面板UI Widget的例子：

<polymer-panels
        on-select="panelSelectHandler"
        selected="{{selectedPanelIndex}}">
    </polymer-panels>

其架构是面向组件的，它由HTML5元素构成，一些元素甚至没有用户界面，比如动画是元素，但它没有UI，而是代替点。响应式计划内建了许多Widget，这意味着它们能自适应多种给定的平台，如手机、平板、桌面等。

四、互操纵性

Polymer框架的计划像是点菜，选择你所须要的。Web Components的元素是高度互操纵的。

文章结束给大家分享下程序员的一些笑话语录： 3G普不普及现在已经不是看终端了，而是看应用，有好的，便宜实用的应用，花1000多买个能用的智能手机应该不是什么难事。反过来说，你200元拿一个智能手机，没有好的应用，看个电影要几十元，也是没人用3G。

--------------------------------- 原创文章 By
元素和自定义
---------------------------------