本文作者:IMWeb ouven 原文出处:IMWeb社区 未经同意,禁止转载
Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponent标准,并且Polymer可保证针对包含各种平台的Web Component规范本地实现的浏览器、库和组件的使用效果完全相同。
Polymer框架可以分为三个层次:
基础层包括以下技术:
<polymer-panels on-select="panelSelectHandler" selected="{{selectedPanelIndex}}">
</polymer-panels>
其架构是面向组件的,它由HTML5元素组成,元素甚至可以用户界面,比如动画是元素,它没有UI,而是代替点。同时响应式设计内建了许多Widget,这意味着它们能自适应多种给定的平台,如手机、平板、桌面等。
<script src="../components/platform/platform.js"></script>
<!-- 下面用到的几个组件 -->
<link rel="import" href="../components/core-header-panel/core-header-panel.html">
<link rel="import" href="../components/core-toolbar/core-toolbar.html">
<link rel="import" href="../components/paper-tabs/paper-tabs.html">
HTML imports提供了依赖管理,确保自定义元素及其所有的依赖项都在使用之前被加载进来。
<core-header-panel>
<core-toolbar>
<!-- 添加一些选项卡,以paper-开头的是Material design风格的标签,具有很炫酷的效果 -->
<paper-tabs valueattr="name" selected="all" self-end>
<paper-tab name="all">所有</paper-tab>
<paper-tab name="favorites">收藏</paper-tab>
</paper-tabs>
</core-toolbar>
<!-- 主要的页面内容将会放在这里 -->
</core-header-panel>
<core-header-panel>
元素是一个简单的容器,例如包含一个header和一些内容。默认情况下, header 保持在屏幕的顶部,但也可以设置为随内容滚动。core-toolbar元素作为容器,可以存放 选项卡(tab)的,菜单按钮以及其他控件。 给迪例子较为简单,目前由于以下兼容性Polymer用的还不是很多,但是通过Polymer组件化的思想,也可以给我们一些组件未来化的方向。
Polymer 支持双向的数据绑定。数据绑定通过扩展 HTML 和 DOM API 来支持应用的 UI (DOM) 及其底层数据 (数据模型) 之前的有效分离。更新数据模型会反映在 DOM 上,而 DOM 上的用户输入会立即赋值到数据模型上。 对于 Polymer elements 来说,数据模型始终就是 element 本身。比如想想这个简单的 element:
<polymer-element name="name-tag">
<template>
这是一个 <b>{{owner}}</b> 的 name-tag element。
</template>
<script>
Polymer('name-tag', {
// initialize the element's model
ready: function() {
this.owner = 'Rafael';
}
});
</script>
</polymer-element>
这里owner属性里的name-tag就相当于mvvm中vuejs的derectives,angular中的controller,如果你更新了owner属性
document.querySelector('name-tag').owner = 'shabi';
你就会看到: 这是一个 shabi 的 name-tag element。
这点实现原理就比较简单,使用了template包含一段html片段,那这段html片段开始是隐藏的,将会在渲染完成后再插入到页面中,个人分析,这样做的一个主要原因就是防止mvvm中html未初始化时的模板代码到正式生成html页面过程中闪的过程,使用angular或avalon的话一般会遇到这样的问题
<polymer-element name="greeting-tag">
<!-- 最外面的 template 定义了 element 的 shadow DOM -->
<template>
<ul>
<template repeat="{{s in salutations}}">
<li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
</template>
</ul>
</template>
<script>
Polymer('greeting-tag', {
ready: function() {
// 植入 element 的数据模型 (数组 salutations)
this.salutations = [
{what: 'Hello', who: 'World'},
{what: 'GoodBye', who: 'DOM APIs'},
{what: 'Hello', who: 'Declarative'},
{what: 'GoodBye', who: 'Imperative'}
];
}
});
</script>
</polymer-element>
例如这里template里面的内容开始是隐藏的,将会在mv扫面节点完成后插入到dom树里,避免页面闪的发生。其中模板里面的变量使用的类mustache语法,和Avalon极其类似。
这部分下次来讲,这次主要讲polymer,这部分也可以参考我之前qvm的看下mvvm中事件绑定和代理的实现。qvm gitHub地址
当然polymer只是前端组件化未来的一种方向,这种思想也即将带来一系列前端新的技术方向出现,例如可能
基于标准化的组件定义方式,我们便可以像W3C等标准组织一样来定义组件标准,成为html规范的一部分,不用依赖其它组件,成为未来web开发基础规范来实现,支持vm监听功能等。例如polymer这种方案的发展就借鉴了webcomponent和mvvm的融合思想。
react的组件化生态思想和webComponent也及其相似,当然react做了更多的事情,除了web Component,react想做的其实可以称为platform component。
angular2.0已明确提出将支持Node绑定、模板集成、元素自定义和支持网络组件的无缝集成;ember的发展情况依然,今后也不排除jQuery等框架的进化重生,以全新的面目出现。
在企业中,针对企业特殊性的业务,企业前端开发者也可以根据webComponent的思想自己实现更加灵活可用的组件拼装解决方案。相比之下,这个方向的探索研究甚至会更加受欢迎,因为只有开发者才关注关注自己的组件怎么管理。例如目前qiqi项目所用的方案就比较符合这个方向。