Polymer——Web Components的未来

Polymer——Web Components的未来

什么是polymer？

polymer由谷歌的Palm webOS团队打造，并在2013 Google I/O大会上推出，旨在实现Web Components，用最少的代码，解除框架间的限制的UI 框架。

Everything is an element,一切皆组件，是polymer的核心思想

polymer 可以通过Twitter的包管理器bower，方便的进行组件（Elements）及包的依赖管理，不必自己从git上下载组件。

polymer分层结构：

    元素层（Elemets）， 分为UI elements（如select、tab）、 non-UI elements（如ajax、animate）

    核心层：polymer.html+polymer.js，是创建polymer element的必要依赖。
    基础层：platform.js，是平台兼容，和响应式代码实现的必要依赖，创建应用必须首先引入它。其中大部分API最终将成为原生浏览器API。

通过<link rel="import" href="component-name.html">方式引入组件，即Web Components的Imports规范。

Web Components是polymer的一个很重要的基础，我们有必要来了解一下：

 

Web Components？

它是一些规范，旨在以浏览器原生的方式向外提供组件，它的规范如下
1、模板（Templates）

     可以将不必立即渲染的元素，不必立即执行的脚本放入这里。
2、装饰器（Decorators）
3、Shadow DOM
4、自定义元素（Custom Elements），

     实现自定义html标签，及属性。拥有同原生组件一样的生命周期
5、Imports，

     指定引入的组件文档及类型

（并不需要实现它的全部规范。polymer element的创建、引入是参照这个规范来的）

Shadow DOM？

是一颗对用户不可见的DOM元素子树，即不能在常规的DOM树中看到它。它是实现Web Components封装
的必要能力。但是，目前只有Chrome支持它。它有以下几个作用：
1、避免页面不同组件的ID、CSS、JS的互相干扰
2、使得组件便于维护，组件实现的改变不影响其使用
3、加快DOM节点的查询速度，Shadow DOM中的元素是不被查询的。

为了便于索引，不应该将内容（文本）放入Shadow DOM中。
可以使用<content>元素来指定子元素的插入点。

规范是促进技术良性可持续发展的、是形成良好生态系统的必要条件。这就相当于法律的作用。

网格布局 CSS Grid Layout？

布局经历了从表格布局到div层布局的变化，如今面对如此众多的设备，屏幕大小分辨率有很大差异我们期望能够找到一种方式来实现统一的布局，这就是响应式布局。而响应式布局被寄予厚望的就是，网格布局。
顾名思义，就是用网格来划分页面。这里有两个要求，即多列、可伸缩。
这里的多列不使用浮动来完成，使用grid-columns属性来完成。
可伸缩的关键在于，分数单位fr，指列或者行占剩余空间的比例，x(fr)/total(fr)

如果要实现更加精确的控制，需要引入CSS3中的媒介查询，@media的支持。以提供在不同设备，不同屏幕大小不同设备方向上的样式。

网格布局为w3c草案，目前只得到IE10的部分支持（这次IE跑到前面了）。

  

MVVM模式？

为什么要谈这个模式？Polymer中有一个设计原则，Model-Driven Views（MDV），数据驱动模型，而MVVM模式就是这个原则的很好体现。

(这里不举例子，如果还不能够理解这个模式，可以看这里，http://www.cnblogs.com/626498301/archive/2010/08/17/1801475.html)

 

Model-View-ViewModel，相对于MVC模式，Controller被换成了ViewModel。

Model（模型）是一种数据格式约束，它定义了数据应当被如何访问和组织。从数据存取、数据转换、数据处理、数据展示都必须依赖于这个数据模型。

View（视图）通常是指组件的可视部分，数据模型、业务逻辑一般来说是稳定的，有较高的可重用性，但是视图可能经常更改，

ViewModel（视图模型）主要用于数据加工（逻辑处理），并为视图提供数据绑定（将Model的类属性绑定到View的相应组件属性上）。

它们的依赖关系是View依赖ViewModel，ViewModel依赖Model，这是单向依赖，这样View的变更不会对VM，Model有任何影响。但是如果Model发生改变，就会影响VM、View了。

 

 “Angular将基于Polymer开发widget”，这是来自Angular的声音。而Angular是采用MVVM模式来设计的，这种模式很适合组件开发，拥有很低的耦合性，便于修改维护。

 

现实？

目前来说，Polymer是一个面向未来的方案，还没有产生正式版本，不够成熟（组件数量，技术文档，实例，社区都需要发展）。

同时，浏览器的兼容性上（IE9、10都不能很好支持，即使在Chrome下页面渲染速度，用户体验都还存在一些问题），也需要进一步提升。

暂时看来，Googel的Angular就是开发成熟组件的不错选择。