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 条评论
登录 后参与评论

相关文章

来自专栏每日一篇技术文章

weex-14-video组件使用

下面是一个网络视频地址 http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981...

3031
来自专栏向治洪

vue.js与其他前端框架的对比

React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composabl...

2738
来自专栏Java架构师历程

介绍几个移动web app开发框架

jQuery Mobile框架能够帮助你快速开发出支持多种移动设备的Mobile应用用户界面。jQuery Mobile最新版本是1.4.0,默认主题采用扁平化...

7452
来自专栏编程

灵活的 overflow

来源: 大漠 https://www.w3cplus.com/css/flexible-overflow.html 说到对于CSSer而言并不会陌生,用来控制内...

20310
来自专栏PHP在线

手机网页用Bootstrap还是jQuery Mobile

很多新手纠结这个问题?两个框架都能够支持做手机网页,那么它们的区别是什么呢,适用场景是什么呢?下面我们从这几个方面比较这两个框架:解决问题、功能、适用场景。 ...

52310
来自专栏编程直播室

源码发布:一个Angular写得Markdown编辑器 参考资料

1722
来自专栏更流畅、简洁的软件开发方式

学习HTML5之表单

HTML5 的标准已经定了,应该火了,或者已经火了。那么是不是可以学习一下呢? 目前h5的主场还是在手机端,pc还是受困于浏览器的兼容,主要是IE在拖后腿。所以...

4775
来自专栏黑泽君的专栏

HTML是什么?HTML版本发展

 参考链接:http://www.w3cwhy.com/css-html/w3c-html.html

3314
来自专栏测试2017

test

Markdown 是用来生成 HTML 结构的。样式和结构分离,算是其设计思想之一。而这也是现在 HTML 的发展方向。作为印证,<center> 这样的纯为样...

2230
来自专栏HTML5学堂

技术新手,从何下手HTML5?

HTML与CSS的学习顺序 你曾经有没有这样的感受呢?虽然HTML5学堂中关于HTML与CSS的文章不少的,但是却不知从何下手? 这样的日子,将从今天一去不复返...

4086

扫码关注云+社区

领取腾讯云代金券