初识Polymer框架

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

时间: 2024-08-07 22:01:06

初识Polymer框架的相关文章

初识Web框架

一.Web框架本质 Python的Web框架分为两类: 通过socket自己写程序,自己处理请求: 基于Wsgi(Web Server Gateway Interface:Web服务网关接口),处理请求. ?众所周知,对于所有的Web应用而言,本质上其实就是一个socket服务端,用户浏览器其实就是一个socket客户端. 1.Socket实现Web框架的本质 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

初识MyBatis框架

框架架构 框架架构讲解: (1)加载配置:配置来源于两个地方,一处是配置文件,一处是Java代码的注解,将SQL的配置信息加载成为一个个MappedStatement对象(包括了传入参数映射配置.执行的SQL语句.结果映射配置),存储在内存中. (2)SQL解析:当API接口层接收到调用请求时,会接收到传入SQL的ID和传入对象(可以是Map.JavaBean或者基本数据类型),Mybatis会根据SQL的ID找到对应的MappedStatement,然后根据传入参数对象对MappedState

(28)初识struts框架

案例剖析中介绍了一个自己写的mystruts框架,这里开始简单的认识struts框架. 1.先看一个简单的struts开发的例子来熟悉一下流程 Struts就是基于mvc模式的框架! (struts其实也是servlet封装,提高开发效率!) Struts开发步骤: 1.web项目,引入struts - jar包 2. web.xml中,引入struts的核心功能 配置过滤器,通过配置一个过滤器来引入structs中的一些服务--org.apache.struts2.dispatcher.ng.

初识Hibernate框架

Hibernate是一种ORM框架 常用于数据库的访问层 Hibernate的核心组件:Configuration类,SessionFactory接口,Session接口,Query接口,Transaction接口: 1)Configuration类:用来读取Hibernate配置文件,并生成SessionFactory对象. 2)SessionFactory接口:产生Session实例工厂. 3)Session接口:Hibernate的核心接口,通过get(),load(),save(),up

初识struts2框架

一.struts2开发环境的搭建 1.1拷贝jar包到classpath中(找到struts2自带例子中struts-blank的war包,将\web-inf\lib目录下的jar包全拷贝) 1.2创建struts2配置文件(在最顶层的构建路径下,建立一个默认名为struts.xml的配置文件) 1.3配置控制器 a.配置位置:web.xml b.配置内容:参照servlet配置内容 <filter> <filter-name></..> <filter-clas

初识Mybatis框架,实现增删改查等操作

此第一次接触Mybatis框架确实是有点不适应,特别是刚从Hibernate框架转转型过来,那么为什么要使用Mybatis框架,Mybatis框架和Hibernate框架又有什么异同呢? 这个问题在我的另一篇blogs中有专门的讲解,今天我主要是带着大家来探讨一下如何简单的使用Mybatis这个框架 可能有的朋友知道,Mybatis中是通过配置文件来实现这个的,这里面有很多的东西,我们就一点一点的讲吧 我们想要配置成功,首要的就是jar包,先从官网下载相应的jar包作为程序的支撑 有了jar包之

初识SSH框架

摘 要:针对当前Web应用程序开发面临的问题,结合目前比较流行的开源框架Spring.Struts和Hibernate,提出了一种开发J2EE Web应用的轻量级解决方案,以帮助开发人员在短期内搭建结构清晰.可复用性好.维护方便的Web应用程序.并且,通过案例具体说明了如何将这一方案应用到实际项目中.关键词:J2EE MVC Struts Spring Hibernate 大型企业级Web应用系统的开发通常要求有一个良好的软件架构.便于协作开发和扩展升级,而传统的开发模式不能很好地满足这些要求.

初识sass框架

编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js就主要负责页面的动态,在这里我们知道css是基于渲染原理,和w3c来设计标准的,对于简单的页面来说,页面内容不是很多,所以样式也就不会很多,这种情况下面编写的css样式表,也就不会显得十分的臃肿,但是如果我们卡开发的是一些比较大型的网站的话,光是页面就会有很多,加上内容和样式,你就会发现里面会有很多

20170830 初识web框架

.wiz-code-container { position: relative; padding: 8px 0; margin: 5px 25px 5px 5px; text-indent: 0 } .CodeMirror { font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; color: black; font-size: 0.83rem } .CodeMirror-lines { paddin