polymer1.0 简要介绍和实例

polymerplastic

2019-06-20

关注关注

polymer是什么呢
一个可以帮助你轻松创建一个自定义标签的库
利用polymer的一些特性你可以创建自定义元素来减少模板代码大小也可以利用它非常简单的创建复杂交互元素

注册元素
生命周期回调
属性的观察
local DOM模板
数据绑定

Register an element

使用Polymer函数注册一个新元素

polymer开发页面就是html模块化
首先你需要一个元素html
proto-element.html

<link rel="import"
      href="bower_components/polymer/polymer.html">



<script>
  // register a new element called proto-element
  Polymer({
    is: "proto-element",
    // add a callback to the element's prototype
    ready: function() {
      this.innerHTML = "I'm a proto-element. Check out my prototype!"
    }
  });
</script>

Polymer只有一个参数用于定制元素tag-name properties methods

note: 自定义元素初始化结束后调用ready方法

在index.html中我们可以使用自己定义好的元素

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="proto-element.html">
  </head>
  <body>
    <proto-element></proto-element>
  </body>
</html>

Polymer 是基于webcomponets组件创建机制的库通过简单的提供一些方式帮助创建自定义元素使用Polymer 最底层是webcomponents实现中间是基础元素包括Polymer和自定义基础元素再上层时ui元素页面在调用ui元素

add local Dom

local dom就是自定义元素内部的一些dom节点 polymer设计目标就是语义化比如我现在要一个相册标签项目组不必再一层一层套div 直接引入控件组的html库可能只需要写
成这样

<lfx-gallery>
    ...
</lfx-gallery>

gallery.html中可能就要写成这样

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">

<dom-module id="lfx-gallery">
  <template>
    <div>gallery caption</div>
    <template is="dom-repeat" items="{{employees}}">
        <img src="" alt="">
        <p>gallery description!</p>    
    </template>
  </template>
</dom-module>



<script>
  Polymer({
    is: "lfx-gallery",
    ready: function() {
      this.employees = [
          {first: 'Bob', last: 'Smith'},
          {first: 'Sally', last: 'Johnson'},
          {first: 'Aally', last: 'Sohnson'}
      ];
    }    
  });
</script>

index.html这样写

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="lfx-gallery.html">
  </head>
  <body>
    <lfx-gallery></lfx-gallery>
  </body>
</html>

plunker自定义lfx-gallery标签链接地址

note: 自定义元素最好加自己的命名空间以防和浏览器默认标签重名

Composition with local DOM

自定义元素内部节点是可以在外部控制的，可以指定插入自定义元素内部的位置

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="picture-frame">
  <!-- scoped CSS for this element -->
  <style>
    div {
      display: inline-block;
      background-color: #ccc;
      border-radius: 8px;
      padding: 4px;
    }
  </style>
  <template>
    <div>
      <!-- any children are rendered here -->
      <content></content>
    </div>
  </template>
</dom-module>



