时代在进步,原本前端只是用来简单的数据显示以及提交数据到后端处理逻辑的地方,而随着SPA的发展,前端的逻辑也越来越是庞大,恰巧,今天看微博的时候,发现一个概念讨论的比较多,就是 Web Components,顺藤摸瓜,做了一些了解,发现 Polymer 这样一个或许是未来的东东,至少有一点,chrome将会原生支持。收集了一些资料,多家学习。

1. Polymer

Polymer由以下几层组成:

  • 基础层(Foundation)——platform.js:基本构建块,其中大部分API最终将成为原生浏览器API。
  • 核心层(Core)——polymer.js:基础层实现的辅助工具。
  • 元素层(Elements):包括构建于核心层之上的UI以及非UI组件。

1.1 基础层(platform.js)

其中,基础层使用了以下技术:

  1. DOM Mutation Oberservers和 Object.observe():用于监视DOM元素和简单JavaScript对象的改变。该功能可能会在ECMAScript 7中正式标准化。
  2. Pointer Events :在所有的平台上以同样的方式处理鼠标和触摸操作。
  3. Shadow DOM:将结构和样式封装在元素内(比如定制元素)。
  4. Custom Elements:定义自己的HTML5元素。自定义元素的名字中必须包括一个破折号,它的作用类似于命名空间,为了将其与标准元素区分开来。
  5. HTML Imports:封装自定义元素,包中包括HTML、CSS、JavaScript元素。
  6. Model-Driven Views(MDV):直接在HTML中实现数据绑定。仍没有标准化的计划。
  7. Web Animations:统一Web动画实现API。

以上第3-5个API都是Web Components的一部分。很明显,Web Components对Polymer的重要性非同一般。

platform.js的作用在于代替浏览器提供这些API,它在经过充分压缩后仅仅31KB。而根据已公开的信息,我们还知道Polymer的目标之一就在于测试这些未标准化的HTML5 UI API。

1.2 核心层和元素层

Polymer本身非常像原生的HTML5:“attributes in, events out”。以UIwidget(widget)polymer-panels为例:

  1. <polymer-panels
  2. on-select="panelSelectHandler"
  3. selected="{{selectedPanelIndex}}">
  4. </polymer-panels>

可以看出其结构非常“面向组件(component-oriented)”,所有组件都是HTML元素。有的元素本身并不提供UI,比如animations元素并不提供UI,但是你可以将它与UI元素相关联,实现动画效果。此外,Polymer的很多widget中都内建了响应式设计,也就是说,他们会依平台的不同变化成最适合的形状。

1.3 互操作性

Polymer设计得像菜单一样,可以按需选择。得益于Web Components,其元素都具有非常高的互操作性。在I/O大会上我们就看到了这样的例子:Mozilla项目中的元素X-Tag(同样基于Web组件)与Polymer协同得非常好。

1.4 什么时候可以使用Polymer?

Polymer目前仍是一个Alpha预览版,因此不建议在公共项目中使用。但是,作为一个开源项目,你可以随时使用它的代码。

1.5 Polymer与其它Web框架相比如何?

Polymer并不是为终结其它框架而生,相反,现有的这些框架也可以构建在同样的基础层之上。如果你已经尝试过Ember.js、AngularJS这样的UI框架,一定会发现很多API非常熟悉。AngularJS甚至在在Twitter上宣布:”Angular将基于Polymer开发widget,这会是一个双赢的方案。“

2. Polymer究竟意味着什么?

没有人会想要使用框架,我们只是想高效地开发Web UI而已,只不过框架恰恰满足了我们的需求。与之相反,原生HTML却缺乏这些功能:

  • 丰富的widget集。在我看来,Web Components最大的意义莫过于此。得益于Web Components,我们将能轻易获得众多widget,随意使用。
  • 用户界面布局。我对 CSS Grid Layout寄予了厚望,Grid Layout是原生的HTML,自然它也能与Web Component很好地协同工作。
  • widget间的“粘合剂”(比如数据绑定)。

