摘要：大前端東南水鄉一葉小舟拂過水面船上兩位大俠把酒言歡一位是玉真人另一位是張真人兩人喝到開心處變作對聯起來上聯前端研究，研究個屁下聯前端設計，設計個屁橫批前端特色提供創建自定義和標準元素類似的自定義元素功能可以使用或者創建元素可以配置元素或可以

大前端

東南水鄉 一葉小舟拂過水面 船上兩位大俠把酒言歡 一位是玉真人 另一位是張真人 兩人喝到開心處 變作對聯起來 上聯 前端研究，研究個屁~ 下聯 前端設計，設計個屁~ 橫批 前端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內 放置