什么是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就是开发成熟组件的不错选择。

原创作品,转载请注明出处。如有不当之处,望各位读者指正。

Polymer——Web Components的未来的更多相关文章

  1. 从HTML Components的衰落看Web Components的危机 HTML Components的一些特性 JavaScript什么叫端到端组件 自己对Polymer的意见

    http://blog.jobbole.com/77837/ 原文出处: 徐飞(@民工精髓V) 搞前端时间比较长的同学都会知道一个东西,那就是HTC(HTML Components),这个东西名字很现 ...

  2. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  3. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  4. 可选的Web Components类库

    首先需要说明的是这不是一篇 Web Components 的科普文章,如果对此了解不多推荐先读<A Guide to Web Components>. 有句古话-“授人以鱼,不如授人以渔” ...

  5. Web Components 是什么

    /********************************************************************************* * Web Components ...

  6. 使用CLI 3 创建发布Web Components

    本文翻译自:codementor 翻译不当之处,欢迎指正交流 Web Components是web平台的未来吗?关于这一问题支持和反对的观点有很多.事实上浏览器对Web Components的支持正在 ...

  7. Web Components初探

    本文来自 mweb.baidu.com 做最好的无线WEB研发团队 是随着 Web 应用不断丰富,过度分离的设计也会带来可重用性上的问题.于是各家显神通,各种 UI 组件工具库层出不穷,煞有八仙过海之 ...

  8. The state of Web Components

    Web Components have been on developers’ radars for quite some time now. They were first introduced b ...

  9. Web Components

    Web Components是不是Web的未来   今天 ,Web 组件已经从本质上改变了HTML.初次接触时,它看起来像一个全新的技术.Web组件最初的目的是使开发人员拥有扩展浏览器标签的能力,可以 ...

随机推荐

  1. 一起学Maven

    转载自:http://blog.csdn.net/songdeitao/article/details/18452459 一. 初识Maven 开场白 在现在的项目开发过程中,越来越重视项目的管理,而 ...

  2. 使用 Spring 3 来创建 RESTful Web Services(转)

    使用 Spring 3 来创建 RESTful Web Services 在 Java™ 中,您可以使用以下几种方法来创建 RESTful Web Service:使用 JSR 311(311)及其参 ...

  3. C++:概述

    1.基本的输入输出,使用cin>>输入输入.使用cout<<输出 #include<iostream> using namespace std; int main( ...

  4. Android handler.obtainMessage()

    在handler.obtainMessage()的参数是这样写的: Message android.os.Handler.obtainMessage(int what, int arg1, int a ...

  5. Servlet的应用

    1.重定向     HttpServletRequest接口提供的sendRedirect()方法用于生产302响应码和Location响应头,从而通知客户端去重新访问Location响应头中指定的U ...

  6. Android使用Fragment程序崩溃

    调用Fragment的Activity要继承并实现Fragment.OnFragmentInteractionListener

  7. C#使用sharppcap实现网络抓包

    sharppcap dll的下载地址: http://sourceforge.net/directory/os:windows/?q=sharppcap 具体使用详细步骤: http://www.co ...

  8. BZOJ 2299 向量

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2299 题意:给出一对数a,b,任意使用(a,b), (a,-b), (-a,b), (- ...

  9. tuxedo入门

    为文件增加用户执行权限: 官网下载tuxedo111120_64_Linux_01_x86.bin su //进入root操作,防止权限不够 创建文件夹,用来做tuxedo文件的安装路径 cd /op ...

  10. input默认提示取消

    input 输入框有提示功能,当你之前输入过一些内容,你下次打入相关字符的时候,默认会有之前输入的一些相关的字符的提示,这个提示一般来说还是很好的,但是,有时候,我们想自己输入,不想要提示. 如果不需 ...