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

大前端

東南水鄉(xiāng) 一葉小舟拂過水面 船上兩位大俠把酒言歡 一位是玉真人 另一位是張真人 兩人喝到開心處 變作對(duì)聯(lián)起來 上聯(lián) 前端研究，研究個(gè)屁~ 下聯(lián) 前端設(shè)計(jì)，設(shè)計(jì)個(gè)屁~ 橫批 前端sb

特色

polymer 提供創(chuàng)建自定義和標(biāo)準(zhǔn)dom元素類似的自定義元素功能

可以使用constructor或者document.createElement創(chuàng)建元素

可以配置元素attributes或properties

可以在標(biāo)簽內(nèi)部定義一些dom

可以對(duì)屬性和屬性的變化處理

可以有一些默認(rèn)的樣式,在外部修內(nèi)部樣式

可以提供方法允許你來操縱它的內(nèi)部狀態(tài)

一個(gè)基本的polymer元素定義如下:

像普通標(biāo)簽一樣使用

注冊(cè)和生命周期 注冊(cè)自定義元素

使用polymer注冊(cè)一個(gè)元素，使用is屬性指明要注冊(cè)元素的名稱

// 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 將元素注冊(cè)到瀏覽器上 并且 返回一個(gè)創(chuàng)建新實(shí)例的元素構(gòu)造函數(shù)

定義一個(gè)自定義構(gòu)造函數(shù)

polymer function返回一個(gè)基本的構(gòu)造函數(shù)，可用于實(shí)例化自定義元素，如果你想要向構(gòu)造函數(shù)傳遞參數(shù)配置新元素，您可以指定一個(gè)自定義構(gòu)造函數(shù)原型。

MyElement = Polymer({

  is: "my-element",

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

  configureWithBar: function(bar) {
    ...
  }

});

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

自定義函數(shù)只當(dāng)使用構(gòu)造函數(shù)時(shí)調(diào)用，作為html標(biāo)記解析時(shí)不調(diào)用

自定義函數(shù)在元素初始化后調(diào)用

擴(kuò)展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

回調(diào)生命周期

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));
  }

});

準(zhǔn)備回調(diào)和元素初始化

ready: function() {
  
  this.$.header.textContent = "Hello!";
}

元素初始化順序

created callback

local DOM constructed

default values set

ready callback

custom constructor (if any)

attached callback

注冊(cè)回調(diào)

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

標(biāo)簽靜態(tài)屬性

如果一個(gè)自定義標(biāo)簽需要標(biāo)簽上出現(xiàn)attributes要在hostAttrbuites下寫 值為true會(huì)被轉(zhuǎn)變?yōu)榭?br>false 該屬性不會(huì)添加

mixins屬性

fun-mixin.html

FunMixin = {

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

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

});

my-element.html

類樣式的構(gòu)造函數(shù)

如果你想實(shí)現(xiàn)你的元素，但并不注冊(cè)他，你可以使用Polymer.class function Polymer.class和Polymer有著相同的屬性配置，設(shè)置原型鏈，沒有注冊(cè)元素，可以用document.registerElement 注冊(cè)。

申明屬性

你可以在你的元素上聲明有哪些properties通過在polymer構(gòu)造函數(shù)原型properties寫
可以聲明那些配置
屬性類型
默認(rèn)值
屬性改變觀察者
只讀
出發(fā)事件
基于別的屬性計(jì)算屬性
屬性值改變時(shí)跟新相關(guān)

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) 默認(rèn)值
reflectToAttribute	(Boolean)
readyOnly	(Boolean)
notify	(Boolean)
computed	(String)
observer	(String) 屬性觀察者函數(shù)名

property name 和 attribute name 映射

當(dāng)映射 attribute name 到 property names

attribute names 轉(zhuǎn)換成 小寫 property names 比如firstName 映射成 firstname

attribute names 帶破折號(hào) 轉(zhuǎn)換成 駝峰命名 property namses 比如first-name 映射成
firstName

property names 映射成 attribute names時(shí)一致

反序列化屬性

屬性最好設(shè)置type

attributes dash-case 風(fēng)格 轉(zhuǎn)換成 camel-case 風(fēng)格

配置默認(rèn)屬性值

properties 的默認(rèn)值可以再properties對(duì)象使用value屬性 可以是一個(gè)原始值或者一個(gè)function的返回值

Polymer({

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

});

屬性更改回調(diào)（觀察者）

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);
  }

});

觀察多個(gè)屬性更改

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

我們叫把可以創(chuàng)造和管理的dom叫l(wèi)ocal dom
polymer支持創(chuàng)建multiple local dom 在支持shadow dom的瀏覽器上 shadow dom用來創(chuàng)建local dom
在其他瀏覽器 polymer通過自定義實(shí)現(xiàn)的shadow dom提供local dom

local dom template

使用元素表現(xiàn)local 的id元素對(duì)應(yīng)元素 is property在dom-module內(nèi) 放置