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 地址

polymerplastic

polymerplastic

相关推荐

polymer实现动态数据并且带有表格合并

最近接到一个需求，就是要做一个页面放个表格来显示数据，并且数据条数是动态并且规定格式且带合并的；首先看效果图：。"todayDealPrice": [{"a": "供应商","b&quo

汪polymer / 0评论 2019-07-01

Polymer 1.0 浅尝

前言前两天看到 Polymer 1.0 发布了，出于好奇，来试试水，体验下，感受下 WebComponent 的酷炫。Requirements node bower 浏览器: Chrome, Safari or Firefox. id=7544989

polymerMaster / 0评论 2019-06-20

扣丁学堂HTML5培训简述Polymer技术为什么受欢迎

Polymer 是一个由 Google 维护的开源 JavaScript 库，用于使用 Web 组件构建 Web 应用。目前，有超过3000个网站正在使用聚合物，比如virustotal.com、rogers.com、zeplin.io等。与其他 Java

ly / 0评论 2019-04-30

JavaScript的Polymer框架中dom-repeat与VM的相关操作

各种框架都有把一个列表数据绑定到 DOM 上的功能，比如 Angular 会用 ng-repeat 来绑定。其实这个级别的功能属于框架的扩展功能了，Angular 的 ng-repeat 也只是个 Directive 而已。Polymer 的 dom-re

宁精勿杂宁专勿多 / 0评论 2019-04-09

浅谈JavaScript的Polymer框架中的事件绑定

既然是一套完整的前端框架那就一定有提供事件绑定相关的支持。其实在之前的例子中就使用过事件绑定，只是没有单独系统地介绍过而已。Polymer 的事件思想是对事件处理函数尽可能地都命名并定义到 VM 上，我觉得这个做法是在有意地把 VM 这一层隔离出来。　　下

coderchujian / 0评论 2019-04-09

JS的框架Polymer中的dom-if和is属性使用说明

我们经常会有根据某个属性的取值来觉得模板渲染的需求，那就是最基本的分支语句。Angular 中有 ng-if 可以用，那么 Polymer 中当然也有 dom-if。其实 dom-if 是个很简单的东西，它只是作为本篇话题的接入点，我想介绍的实际上是 is

makel / 0评论 2019-04-09