就目前看来,各大框架仍难以互相兼容:各自使用各自的工具链、继承API、widget基础构架等等。本文中描述的开发模式,以及ECMAScript 6中的与模块,都指明Web开发的未来应该是更高的互操作性。这对Web开发生态系统的益处显而易见。

Google Polymer以及Web UI框架的更多相关文章

  1. 【转】谈谈Google Polymer以及Web UI框架的未来

    原文转自:http://www.csdn.net/article/2013-05-27/2815450-google-polymer 摘要:开发者Axel Rauschmayer在自己的博客上详解了G ...

  2. 【JavaScript】谈谈Google Polymer以及Web UI框架的未来

    摘要:开发者Axel Rauschmayer在自己的博客上详解了Google Polymer的设计理念与组成架构,深得Polymer开发者的认同.他认为Polymer这样高互操作性的设计才应该是Web ...

  3. 国产 WEB UI 框架 (收费)-- Quick UI,Mini UI

    国产 WEB UI 框架 (收费)-- Quick UI,Mini UI : http://www.uileader.com/ http://www.miniui.com/

  4. (转载)比较web ui 框架

    以下是几个精致的web UI框架 1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范, ...

  5. 推荐几个精致的web UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  6. 推荐几个精致的web UI框架及常用前端UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  7. 《转》推荐几个精致的web UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  8. Java Web UI框架

    1.Aliceui Aliceui是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式. git ...

  9. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

随机推荐

  1. ASP.NET Web API Model-ActionBinding

    ASP.NET Web API Model-ActionBinding 前言 前面的几个篇幅把Model部分的知识点划分成一个个的模块来讲解,而在控制器执行过程中分为好多个过程,对于控制器执行过程(一 ...

  2. python——连接Oracle数据库

    前言 Python自带的模块中有很多操纵文件的.我们可以把文件的数据读出来,经过处理还可以将数据写入文件中.但是对于数据的管理和分析来说,数据库还是专业一些.如果Python能和数据库结合在一起,那么 ...

  3. 《量化投资:以MATLAB为工具》连载(1)基础篇-N分钟学会MATLAB(上)

    http://blog.sina.com.cn/s/blog_4cf8aad30102uylf.html <量化投资:以MATLAB为工具>连载(1)基础篇-N分钟学会MATLAB(上) ...

  4. Vue刨坑

    vue常见问题 1.在自定义组件里,你可以像任何普通元素一样用v-for.eg1: <my-component v-for="item in items"></m ...

  5. c++双字符常量

    ascii表中 A是65,B是66,16706是A乘256+B 一些双字符的汉字也可以通过此方法转为int数字

  6. php 修改 AppServ 下Apache 端口

    php 修改 AppServ 下Apache 端口 步骤一:把 C:\AppServ\Apache2.2\conf 中httpd.conf修改了 还不正确 步骤二:把httpd.conf  中List ...

  7. HDU 5700 区间交 线段树暴力

    枚举左端点,然后在线段树内,更新所有左边界小于当前点的区间的右端点,然后查线段树二分查第k大就好 #include <cstdio> #include <cstring> #i ...

  8. 【算法Everyday】第二日 求子数组的最大和

    题目 // 3.求子数组的最大和 // 题目: // 输入一个整形数组,数组里有正数也有负数. // 数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和. // 求所有子数组的和的最大值. ...

  9. servlet的运行工作

    我是一个刚学几天的小白,写得不好,如果哪个地方有错误,欢迎你们指出. 在服务器端,我用的是Tomcat作为Servlet 容器,在容器中有一个Servlet接口,你编写一个servlet类放在Tomc ...

  10. Nexus3将本地jar包添加到仓库

    新建一个文件夹,将要上传的jar包放进去,然后创建一个pom文件,例如xx.jar,pom.xml 首先创建一个目录 方便执行上传的时候url参数 也可以不创建, 上传XML curl -v -u a ...