東南水鄉 一葉小舟拂過水麪 船上兩位大俠把酒言歡 一位是玉真人 另外一位是張真人 兩人喝到開心處 變做對聯起來 上聯 前端研究,研究個屁~ 下聯 前端設計,設計個屁~ 橫批 前端sbhtml
polymer 提供建立自定義和標準dom元素相似的自定義元素功能前端
能夠使用constructor或者document.createElement建立元素node
能夠配置元素attributes或properties瀏覽器
能夠在標籤內部定義一些domapp
能夠對屬性和屬性的變化處理dom
能夠有一些默認的樣式,在外部修內部樣式函數
能夠提供方法容許你來操縱它的內部狀態ui
一個基本的polymer元素定義以下:this
<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>
像普通標籤同樣使用prototype
<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標記解析時不調用
自定義函數在元素初始化後調用
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 該屬性不會添加
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) 屬性觀察者函數名 |
當映射 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 } });
咱們叫把能夠創造和管理的dom叫local dom
polymer支持建立multiple local dom 在支持shadow dom的瀏覽器上 shadow dom用來建立local dom
在其餘瀏覽器 polymer經過自定義實現的shadow dom提供local dom
使用<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>
<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>
在這個例子,這個規則
.content-wrapper ::content > .special
翻譯爲
.content-wrapper > special
內部元素使用id聲明 使用this.$ hash選擇