polymer组件化与vm特性

IMWeb前端团队

发布于 2017-12-29 14:52:49

2.3K0

发布于 2017-12-29 14:52:49

一、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极其类似。