polymer web componets 大前端

摘要：大前端东南水乡一叶小舟拂过水面船上两位大侠把酒言欢一位是玉真人另一位是张真人两人喝到开心处变作对联起来上联前端研究，研究个屁下联前端设计，设计个屁横批前端特色提供创建自定义和标准元素类似的自定义元素功能可以使用或者创建元素可以配置元素或可以

大前端

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

特色

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

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

可以配置元素attributes或properties

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

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

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

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

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

像普通标签一样使用

注册和生命周期 注册自定义元素

使用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() {
  
  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

类样式的构造函数

如果你想实现你的元素，但并不注册他，你可以使用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 Custom Element!";
  }

});

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

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

配置默认属性值

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

使用元素表现local 的id元素对应元素 is property在dom-module内 放置