polymer web componets 大前端

大前端

东南水乡 一叶小舟拂过水面 船上两位大侠把酒言欢 一位是玉真人 另一位是张真人 两人喝到开心处 变作对联起来 上联 前端研究，研究个屁~ 下联 前端设计，设计个屁~ 横批 前端sb

特色

polymer 提供创建自定义和标准dom元素类似的自定义元素功能

• 可以使用constructor或者document.createElement创建元素

• 可以配置元素attributes或properties

• 可以在标签内部定义一些dom

• 可以对属性和属性的变化处理

• 可以有一些默认的样式,在外部修内部样式

• 可以提供方法允许你来操纵它的内部状态

一个基本的polymer元素定义如下:

<dom-module id="element-name">
  <style>
    /* CSS rules for your element */
  </style>
  <template>
    <!-- local DOM for your element -->

    <div>{{greeting}}</div> <!-- data bindings in local DOM -->
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "element-name",

    // add properties and methods on the element's prototype

    properties: {
      // declare properties for the element's public API
      greeting: {
        type: String,
        value: "Hello!"
      }
    }
  });
</script>

像普通标签一样使用

<element-name></element-name>        <!-- <div>hello!</div> -->

注册和生命周期

注册自定义元素

使用polymer注册一个元素，使用is属性指明要注册元素的名称

// register an element
MyElement = Polymer({

  is: 'my-element',

  // See below for lifecycle callbacks
  created: function() {
    this.innerHTML = 'My element!';
  }

});

// create an instance with createElement:
var el1 = document.createElement('my-element');

// ... or with the constructor:
var el2 = new MyElement();

polymer function 将元素注册到浏览器上 并且 返回一个创建新实例的元素构造函数

定义一个自定义构造函数

polymer function返回一个基本的构造函数，可用于实例化自定义元素，如果你想要向构造函数传递参数配置新元素，您可以指定一个自定义构造函数原型。

MyElement = Polymer({

  is: 'my-element',

  constructor: function(foo, bar) {
    this.foo = foo;
    this.configureWithBar(bar);
  },

  configureWithBar: function(bar) {
    ...
  }

});

var el = new MyElement(42, 'octopus');

• 自定义函数只当使用构造函数时调用，作为html标记解析时不调用

• 自定义函数在元素初始化后调用

扩展html元素

MyInput = Polymer({

  is: 'my-input',

  extends: 'input',

  created: function() {
    this.style.border = '1px solid red';
  }

});

var el1 = new MyInput();
console.log(el1 instanceof HTMLInputElement); // true

var el2 = document.createElement('input', 'my-input');
console.log(el2 instanceof HTMLInputElement); // true

回调生命周期

MyElement = Polymer({

  is: 'my-element',

  created: function() {
    console.log(this.localName + '#' + this.id + ' was created');
  },

  attached: function() {
    console.log(this.localName + '#' + this.id + ' was attached');
  },

  detached: function() {
    console.log(this.localName + '#' + this.id + ' was detached');
  },

  attributeChanged: function(name, type) {
    console.log(this.localName + '#' + this.id + ' attribute ' + name +
      ' was changed to ' + this.getAttribute(name));
  }

});

准备回调和元素初始化

ready: function() {
  <!-- access a local DOM element by ID using this.$ -->
  this.$.header.textContent = 'Hello!';
}

元素初始化顺序

• created callback

• local DOM constructed

• default values set

• ready callback

• custom constructor (if any)

• attached callback

注册回调

Polymer.Base also implements registerCallback, which is called by Polymer() to allow Polymer.Base to supply a layering system for Polymer features.

标签静态属性

如果一个自定义标签需要标签上出现attributes要在hostAttrbuites下写 值为true会被转变为空
false 该属性不会添加

mixins属性

fun-mixin.html

FunMixin = {

    funCreatedCallback: function() {
      this.makeElementFun();
    },

    makeElementFun: function() {
      this.style.border = 'border: 20px dotted fuchsia;';
    }
  };

});

my-element.html

<link rel="import" href="fun-mixin.html">

<script>
  Polymer({

    is: 'my-element',

    mixins: [FunMixin],

    created: function() {
      this.funCreatedCallback();
    }

  });
</script>

类样式的构造函数

如果你想实现你的元素，但并不注册他，你可以使用Polymer.class function Polymer.class和Polymer有着相同的属性配置，设置原型链，没有注册元素，可以用document.registerElement 注册。

申明属性

