大前端

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

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