<script>
  Polymer({
    is: "picture-frame",
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="picture-frame.html">
  </head>
  <body>
    <picture-frame>
      <img src="images/p-logo.svg">
    </picture-frame>
  </body>
</html>

content标签放置外部自定义dom Polymer会把img放到content区域
plunker元素插入标签内部

note: dom-module内部css样式不会影响到外部

Data binding

数据绑定可以使元素动态修改自己local dom，可以使用{{}}绑定属性

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="name-tag">
  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s name-tag element.
  </template>
</dom-module>



<script>
  Polymer({
    is: "name-tag",
    ready: function() {
      // set this element's owner property
      this.owner = "Daniel";
    }
  });
</script>

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="name-tag.html">
  </head>
  <body>
    <name-tag></name-tag>
  </body>
</html>

Declare a property

在polymer函数中可以声明属性，每个属性可以分别而设置自己的默认值，标记属性配置，属性观察者还有更多。

<link rel="import"
      href="bower_components/polymer/polymer.html">

<dom-module id="configurable-name-tag">

  <template>
    <!-- bind to the "owner" property -->
    This is <b>{{owner}}</b>'s configurable-name-tag element.
  </template>



<script>
    Polymer({
      is: "configurable-name-tag",
      properties: {
        // declare the owner property
        owner: {
          type: String,
          value: "Daniel"
        }
      }
    });
  </script>



</dom-module>

双向数据绑定属性使用{{}}
Plunker属性声明地址

Bind to a property

polymer除了提供文字内容绑定，还提供元素属性绑定，同样也是双向数据绑定。

<link rel="import"
      href="bower_components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<link rel="import"
      href="bower_components/iron-input/iron-input.html">

<dom-module id="editable-name-tag">

  <template>
    <p>
    This is a <strong>{{owner}}</strong>'s editable-name-tag.
    </p>
    <!-- iron-input exposes a two-way bindable input value -->
    <input is="iron-input" bind-value="{{owner}}"
      placeholder="Your name here...">
  </template>



<script>
    Polymer({
      is: "editable-name-tag",
      properties: {
        owner: {
          type: String,
          value: "Daniel"
        }
      }
    });
  </script>



</dom-module>

Plunker属性绑定地址
估计大家可能对polymer的速度有单心，不过从目前测下来速度是相当快的
polymer使用这些可以做些什么呢写个timer

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">

<dom-module id="lfx-timer">

  <template>
    <div>Seconds Elapsed: <b>{{secondsElapsed}}</b></div>
  </template>



<script>
  Polymer({
    is: "lfx-timer",
    properties: {
      secondsElapsed: {
        type: Number,
        value: 0
      }
    },    
    setTimer: function() {
      var self = this;
      setInterval(function(){
        self.secondsElapsed += 1;
      }, 1000);
    },
    ready: function() {
      this.setTimer();
    }
  });
  </script>



</dom-module>

是不是和react好像不过我们可以直接在index.html使用标签
而且可以直接当dom处理
Plunker计时器地址

我们再写一个todoapp

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/iron-input/iron-input.html">

<dom-module id="lfx-todoapp">

  <template>
    <h3>TODO</h3>
    <ul>
      <template is="dom-repeat" items="{{todos}}">
        <li>{{item}}</li>
      </template>
    </ul>
    <p>你输入的是<b>{{input}}</b></p>
    <input is="iron-input" bind-value="{{input}}"
      placeholder="Your name here...">
    <button type="button" on-click="handleClick">Add #<b>{{index}}</b></button>
  </template>



<script>
    Polymer({
      is: "lfx-todoapp",
      properties: {
        index: {
          type: Number,
          value: 1
        },
        input: {
          type: String,
          value: ''
        }
      },
      ready: function() {
        this.todos = [
          'sdsds'
        ];
      },
      handleClick: function(){
        var self = this;
        if(self.input != '') {
          self.push('todos', self.input);
          self.input = '';          
        }
      }
    });
  </script>



</dom-module>

polymer提供repeat if等标签来处理数据
Plunker todoapp 地址

polymer可以做markdown编辑器

<link rel="import"
      href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html">
<!-- import the iron-input custom element -->
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

<dom-module id="lfx-markdown">

  <template>
    <h3>INPUT</h3>
    <textarea name="" id="textarea" on-keyup="keyupHandle" value="{{input}}"></textarea>
    <h3>OUTPUT</h3>
    <div id="output"></div>
  </template>



<script>
    Polymer({
      is: "lfx-markdown",
      properties: {
        input: {
          type: String,
          value: '',
          observer: 'inputChanged'
        },
        output: {
          type: String,
          value: ''
        }
      },
      ready: function() {
        var self = this;
        self.input = 'Type some *markdown* here!';
      },
      keyupHandle: function(event) {
        var self = this;
        self.input = event.path ? event.path[0].value : event.target.value;
      },
      inputChanged: function(newvalue, oldvalue) {
        var self = this;
        self.$.output.innerHTML = marked(self.input);
      }
    });
  </script>



</dom-module>

polymer通过object.observe或者dirty check实现数据观察
Plunker markdown 地址

polymer