polymer1.0 简要介绍和实例

头像
andypinet
    阅读 8 分钟
    2

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

    javascript
    andypinet
    1.2k 声望41 粉丝

    求一个常州 无锡 镇江的前端工作

    « 上一篇
    polymer web componets 大前端
    下一篇 »
    js mutationobserver简要介绍

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    编写大型web应用 终于有了一些体会

    andypinet阅读 2.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.3k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.5k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新