你可以在你的元素上声明有哪些properties通过在polymer构造函数原型properties写
可以声明那些配置
属性类型
默认值
属性改变观察者
只读
出发事件
基于别的属性计算属性
属性值改变时跟新相关

Polymer({

  is: 'x-custom',

  properties: {
    user: String,
    isHappy: Boolean,
    count: {
      type: Number,
      readOnly: true,
      notify: true
    }
  },

  ready: function() {
    this.innerHTML = 'Hello World, I am a <b>Custom Element!</b>';
  }

});

key	details
type	(Boolean,Date,Number,String,Array,Object)
value	(Boolean,Number,String,Function) 默认值
reflectToAttribute	(Boolean)
readyOnly	(Boolean)
notify	(Boolean)
computed	(String)
observer	(String) 属性观察者函数名

property name 和 attribute name 映射

当映射 attribute name 到 property names

• attribute names 转换成 小写 property names 比如firstName 映射成 firstname

• attribute names 带破折号 转换成 驼峰命名 property namses 比如first-name 映射成
  firstName

property names 映射成 attribute names时一致

反序列化属性

属性最好设置type

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      user: String,
      manager: {
        type: Boolean,
        notify: true
      }
    },

    attached: function() {
      // render
      this.innerHTML = 'Hello World, my user is ' + (this.user || 'nobody') + '.\n' +
        'This user is ' + (this.manager ? '' : 'not') + ' a manager.';
    }

  });

</script>

<x-custom user="Scott" manager></x-custom>
<!--
<x-custom>'s innerHTML becomes:
Hello World, my user is Scott.
This user is a manager.
-->

attributes dash-case 风格 转换成 camel-case 风格

<script>

  Polymer({

    is: 'x-custom',

    properties: {
      userName: String
    }

  });

</script>

<x-custom user-name="Scott"></x-custom>
<!-- Sets <x-custom>.userName = 'Scott';  -->

配置默认属性值

properties 的默认值可以再properties对象使用value属性 可以是一个原始值或者一个function的返回值

Polymer({

  is: 'x-custom',
   
  properties: {
  
    mode: {
      type: String,
      value: 'auto'
    },
    
    data: {
      type: Object,
      notify: true,
      value: function() { return {}; }
    }
  
  }

});

属性更改回调（观察者）

Polymer({

  is: 'x-custom',

  properties: {
    disabled: {
      type: Boolean,
      observer: 'disabledChanged'
    },
    highlight: {
      observer: 'highlightChanged'
    }
  },

  disabledChanged: function(newValue, oldValue) {
    this.toggleClass('disabled', newValue);
    this.highlight = true;
  },

  highlightChanged: function() {
    this.classList.add('highlight');
    setTimeout(function() {
      this.classList.remove('highlight');
    }, 300);
  }

});

观察多个属性更改

Polymer({

  is: 'x-custom',

  properties: {
    preload: Boolean,
    src: String,
    size: String
  },

  observers: {
    'preload src size': 'updateImage'
  },

  updateImage: function(preload, src, size) {
    // ... do work using dependent values
  }

});

观察更改子属性

local Dom

我们叫把可以创造和管理的dom叫local dom
polymer支持创建multiple local dom 在支持shadow dom的浏览器上 shadow dom用来创建local dom
在其他浏览器 polymer通过自定义实现的shadow dom提供local dom

local dom template

使用<dom-module>元素表现local <dom-module>的id元素对应元素 is property在dom-module内 放置<template> polymer会自动拷贝模板内容为元素的local dom

<dom-module id="x-foo">
  <template>I am x-foo!</template>
</dom-module>

<script>
  Polymer({
    is: 'x-foo'
  });
</script>

scoped styling

<dom-module id="my-element">
  
  <style>
    :host {
      display: block;
      border: 1px solid red;
    }
    #child-element {
      background: yellow;
    }
    /* styling elements distributed to content (via ::content) requires */
    /* using a wrapper element for compatibility with shady DOM         */
    .content-wrapper > ::content .special {
      background: orange;
    }
  </style>
  
  <template>
    <div id="child-element">In local Dom!</div>
    <div class="content-wrapper"><content></content></div>
  </template>
  
</dom-module>

<script>

    Polymer({
        is: 'my-element'
    });

</script>

Styling distributed children (::content)

在这个例子,这个规则

.content-wrapper ::content > .special

翻译为

.content-wrapper > special

Automatic node finding

内部元素使用id声明 使用this.$ hash选择

DOM (re-)distribution