初识Polymer框架

Posted 2020-08-25

什么是polymer？

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

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

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规范。

　　基础层

　　　　基础层包含以下技巧：
　　　　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。

　　

　　核心层和元素层　

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

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

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模式就是这个原则的很好体现。

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模式来设计的，这种模式很适合组件开发，拥有很低的耦合性，便于修改维护。