大前端

东南水乡一叶小舟拂过水面船上两位大侠把酒言欢一位是玉真人另一位是张真人两人喝到开心处变作对联起来上联前端研究，研究个屁~ 下联前端设计，设计个屁~ 横批前端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>';}});

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

<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>