大前端

東南水鄉 一葉小舟拂過水面 船上兩位大俠把酒言歡 一位是玉真人 另一位是張真人 兩人喝到開心處 變作對聯起來 上聯 前端研究，研究個屁~ 下聯 前端設計，設計個屁~ 橫批 前端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 registrationPolymer({is: "element-name",// add properties and methods on the element's prototypeproperties: {// declare properties for the element's public APIgreeting: {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 callbackscreated: 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); // truevar 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>';}}); keydetails

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() {// renderthis.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

總結

以上是生活随笔為你收集整理的polymer web componets 大前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。