polymer组件化与vm特性

一、Polymer

Polymer是Google在2013年的Google I/O大会上提出了一个新的UI框架。Polymer的实现使用了WebComponent标准,并且Polymer可保证针对包含各种平台的Web Component规范本地实现的浏览器、库和组件的使用效果完全相同。

1.1 Polymer框架:

Polymer框架可以分为三个层次:

  • 基础层(platform.js):是基本构建块。大多数情况下,基础层都是本地浏览器的API。
  • 核心层(polymer.js):实现基础层的辅助器。
  • 元素层:建立在核心层之上的UI组件或非UI组件。

1.2 基础层

基础层包括以下技术:

  • DOM Mutation Oberservers和Object.observe():用于观察DOM元素的变更,是纯JavaScript对象。
  • 指针事件:处理鼠标和触摸操作,支持所有的平台。
  • 阴影DOM:封装元素内的结构和样式,适合自定义元素。
  • 自定义元素:可以自定义HTML5的元素。自定义元素的名字必须包含一个破折号,这是一种简单的命名空间标识,以区别于标准元素。
  • HTML导入:包自定义元素。这些包可能包含HTML、CSS和JavaScript。
  • 模型驱动的视图(MDV):把数据直接绑定到HTML。
  • Web动画:一套统一的Web动画API。 阴影DOM、自定义元素和HTML元素Web Components,是网络组件模型。Web Components是Polymer框架的最重要的基础。 platform.js目前浏览器还没有提供,它仅有31KB大小。

1.3 核心层和元素层,即组件UI和组件逻辑

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

其架构是面向组件的,它由HTML5元素组成,元素甚至可以用户界面,比如动画是元素,它没有UI,而是代替点。同时响应式设计内建了许多Widget,这意味着它们能自适应多种给定的平台,如手机、平板、桌面等。

二、Polymer的一个例子

1. 先看下面polymer的一个例子代码
    <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">
2. Polymer 使用 HTML imports技术来加载组件。

HTML imports提供了依赖管理,确保自定义元素及其所有的依赖项都在使用之前被加载进来。

3. 要增加一个工具条(toolbar), 可以在 body 标签内添加下面的代码:
    <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的vm特性

3.1、数据的双向绑定

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。

3.2 template惰性元素

这点实现原理就比较简单,使用了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极其类似。

3.3 数据绑定与事件处理

这部分下次来讲,这次主要讲polymer,这部分也可以参考我之前qvm的看下mvvm中事件绑定和代理的实现。qvm gitHub地址

四、前端组件化的发展方向

当然polymer只是前端组件化未来的一种方向,这种思想也即将带来一系列前端新的技术方向出现,例如可能

1. Web Component规范化定义

基于标准化的组件定义方式,我们便可以像W3C等标准组织一样来定义组件标准,成为html规范的一部分,不用依赖其它组件,成为未来web开发基础规范来实现,支持vm监听功能等。例如polymer这种方案的发展就借鉴了webcomponent和mvvm的融合思想。

2. react生态

react的组件化生态思想和webComponent也及其相似,当然react做了更多的事情,除了web Component,react想做的其实可以称为platform component。

3. angular 2.0 和 EmberJS等现有成熟方案的改进

angular2.0已明确提出将支持Node绑定、模板集成、元素自定义和支持网络组件的无缝集成;ember的发展情况依然,今后也不排除jQuery等框架的进化重生,以全新的面目出现。

4. 开发者的其它小众解决方案

在企业中,针对企业特殊性的业务,企业前端开发者也可以根据webComponent的思想自己实现更加灵活可用的组件拼装解决方案。相比之下,这个方向的探索研究甚至会更加受欢迎,因为只有开发者才关注关注自己的组件怎么管理。例如目前qiqi项目所用的方案就比较符合这个方向。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

为iFrame添加动态载入效果,提高用户体验

中国博客联盟-成员展示导航一直都是直勾勾的加载,并且未加载完成之前还会强行占据一大片空白区域,体验很不友好!昨天在制作展示导航 WordPress 插件时,把这...

2744
来自专栏琯琯博客

Yii2 学习笔记之助手类

2657
来自专栏phodal

让你的「微信小程序」运行在Chrome浏览器上,让我们使用WebStorm

「微信小程序」的开发框架体验起来,还不错——自带了UI框架。但是问题是他的IDE,表现起来相当的糟糕——其实主要是因为,我当时买WebStorm License...

3216
来自专栏布尔

富文本编辑器的一键排版功能

在做CMS系统的时候,用户常常会从word粘贴一些东西到编辑器中,早起的富文本编辑器也都提供了去除word格式的功能(尽管有时候比较难用),甚至有时候用户要求打...

40510
来自专栏FreeBuf

DedeCMS全版本通杀SQL注入漏洞利用代码及工具

dedecms即织梦(PHP开源网站内容管理系统)。织梦内容管理系统(DedeCms) 以简单、实用、开源而闻名,是国内最知名的PHP开源网站管理系统,也是使用...

3438
来自专栏IMWeb前端团队

react css组织的另一种选择styled-components

本文作者:IMWeb linq 原文出处:IMWeb社区 未经同意,禁止转载 写 React 的同学肯定纠结过 CSS 该怎么组织的问题。传统 WEB...

20410
来自专栏前端架构

web安全nginx需设置HTTP header参数及phpcms设置CSP的缘由及注意事

X-Frame-Options:主要还是为了防止click hack,参看《再谈Hijacking——JavaScript ClickJacking原理浅析》。...

822
来自专栏IMWeb前端团队

全响应式web前端开发

本文作者:IMWeb Terrance 原文出处:IMWeb社区 未经同意,禁止转载 ? Responsive web design (RWD) i...

2057
来自专栏京东技术

JDReact小程序双向转换工具介绍

京东商城前台产品研发部资深前端工程师,负责JDReact框架前端及小程序转换引擎开发

912
来自专栏编程微刊

layer弹框在实际项目中的一些应用

1495

扫码关注云+社区