Polymer介绍

发表于   |   分类于   |  

1 Polymer简介

Polymer(聚合物，设计理念：材料学设计规范)
Polymer是google开发的web components方式的前端UI控件库

历史
2013年google I/O大会发布0.5开发者预览版
2015年 google I/O大会发布1.0版本
目前已更新到1.2.3版本

web components 是什么？
web组件就是web的一个一个元素标签， 如input标签，img标签，video标签等等。 web componts的概念就是把所有可重用的东西封装成元素组件， 下次要用，自己使用自己写好的标签即可。

polymer给大家提供了封装自定义标签的方法，它自己也有很多已经封装的标签
polymer的理念是一切功能皆元素， 即使是ajax， 也是元素，core-ajax标签可以发起ajax请求， 文档地址：http://www.polymer-project.org/docs/elements/core-elements.html#core-ajax
polymer已经有了一个组件库，里面有很多已经封装好的组件。

2 快速实践

新建newTag.html文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link rel="import" href="polymer/polymer.html">
<dom-module id="element-name">
  <template>
    <style>
      /* 组件元素CSS样式 */
    </style>
    <!—该组件的本地DOM-->
    <div on-click=”handleClick”>{{greeting}}</div> <!—在本地DOM上绑定数据-->
  </template>
</dom-module>

<script>
// 注册元素
Polymer({
  is: "element-name",//自定义元素的名称必选用连接符

  // 给元素添加属性和方法
  properties: {
    // 为元素声明公共api
    greeting: {
      type: String,
      value: "Hello!"
    }
  },
  handleClick: function(event) {
        /*事件逻辑*/
  }
});
</script>

详细说明

1、如果使用该组件，则在html文件中导入即可

1
<link rel="import" href="newTag.html">

2、声明周期的回调函数

  • ceated
  • attached
  • detached
  • attributeChanged

3、本地DOM的初始化顺序

  • created callback
  • local DOM initialized
  • ready callback
  • factoryImpl callback
  • attached callback

4、通过dom-module定义一个本地DOM，及自定义标签，该标签的id为该自定义标签的名称<dom-module id="element-name">，名称必须用-连字符。
5、在<dom-module>中放置<template>，polymer将会自动克隆template标签中的内容到自定义标签中（即本地DOM）。
6、Polymer({ })实现组件。
7、可以在组件中定义样式，通过在template内定义style实现。
8、事件监听 on-eventname 和addEventlistener的区别。

  • polymer提供了on-eventname属性来对事件进行监听， 如监听按钮的点击事件：

    1
    <paper-button id="button" label="flat button" on-click="{{buttonClick}}"></paper-button>

  • 另外还可以用addEventlistener监听事件，如

    1
    2
    3
    4
      this.$.button.addEventlistener('click',function(){
            alert('click');
            console.log(this);
    });

在两种监听方法是有区别的。

  • on-eventname 方式监听， 在监听函数中 this 指向的是当前polymer对象。可以用this来获得当前polymer对象的其他属性。
  • 而addEventlistener 在监听函数中 this 是当前元素。

3 拓展–标准HTML 5组件实现API

• Shadow DOM：Shadow DOM API 支持您将元素添加到通过常用方法（比如document.getElementById()）无法访问的 DOM 树。Shadow DOM 中的元素隐藏在暗处；它们对 DOM 树其他部分实际上是不可见的，在默认情况下，它们不受周围文档中的 CSS 的影响。
• 模板：HTML5 模板是一个惰性文档片段。当您需要显示这些片段时，可以 创建该模板，让片段出现在 DOM 树中。这些模板允许您封装那些您可以创建和定制的 HTML、JavaScript 和 CSS。（相当于polymer中的template）
• 定制元素定制元素是组件的标签。定制组件的标签必须包含一个连字符（例如 ），除此之外，它们与内置 HTML 标签没什么区别。
• HTML 导入：HTML 导入允许您从一个 HTML 文件中导入另一个，这使得您可以在其自身文件中实现定制组件。

这些 API 目前仍正开发中。撰写文本之时，还没有浏览器支持所有这些 API。因此，如果现在开始实现 HTML5 标准组件，那么可以从 Polymer 和 X-Tags 这两个开源项目中进行选择，它们提供了缺失的功能。

热评文章